菜单 搜索
首页 前端知识 从零开始学习JavaScript：轻松掌握编程语言的核心技能①

从零开始学习JavaScript：轻松掌握编程语言的核心技能①

2024-08-19 22:08:11 前端知识 前端哥 666 834 我要收藏

从零开始学习JavaScript：轻松掌握编程语言的核心技能

  • 一，JavaScript 简介
      • 为什么学习 JavaScript?
      • JavaScript 用法
  • 二，JavaScript 输出
      • JavaScript 显示数据
      • JavaScript：直接写入 HTML 输出流
  • 三，JavaScript 语法
      • JavaScript 字面量
      • JavaScript 变量
      • JavaScript 操作符
      • JavaScript 语句
      • JavaScript 关键字
      • JavaScript 注释
      • JavaScript 数据类型
      • JavaScript 数据类型的概念
      • JavaScript 函数
      • JavaScript 字母大小写
      • JavaScript 字符集
      • JavaScript 语句标识符
      • JavaScript 对象

🏘️🏘️个人简介：以山河作礼。
🎖️🎖️:Python领域新星创作者，CSDN实力新星认证，阿里云社区专家博主
🎁🎁:Web全栈开发专栏：《Web全栈开发》免费专栏，欢迎阅读！


一，JavaScript 简介

📜📜 JavaScript 是一种脚本语言，用于在 Web 页面上执行交互式操作和动态效果。它最初由 Brendan Eich在1995年创建，最初被称为 LiveScript，后来更名为 JavaScript。

  1. 它是一种解释性语言，可以在浏览器中直接执行，而不需要编译器。JavaScript 可以与 HTML 和 CSS一起使用，用于创建动态网页、Web 应用程序、游戏、移动应用程序和其他各种应用程序。
  2. JavaScript是一种基于对象的语言，它支持面向对象编程、函数式编程和事件驱动编程。它具有强大的功能，包括动态类型、闭包、原型继承、异步编程和模块化编程。JavaScript
    还有许多流行的库和框架，如 jQuery、React、Angular 和 Vue.js，它们可以帮助开发人员更轻松地构建复杂的 Web
    应用程序。
  3. JavaScript 的语法相对简单，容易学习和使用，它也是一种非常灵活的语言，可以用于多种用途。在 Web开发中JavaScript 是必不可少的一部分，它已成为现代 Web 应用程序开发的核心技术之一。

为什么学习 JavaScript?

📌JavaScript 是 web 开发人员必须学习的 3 门语言中的一门：

1. HTML 定义了网页的内容
2. CSS 描述了网页的布局
3. JavaScript 控制了网页的行为

🎯学习 JavaScript 的原因有很多，以下是其中的几个主要原因：

  1. 增强 Web 页面的交互性：JavaScript 可以使 Web 页面更加生动有趣，增强用户的交互性和体验。通过使用
    JavaScript，开发人员可以添加动画、特效、表单验证、弹出窗口等交互式元素，从而提高用户体验。
  2. 开发 Web 应用程序：JavaScript 是一种非常强大的语言，可以用于开发各种类型的 Web应用程序，包括单页应用程序、社交网络、在线商店、博客、新闻网站等等。
  3. 与其他技术的集成：JavaScript 可以与其他技术（如 HTML、CSS、PHP、Python、Node.js等）进行集成，从而实现更加复杂的 Web 应用程序。
  4. 转行前端开发：JavaScript 是前端开发的核心技术之一，掌握 JavaScript可以为想要转行前端开发的人提供更多的就业机会和职业发展空间。

JavaScript 用法

📜📜HTML 中的 Javascript 脚本代码必须位于 <script> 与</script > 标签之间。

Javascript 脚本代码可被放置在 HTML 页面的 <body> 和 <head> 部分中。

<script> 标签:

  1. 如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签。

  2. <script> 和 </script> 会告诉 JavaScript 在何处开始和结束。

  3. <script> 和 </script> 之间的代码行包含了 JavaScript:

