目录一、初识 JavaScript1. JavaScript 是什么2. JavaScript 能做些什么3. HTML、CSS、JavaScript 的关系4. JavaScript 运行过程5. JavaScript 的组成6. JavaScript 的书写形式1行内式2内嵌式3外部式二、注释三、语法概览四、变量的使用1. 基本用法创建变量/变量定义/变量声明/变量初始化2. 变量定义let的出现3. 强类型与弱类型变量4. 动态类型与静态类型变量五、基本数据类型1. number数字类型2. string字符串类型1基本规则2字符串中包含引号的处理3转义字符4求长度5字符串拼接3. boolean布尔类型4. undefined未定义数据类型5. null空值类型六、运算符1. 算术运算符2. 赋值运算符 复合赋值运算符3. 自增自减运算符4. 比较运算符5. 逻辑运算符七、条件语句1. if语句1基本语法格式2. 三元表达式3. switch八、循环语句1. while循环2. continue break3. for循环一、初识 JavaScript1. JavaScript 是什么JavaScript简称 JS是世界上最流行的编程语言之一是一个脚本语言通过解释器运行。早期主要在客户端浏览器运行如今也可基于 Node.js 在服务器端运行。最初它仅用于完成简单的表单验证如验证数据合法性后来逐渐发展为通用的编程语言。2. JavaScript 能做些什么网页开发更复杂的特效和用户交互网页游戏开发服务器开发基于 Node.js桌面程序开发如 Electron、VSCode 就是这么来的手机 App 开发3. HTML、CSS、JavaScript 的关系HTML网页的结构骨CSS网页的表现皮JavaScript网页的行为魂4. JavaScript 运行过程编写的 JS 代码保存在文件中存储在硬盘/外存双击html文件时浏览器会读取文件并将代码加载到内存再解析成二进制指令交给 CPU 执行执行流内存 → CPU。浏览器分为渲染引擎​ JS 引擎渲染引擎解析 HTML CSS俗称“内核”。JS 引擎JS 解释器典型代表是 Chrome 内置的V8。JS 引擎的工作读取 JS 代码 → 解析成二进制指令 → 执行。5. JavaScript 的组成ECMAScript简称 ESJavaScript 语法标准。DOM页面文档对象模型操作页面元素。BOM浏览器对象模型操作浏览器窗口。光有 ES 语法只能写基础逻辑要完成复杂交互如操作页面、浏览器需结合 DOM 和 BOM API。若 JS 运行在服务端Node.js则关注 Node.js API不太需要 DOM/BOM。6. JavaScript 的书写形式1行内式直接嵌入到 HTML 元素内部input typebutton value点我~ onclickalert(haha)注意JS 中字符串常量可以使用单引号表示也可以使用双引号表示。HTML 中推荐使用双引号JS 中推荐使用单引号。2内嵌式写到script标签中script alert(haha); /script3外部式写到单独的.js文件中script srchello.js/scriptalert(hehe);注意这种情况下script标签中间不能写代码必须空着写了代码也不会执行适合代码多的情况。二、注释单行注释// 注释内容推荐使用多行注释/* 注释内容 */三、语法概览JavaScript 虽然一些设计理念和 Java 相近但是在基础语法层面上还是有一些相似之处。有了 Java 的基础很容易理解 JavaScript 的一些基本语法。四、变量的使用1. 基本用法创建变量/变量定义/变量声明/变量初始化var name zhangsan; var age 20;var是 JS 中的关键字表示这是一个变量。在 JS 中表示“赋值”相当于把数据放到内存的盒子中。两侧建议有一个空格。每个语句最后带有一个分号JS 中可以省略但建议还是加上。注意此处的;为英文分号JS 中所有的标点都是英文标点。初始化的值如果是字符串那么就要使用单引号或者双引号引起来。2. 变量定义let的出现let的出现规避了var在定义变量的时候的一些缺陷。如果使用let定义变量此时变量生命周期、作用域基本和 Java 类似。JS 中定义一个变量的时候不需要对找个变量指定类型。3. 强类型与弱类型变量强类型变量不同的类型之间变量进行赋值的时候需要进行一定的手段强制类型转化。弱类型变量不同变量之间变量进行赋值的时候可以直接赋值。4. 动态类型与静态类型变量动态类型变量代码在执行过程中变量类型可以随时发生变化。静态类型变量变量定义的时候是什么类型在运行过程中就是什么类型。五、基本数据类型JS 中内置的几种类型number数字不区分整数和小数。booleantrue真false假。string字符串类型。undefined只有唯一的值undefined表示未定义的值。null只有唯一的值null表示空值。1.number数字类型JS 中不区分整数和浮点数统一都使用“数字类型”来表示。特殊的数字值Infinity无穷大大于任何数值。表示数字已经超过了 JS 表示的范围。-Infinity无穷小小于任何数值。表示数字已经超过了 JS 表示的范围。NaN表示当前的结果不是一个数字。2.string字符串类型1基本规则字符串字面量需要使用引号引起来单引号双引号均可var a haha; var b hehe; var c hello; // 模板字符串2字符串中包含引号的处理如果字符串中本来已经包含引号需用转义字符 处理var msg my name is \zhangsan\; // 正确使用转义字符 var msg my name is \zhangsan\; // 正确搭配使用单双引号 var msg my name is zhangsan; // 正确搭配使用单双引号3转义字符有些字符不方便直接输入需通过转义字符表示\n换行\\反斜杠\单引号\双引号\t制表符4求长度使用String的length属性即可var a hehe; console.log(a.length); // 4 var b 哈哈; console.log(b.length); // 2单位为字符的数量。5字符串拼接使用进行拼接var a my name is ; var b zhangsan; console.log(a b); // my name is zhangsan注意数字和字符串也可以进行拼接var c my score is ; var d 100; console.log(c d); // my score is 100注意要认准相加的变量到底是字符串还是数字console.log(100 100); // 200 console.log(100 100); // 1001003.boolean布尔类型表示“真”和“假”。Boolean 原本是数学中的概念布尔代数。在计算机中boolean意义重大往往要搭配条件/循环完成逻辑判断。Boolean 参与运算时当做1和0来看待console.log(true 1); // 2 console.log(false 1); // 1这样的操作其实是不科学的实际开发中不应该这么写。4.undefined未定义数据类型如果一个变量没有被初始化过结果就是undefined是undefined类型var a; console.log(a); // undefinedundefined和字符串进行相加结果将字符串拼接console.log(a 10); // undefined10undefined和数字进行相加结果为NaNconsole.log(a 10); // NaN5.null空值类型null表示当前的变量是一个“空值”var b null; console.log(b 10); // 10 console.log(b 10); // null10注意null和undefined都表示取值非法的情况但侧重点不同。null表示当前的变量为空相当于有一个空的盒子undefined表示当前的变量未定义相当于连盒子都没有。六、运算符1. 算术运算符、-、*、/、%取余等。2. 赋值运算符 复合赋值运算符、、-、*、/、%等。3. 自增自减运算符自增 1--自减 14. 比较运算符、、、比较相等会进行隐式类型转换--只比较内容比较相等不会进行隐式类型转换--比较内容和数据类型!比较不等!严格不等5. 逻辑运算符用于计算多个boolean表达式的值与一假则假||或一真则真!非七、条件语句1.if语句1基本语法格式条件表达式为true则执行if的{}中的代码// 形式1 if (条件) { 语句 } // 形式2 if (条件) { 语句1 } else { 语句2 } // 形式3 if (条件1) { 语句1 } else if (条件2) { 语句2 } else if (...) { 语句... } else { 语句N }2. 三元表达式是if else的简化写法条件 ? 表达式1 : 表达式2条件为真返回表达式 1 的值条件为假返回表达式 2 的值。注意三元表达式的优先级是比较低的。示例判断当前数字是奇数还是偶数let num prompt(请输入数字); if (num % 2 0) { alert(这个数字是偶数); } else if (num % 2 1) { alert(这个数字是奇数); } else { alert(非法输入); }提示改成就会返回false。3.switch更适合多分支的场景switch (表达式) { case 值1: 语句1; break; case 值2: 语句2; break; ... default: 语句N; }示例用户输入一个整数提示今天是星期几let day prompt(请输入今天是星期几); // console.log(typeof(day)) day parseInt(day); switch (day) { case 1: alert(今天是星期一); break; case 2: alert(今天是星期二); break; case 3: alert(今天是星期三); break; case 4: alert(今天是星期四); break; case 5: alert(今天是星期五); break; case 6: alert(今天是星期六); break; case 7: alert(今天是星期天); break; default: alert(非法输入); }八、循环语句重复执行某些语句。1.while循环while (条件) { 循环体; }执行过程先执行条件语句。条件为true执行循环体代码。条件为false直接结束循环。2.continuebreakcontinue结束这次循环吃五个李子发现第三个李子里有一只虫子于是扔掉这个继续吃下一个李子。break结束整个循环吃五个李子发现第三个李子里有半个虫子于是剩下的也不吃了。3.for循环for (表达式1; 表达式2; 表达式3) { 循环体 }表达式1用于初始化循环变量。表达式2循环条件。表达式3更新循环变量。示例找到 100 - 200 中第一个 3 的倍数let result 0; for (i 100; i 200; i) { if (i % 3 0) { result i; break; } } alert(100~200之间第一个3的倍数是 result);