<script>
alert("我的第一个 JavaScript");
</script>

🎯浏览器会解释并执行位于 <script> 和 </script>之间的 JavaScript 代码

二，JavaScript 输出

📌JavaScript 没有任何打印或者输出的函数。

🎯JavaScript 可以通过不同的方式来输出数据：

  1. 使用 console.log() 方法在浏览器控制台输出数据，例如：
console.log("Hello World!"); // 输出 Hello World!
  1. 将数据写入 HTML 元素中，例如：
<div id="output"></div>
<script>
  document.getElementById("output").innerHTML = "Hello World!"; // 将 Hello World! 写入 id 为 output 的 div 元素中
</script>
  1. 使用 window.alert() 方法弹出警告框显示数据，例如：
window.alert("Hello World!"); // 弹出警告框，显示 Hello World!
  1. 使用 window.prompt() 方法弹出输入框获取用户输入的数据，例如：
var name = window.prompt("What is your name?"); // 弹出输入框，获取用户输入的名字
console.log("Hello " + name + "!"); // 输出 Hello [name]!

JavaScript 显示数据

JavaScript：直接写入 HTML 输出流

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试</title>
</head>
<body>

<p>
JavaScript 能够直接写入 HTML 输出流中：
</p>
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");
</script>

</body>
</html>

在这里插入图片描述

三，JavaScript 语法

JavaScript 字面量

📜在 JavaScript 中，字面量是指直接表示值的符号或者文本。JavaScript 支持多种类型的字面量，包括：

  • 数字字面量：表示数字的字面量，可以是整数或者浮点数，例如：
var num1 = 123; // 整数
var num2 = 3.14; // 浮点数
  • 字符串字面量：表示字符串的字面量，可以使用单引号或者双引号，例如：
var str1 = 'Hello'; // 使用单引号
var str2 = "World"; // 使用双引号
  • 布尔字面量：表示布尔值的字面量，只有两个值，true 和 false，例如：
var bool1 = true; // 布尔值 true
var bool2 = false; // 布尔值 false
  • 对象字面量：表示对象的字面量，使用花括号 {} 包裹，例如：
var obj = {name: 'Tom', age: 18}; // 对象字面量
  • 数组字面量：表示数组的字面量，使用方括号 [] 包裹，例如：
var arr = [1, 2, 3, 4]; // 数组字面量
  • 函数字面量：表示函数的字面量，使用 function 关键字定义，例如：
var func = function(x, y) {return x + y}; // 函数字面量

🎯字面量是 JavaScript 中非常重要的概念，它们可以直接表示值，使得代码更加简洁和易于理解。

JavaScript 变量

📜📜在 JavaScript 中，变量是用于存储数据的容器，它们可以存储各种类型的数据，例如数字、字符串、布尔值、对象等等。

📌声明变量的方式有两种：

🎯使用 var 关键字：

var num = 10; // 声明一个数字变量
var str = 'Hello'; // 声明一个字符串变量
var bool = true; // 声明一个布尔变量
var obj = {name: 'Tom', age: 18}; // 声明一个对象变量

🎯使用 let 或者 const 关键字（ES6 新增）：

let num = 10; // 声明一个数字变量
const str = 'Hello'; // 声明一个字符串常量

let 声明的变量可以被重新赋值，而 const 声明的变量是常量，不能被重新赋值。

声明变量后，可以使用变量名来访问变量的值：

var num = 10; // 声明一个数字变量
console.log(num); // 输出 10

需要注意的是，JavaScript 是一种弱类型语言，变量的类型可以随时改变：

var num = 10; // 声明一个数字变量
num = 'Hello'; // 将变量 num 的类型从数字变为字符串

变量是 JavaScript 中非常重要的概念，它们可以让我们在程序中存储和操作数据。

JavaScript 操作符

📜📜JavaScript是一种编程语言，支持多种操作符，包括算术操作符、比较操作符、逻辑操作符等等。

📌以下是一些常见的JavaScript操作符：

  1. 算术操作符：用于执行基本的算术运算，例如加、减、乘、除、取余等。常见的算术操作符包括+、-、*、/和%。
  2. 比较操作符：用于比较两个值的大小或相等性。常见的比较操作符包括==、!=、>、<、>=和<=。
  3. 逻辑操作符：用于执行逻辑运算，例如逻辑与、逻辑或和逻辑非。常见的逻辑操作符包括&&、||和!。
  4. 位操作符：用于执行位运算，例如按位与、按位或和按位异或。常见的位操作符包括&、|和^。
  5. 赋值操作符：用于给变量赋值。常见的赋值操作符包括=、+=、-=、*=、/=和%=。
  6. 条件操作符：也称为三元操作符，用于在两个值之间进行选择。常见的条件操作符为?:。

📜📜这些操作符可以用于处理各种不同的数据类型，例如数字、字符串和布尔值。在编写JavaScript代码时，熟悉这些操作符是非常重要的。

JavaScript 语句

🎯JavaScript 语句是一组指令，用于执行特定的任务。
📌以下是一些常见的 JavaScript 语句：

  • 变量声明语句：用于声明变量并可选地将其初始化。
var x;
var y = 10;
  • 表达式语句：用于计算表达式的值。
x = 5;
y = x + 2;
  • 条件语句：用于基于条件执行代码块。
if (x > 10) {
  console.log("x is greater than 10");
} else {
  console.log("x is less than or equal to 10");
}
  • 循环语句：用于重复执行代码块。
for (var i = 0; i < 10; i++) {
  console.log(i);
}
  • 函数声明语句：用于定义可重复使用的代码块。
function add(x, y) {
  return x + y;
}
  • 对象属性赋值语句：用于设置对象属性的值。
var person = {
  name: "John",
  age: 30
};
person.name = "Jane";
  • 方法调用语句：用于调用对象的方法。
var str = "Hello World!";
var res = str.toUpperCase();

JavaScript 关键字

📜📜 JavaScript 同样保留了一些关键字，这些关键字在当前的语言版本中并没有使用，但在以后 JavaScript 扩展中会用到。

🎯以下是 JavaScript 中最​​重要的保留关键字（按字母顺序）：
在这里插入图片描述

JavaScript 注释

📜📜在 JavaScript 中，注释是用来解释代码的一种方式，可以提高代码的可读性和可维护性。JavaScript 支持两种注释方式：

🎯单行注释

📌单行注释以两个斜杠 // 开头，直到行末结束。

例如：

// 这是一个单行注释
var x = 10; // 这是一个声明变量并赋值的语句，后面跟了一个单行注释

🎯多行注释

📌多行注释以 /* 开头，以 */ 结尾，可以跨越多行。

例如：

/*
这是一个多行注释
这里可以写很多行
*/
var x = 10; /* 这是一个声明变量并赋值的语句，后面跟了一个单行注释 */

JavaScript 数据类型

📜📜JavaScript 是一种动态类型语言，它支持多种数据类型。以下是一些常见的 JavaScript 数据类型：

🎯基本数据类型

  • 数字（Number）：整数和浮点数。
  • 字符串（String）：一串字符，用单引号或双引号括起来。
  • 布尔值（Boolean）：true 或 false。
  • 空值（null）：表示一个空对象指针。
  • 未定义（undefined）：表示一个未定义的变量或属性。

🎯引用数据类型

  • 对象（Object）：可以包含多个属性和方法的集合。
  • 数组（Array）：一组按顺序排列的值的集合。
  • 函数（Function）：一段可重复使用的代码块。

JavaScript 还支持一些特殊的数据类型，例如正则表达式（RegExp）和日期（Date）。

📜📜 在 JavaScript中，变量的数据类型是动态的，也就是说，变量的数据类型可以随时改变。例如，一个变量可以先被赋值为数字，然后再被赋值为字符串。

JavaScript 数据类型的概念

📌JavaScript 是一种动态类型语言，它支持多种数据类型。
🎯以下是 JavaScript 中的一些常见数据类型：

  1. 基本数据类型：包括字符串、数字、布尔值、null 和 undefined。这些数据类型是不可更改的，即它们的值在被创建后不能被修改。
  2. 引用数据类型：包括对象、数组和函数。这些数据类型是可变的，即它们的值可以随着程序的执行而改变。

JavaScript 函数

📜📜JavaScript函数是一段可重复使用的代码块，它接收输入参数并执行一些操作，然后返回结果。函数可以被多次调用，而不需要重复编写相同的代码。

📌JavaScript 函数可以通过 function 关键字定义，例如：

function myFunction(param1, param2) {
  // 函数体
  return result;
}

其中，myFunction 是函数的名称，param1 和 param2 是函数的输入参数，result
是函数的返回结果。函数体是一段代码块，它包含函数的操作和逻辑。

📌函数可以通过调用函数名称并传递参数来执行，例如：

var result = myFunction(value1, value2);

📜📜其中，value1 和 value2 是函数的输入参数，result
是函数的返回结果。在函数体中，输入参数可以用来进行计算和操作，并最终返回结果。

JavaScript 字母大小写

  • 在 JavaScript 中，标识符（变量名、函数名等）的字母大小写是敏感的，也就是说，大小写不同的标识符是不同的。例如，变量名 name 和 Name 是不同的变量。
  • JavaScript中通常使用驼峰命名法（camelCase）来命名标识符。驼峰命名法指的是将单词的首字母小写，其余字母大写，多个单词连接起来形成一个标识符。例如：
var firstName = 'John';  // 驼峰命名法
var first_name = 'John';  // 下划线命名法

📜📜在 HTML 中，JavaScript 文件的文件名也是大小写敏感的。例如，script.js 和 Script.js 是不同的文件名。

JavaScript 字符集

  1. JavaScript 使用 Unicode 字符集，它支持几乎所有的语言字符，包括 ASCII 字符和扩展字符集。Unicode是一种用于表示字符的标准，它为每个字符分配了一个唯一的数字编码，这个编码称为 Unicode 码点。JavaScript 支持的Unicode 码点范围是从 \u0000 到 \uFFFF，这意味着 JavaScript 可以表示 65536 个不同的字符。
  2. 在 JavaScript 中，可以使用 Unicode 转义序列来表示任何 Unicode 字符。Unicode 转义序列以 \u
    开头，后跟四个十六进制数字，例如 \u0041 表示大写字母 A。在 JavaScript 中，字符串可以包含任何 Unicode字符，因此可以在字符串中使用 Unicode 转义序列来表示任何字符。
  3. JavaScript 还提供了一些内置函数来操作字符串，这些函数可以处理各种字符集，包括 Unicode 字符集。例如，可以使用charCodeAt() 函数获取字符串中指定位置的字符的 Unicode 码点，使用 fromCharCode() 函数将
    Unicode 码点转换为字符。

JavaScript 语句标识符

🎯JavaScript 语句标识符是用于标识变量、函数、属性或方法的名称。
📌以下是一些 JavaScript 语句标识符的规则：

  • 标识符必须以字母、下划线（_）或美元符号（$）开头。
  • 标识符可以包含字母、数字、下划线或美元符号。
  • 标识符区分大小写。
  • 标识符不能是 JavaScript 的保留字或关键字，如 if、else、var、function 等。

📌以下是一些有效的 JavaScript 标识符示例：

myVariable
_myVariable
$myVariable
my_function
myFunction

📌以下是一些无效的 JavaScript 标识符示例：

3myVariable (不能以数字开头)
my-variable (不能包含连字符)
if (关键字)

JavaScript 对象

📜📜 JavaScript 对象是一种复合数据类型，它可以存储多个属性和方法。对象可以通过花括号 {}
来创建，属性和方法以键值对的形式存储在对象中。

📌例如，下面的代码创建了一个名为 person 的对象，包含了 name 和 age 两个属性：

var person = {
  name: "John",
  age: 30
};

📌我们可以通过点号或方括号来访问对象的属性和方法。例如，要访问 person 对象的 name 属性，我们可以使用以下语法：

person.name

或者

person["name"]

🎯我们还可以在对象中定义方法，方法是对象的属性，只不过属性的值是一个函数。
📌例如，下面的代码在 person 对象中定义了一个 sayHello 方法：

var person = {
  name: "John",
  age: 30,
  sayHello: function() {
    console.log("Hello, my name is " + this.name);
  }
};

📌我们可以通过以下语法来调用 sayHello 方法：

person.sayHello();

在方法中，关键字 this 指代当前对象，因此我们可以使用 this.name 来访问对象的 name 属性。

转载请注明出处或者链接地址：https://www.qianduange.cn//article/16173.html
标签
上一篇：HTML基本结构及基本标签
评论
相关文章

前端哥

前端哥

发布的文章

php保存

2024-08-27 16:08:00

jQuery NiceScroll 插件

2024-08-27 09:08:49

探索jQuery Template：一款强大的HTML模板引擎

2024-08-27 09:08:48

jQuery Tocify.js 开源项目教程

2024-08-27 09:08:41

推荐文章：jQuery IFrame 运输 —— 优雅的文件上传解决方案

2024-08-27 09:08:41

java——HTML、css、JavaScript、jQuery 详细介绍，web开发权威

2024-06-24 23:06:14

html css javascript jquery bootstarp响应式旅行社旅游平台网站模板(14页)

2024-06-20 00:06:22

vue echart4.0 按需引入

2024-08-27 09:08:28

echarts的x轴或者y轴文本太长省略号后鼠标浮上显示内容

2024-08-27 09:08:21

Taro3 Vue3使用echarts

2024-08-27 09:08:49

大家推荐的文章
1

【Echarts系列】—— 实现电池图、3D立体圆形柱状图

2024-03-03 11:03:011001
2

使用CDN提高jQuery加载速度

2024-08-24 23:08:211000
3

小兔鲜儿网页首页制作 黑马程序员前端基础项目自学笔记

2024-08-19 22:08:161000
4

《Vue》你的弹窗能拖动吗？Vue自定义指令实现可拖动弹窗

2024-08-19 22:08:121000
5

npm的使用

2024-08-18 00:08:131000
6

JavaScript与jQuery：昔日王者与现代前端的交响曲【含代码示例】

2024-07-30 22:07:311000
7

在HTML和CSS当中运用显示隐藏

2024-06-17 09:06:541000
8

成为优秀的TS体操高手 之 TS 类型体操前置知识储备

2024-06-10 11:06:351000
9

django改了html网页没有变化,,前端页面居然没有对应变化?!修改了css文件但是前端页面没有反应

2024-06-06 10:06:201000
10

html简单网页代码：基于html关爱空巢老人网页设计与实现

2024-06-04 10:06:181000

rss订阅 百度xml 谷歌xml 搜狗xml soxml 神马搜索xml 网站地图

Copyright © 2018-2022 前端哥 陕ICP备2023000550号-1 前端哥

讲个笑话：程序员心理活动：看别人的代码，这都写得什么玩意儿，垃圾！！看自己一个月前的代码：这TM谁写得代码，垃圾！再一看，这代码怎么这么眼熟？我自己写得？仔细一看，卧槽！还TM的真是我自己写的！！

前端技术交流源码工具分享网站

会员中心 联系我 留言建议 回顶部
复制成功！