009 *【JS】：JS特点、JS 引擎、JS 组成、JS书写位置、JS 注释、变量命名规范、5中变量、变量类型检测、变量转换、运算符、分支结构、循环
目录
1：JS 特点：（4种语言）
2：游览器引擎（渲染引擎、JS 引擎）
3：JS 构成
4：JS 书写位置
5：JS 注释
1：变量命令规范
2：5种变量
3：变量类型检测
4：转 number、转 string、转 boolean
5：运算符
6：分支结构
7：循环
正文
一：JS 基础
1：JS 特点
JS 语言的特点
(1)借鉴C语言的基本语法
(2)借鉴Java语言的数据类型和内存管理
(3)借鉴Scheme语言，将函数提升到"第一等公民"(first class)的地位
(4)借鉴Self语言，使用基于原型(prototype)的继承机制
2：JS 引擎
最初内核的概念包括渲染引擎与JS引擎，目前习惯直接称渲染引擎为内核，JS引擎独立。
游览器 渲染引擎 js 引擎
Safari WebKit 内核 SquirrelFish(金鳞鱼)
Google Blink 内核（闪烁） V8
IE Trident 内核（三叉戟） JScript
Firefox Gecko内核 （壁虎） TraceMonkey
3：JS 组成
Web标准不是某一个标准，而是由W3C和其他标准化组织制定的一系列标准的集合。
主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面。
结构标准：结构用于对网页元素进行整理和分类，咱们主要学的是HTML。 最重要
表现标准：表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS。
行为标准：行为是指网页模型的定义及交互的编写，咱们主要学的是 Javascript
4：JS 书写位置
JS 也有多种方式书写，分为 行内式 ， 内嵌式 ， 外链式
5：JS 注释
代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>JS 教程</title> <!-- 3:外链式 --> <script src="index1.js"></script> <script> // 2: 内嵌式 alert("弹窗11"); /* 多行注释 shift+option+A */ </script> </head> <body> <div>单行注释 command+/</div> <div>多行注释 shift+option+A</div> <!-- 1：行内式 --> <div onclick="alert('我是一个弹窗')" style="width: 100px; height: 100px; background-color: blue;">点击出弹窗</div> </body> </html> <!-- JS 就是通过固定的语法去操作 浏览器 和 标签结构 来实现网页上的各种效果 1:JS 语言的特点 (1)借鉴C语言的基本语法 (2)借鉴Java语言的数据类型和内存管理 (3)借鉴Scheme语言，将函数提升到"第一等公民"(first class)的地位 (4)借鉴Self语言，使用基于原型(prototype)的继承机制 2：游览器 渲染引擎 js引擎 游览器 渲染引擎 js 引擎 Safari WebKit 内核 SquirrelFish(金鳞鱼) Google Blink 内核（闪烁） V8 IE Trident 内核（三叉戟） JScript Firefox Gecko内核 （壁虎） TraceMonkey 3：JS 包括什么？ 1. ECMASCRIPT: 定义了javascript的语法规范,描述了语言的基本语法和数据类型 2. BOM (Browser Object Model): 浏览器对象模型 - 有一套成熟的可以操作浏览器的 API，通过 BOM 可以操作浏览器。比如： 弹出框、浏览器跳转、获取分辨率等 3. DOM (Document Object Model): 文档对象模型 - 有一套成熟的可以操作页面元素的 API，通过 DOM 可以操作页面中的元素。比如： 增加个 div，减少个 div，给 div 换个位置等 4: JavaScript代码的书写位置 和 css 一样，我们的 JS 也可以有多种方式书写在页面上让其生效 JS 也有多种方式书写，分为 行内式 ， 内嵌式 ， 外链式 -->
二：变量
1：变量的命名规则和变量的规范
规则： 必须遵守的，不遵守就是错
1. 一个变量名称可以由 数字、字母、英文下划线（_）、美元符号（$） 组成
2. 严格区分大小写
3. 不能由数字开头
4. 不能是 保留字 或者 关键字
5. 不要出现空格
规范： 建议遵守的（开发者默认），不遵守不会报错
1.变量名尽量有意义（语义化）
2.遵循驼峰命名规则，由多个单词组成的时候，从第二个单词开始首字母大写
3.不要使用中文
2: 基本数据类型
1. 数值类型（number）
一切数字都是数值类型（包括二进制，十进制，十六进制等）
NaN（not a number），一个非数字
2. 字符串类型（string）
被引号包裹的所有内容（可以是单引号也可以是双引号）
3. 布尔类型（boolean）
只有两个（true 或者 false）
4. null类型（null）
只有一个，就是 null，表示空的意思
5. undefined类型（undefined）
只有一个，就是 undefined，表示没有值的意思
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>变量和变量类型</title> <script> /* 1：变量的命名规则和变量的规范 规则： 必须遵守的，不遵守就是错 1. 一个变量名称可以由 数字、字母、英文下划线（_）、美元符号（$） 组成 2. 严格区分大小写 3. 不能由数字开头 4. 不能是 保留字 或者 关键字 5. 不要出现空格 规范： 建议遵守的（开发者默认），不遵守不会报错 1.变量名尽量有意义（语义化） 2.遵循驼峰命名规则，由多个单词组成的时候，从第二个单词开始首字母大写 3.不要使用中文 2: 基本数据类型 1. 数值类型（number） 一切数字都是数值类型（包括二进制，十进制，十六进制等） NaN（not a number），一个非数字 2. 字符串类型（string） 被引号包裹的所有内容（可以是单引号也可以是双引号） 3. 布尔类型（boolean） 只有两个（true 或者 false） 4. null类型（null） 只有一个，就是 null，表示空的意思 5. undefined类型（undefined） 只有一个，就是 undefined，表示没有值的意思 */ var bookName = "js编程"; //1.基本类型 /* 1. Number 18 ,12.5(浮点数)，2e3，十六进制，八进制，二进制， NaN 2. String 字符串类型 3. Boolean true false 4. Undefined : undefined 5. Null: null 无 6. Symbol */ // 2.复杂类型 - (对象类型) // 1: number类型 // 10进制 var age = 18 console.log("--->>>>10进制 int") console.log(age) console.log(typeof (age)) // double 类型 var price = 12.5 console.log("--->>>>double 类型") console.log(price) console.log(typeof (price)) // 科学计数法 var year = 2e3 // 2*10^3 console.log("--->>>>科学计数法") console.log(year) console.log(typeof (year)) // 16进制 var a = 0xff // 1-9 ,a,b,c,d,e,f console.log("--->>>>16进制") console.log(a) console.log(typeof (a)) // 8进制 var b = 0o77 console.log("--->>>>8进制") console.log(b) console.log(typeof (b)) // 2进制 var c = 0b11 console.log("--->>>>2进制") console.log(c) console.log(typeof (c)) // 2：string 类型 var str = "kerwin" console.log("--->>>>字符串") console.log(str) console.log(typeof (str)) // 3:布尔类型 var isChecked = false console.log("--->>>>布尔类型") console.log(isChecked) console.log(typeof (isChecked)) // 4:null类型 var whichObject = null console.log("--->>>>null类型") console.log(whichObject) console.log(typeof (whichObject)) whichObject = { name: "kerwin" } console.log(whichObject) // 5:undefined 未定义 var which //声明了，但是未赋值 console.log("--->>>>undefined 未定义") console.log(which) console.log(typeof (which)) which = 100 console.log(which) </script> </head> <body> <div>变量</div> </body> </html>
3：变量类型检测
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>变量类型检测</title> <script> var a = 100 // 方法一： console.log(typeof a) //转成数值 // 方法二： console.log(typeof(a)) //结果一定是字符串 string类型 console.log(typeof typeof a) // string console.log(typeof a + 100 ) // number100 console.log(typeof(a +100) ) // number var b = null console.log(typeof b) // object </script> </head> <body> </body> </html>
详解：
typeof 的结果是字符串，字符串的类型一定是字符串
4：数据类型转换
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>数据类型转换</title> <script> /* 数据类型之间的转换: 其他数据类型转成数值Number()，其他数据类型转成字符串String()，其他数据类型转成布尔Boolean() 1 其他数据类型转成数值 1.1: Number(变量) 可以把一个变量强制转换成数值类型 可以转换小数，会保留小数 可以转换布尔值 遇到不可转换的都会返回 NaN 1.2:parseInt(变量) 从第一位开始检查，是数字就转换，知道一个不是数字的内容 开头就不是数字，那么直接返回 NaN 不认识小数点，只能保留整数 1.3:parseFloat(变量) 从第一位开始检查，是数字就转换，知道一个不是数字的内容 开头就不是数字，那么直接返回 NaN 认识一次小数点 1.4:除了加法以外的数学运算 运算符两边都是可运算数字才行 如果运算符任何一遍不是一个可运算数字，那么就会返回 NaN 加法不可以用 2 其他数据类型转成字符串 String() +"" 这两种方法都可以转换 2.1:变量.toString()(不推荐) 有一些数据类型不能使用 toString() 方法，比如 undefined 和 null 2.2:String(变量) 所有数据类型都可以 2.3:使用加法运算 在 JS 里面，+ 由两个含义 字符串拼接： 只要 + 任意一边是字符串，就会进行字符串拼接 加法运算：只有 + 两边都是数字的时候，才会进行数学运算 3 其他数据类型转成布尔 Boolean(变量) 在 js 中，只有 ''、0、null、undefined、NaN，这些是 false 其余都是 true */ // 1:其他类型转数值 // 字符串转number var strA = "abc" var StrB = Number(strA) // NaN not a number console.log(strA, StrB, typeof StrB) // "abc", NaN, number // 空字符串 空格 tab 转成 number 的结果是0 var strC = " " var StrD = Number(strC) // 0 console.log(strC, StrD, typeof StrB) // "", 0, number // boolean转number var boolA = false // true false var boolB = Number(boolA) // 1 , 0 console.log(boolA, boolB, typeof boolB) // false 0 'number' // null转number var nullA = null var nullB = Number(nullA) // 0 console.log(nullA, nullB, typeof(nullB)); // null 0 'number' // undefined转number var undefinedA var undefinedB = Number(undefinedA) // NaN console.log(undefinedA, undefinedB, typeof(undefinedB)); // undefined NaN 'number' // 数字开头的字符串：number 转换 var strE = "123abc" var numf = Number(strE) // NaN console.log(strE, numf, typeof(numf)) // 123abc NaN number // 数字开头的字符串：parseInt 转换 var strG = "123abc" var numG = parseInt(strG) // 123 console.log(strG, numG, typeof(numG)) // 123abc 123 number // 数字开头有小数的字符串：parseInt 转换 var strH = "123.56abc" var numH = parseInt(strH) // 123 console.log(strH, numH, typeof(numH)) // 123.56abc 123 number // 数字开头有小数的字符串：parseFloat 转换 var strJ = "1.25rem" var numJ = parseFloat(strJ) console.log(strJ, numJ, typeof(numJ)) // 1.25rem 1.25 number // 非加号 -0 /1 *1 var strI = "100" var numI1 = strI-0 var numI2 = strI*1 var numI3 = strI/1 console.log(strI, numI1, numI2, numI3, typeof(numJ)) // 100 100 100 100 number // 2:其他类型转字符串 String() +"" 这两种方法都可以转换 //2.1. String() .所有类型都能转成字符串 var intJ = 100; var strJ = String(intJ); console.log(intJ, strJ); // 100 '100' var strN = String(StrB); // console.log(StrB, strN); // NaN 'NaN' var intL = false; var strL = String(intL); console.log(intL, strL); // false 'false' var nullM = null; var strM = String(nullM); console.log(nullM, strM); // null 'null' var undefinedO var strO = String(undefinedO); console.log(undefinedO, strO); // undefined 'undefined' // 2.2: toString var intJ1 = 100; var strJ1 = intJ.toString(); console.log(intJ1, strJ1); // 100 '100' var strN1 = StrB.toString(); console.log(StrB, strN1); // NaN 'NaN' var intL1 = false; var strL1 = intL1.toString(); console.log(intL1, strL1); // false 'false' // var nullM1 = null; // var strM1 = nullM1.toString(); // BaseView.html:142 Uncaught TypeError: Cannot read properties of null (reading 'toString') // console.log(nullM1, strM1); // var undefinedO1 // var strO1 = undefinedO1.toString(); // BaseView.html:146 Uncaught TypeError: Cannot read properties of undefined (reading 'toString') // console.log(undefinedO1, strO1); // 2.3 +"" // int 转字符串 var a = 100 var b = a+"" console.log(a,b) // 100 '100' var strO = StrB+""; console.log(StrB, strO); // NaN 'NaN' var boolP = false var strP = boolP+""; console.log(boolP, strP); // false 'false' var nullQ = null; var strQ = nullQ+""; console.log(nullQ, strQ); // null 'null' var undefinedR var strR = undefinedR+""; console.log(undefinedR, strR); // undefined 'undefined' // 其他数据类型转 boolean var intJ2 = 0; var strJ2 = Boolean(intJ2); console.log(intJ2, strJ2); // 0 false var strN2 = Boolean(StrB); console.log(StrB, strN2); // NaN false var str1 = ""; // false // var str1 = " "; // true 空格 // var str1 = " "; // true tab var strL2 = Boolean(str1); console.log(str1, strL2); // false 'false' var nullM2 = null; var strM2 = Boolean(nullM2); console.log(nullM2, strM2); // null false var undefinedO2 var strO2 = Boolean(undefinedO2); console.log(undefinedO2, strO2); // undefined false </script> </head> <body> </body> </html>
详解：
空字符串 空格 tab 转成 number 的结果是0
只有 ''、0、null、undefined、NaN，这些是 false
5：运算符
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>运算符</title> <script> /* 运算符 1：数学运算符 + - * / % 取余 2：赋值运算符 = += -= *= /= %= 3：比较运算符 == === != !== >= <= > < 4：逻辑运算符 && || ! 5：自增自减运算符 ++ -- 6：三目运算符 */ // 1:数学运算符 // + - * / % 取余 console.log("--->>>1：数学运算符 + - * / % 取余") var a = 10 var b = true console.log(a + b) // b先转换成 num，之后进行加法，隐式转换 // 被除数/除数 c商 。。。。余数 var c = 10 var d = 3 console.log(c % d) // 1000分钟转成小时 var e = 1000 // 分钟 var f = parseInt(e / 60) // 10：20 var g = e % 60 console.log(f + ":" + g)// 16+""+40 // 先计算乘法 "2"*3,字符串2转数字=6，之后字符串拼接 console.log("1" + "2" * 3 + 4) // 2：赋值运算符 = += -= *= /= %= console.log("--->>>2：赋值运算符 = += -= *= /= %=") var number2 = 5 number2 += 1 console.log(number2) var x2 = 10 x2 %= 3 console.log(x2) // 3：比较运算符 == === != !== >= <= > < console.log("--->>>3：比较运算符 == === != !== >= <= > <") var age3 = "22" console.log(parseInt(age3)===22) // true console.log(true==1) // true console.log(""===0) // false console.log(undefined==0) // false var x3 = "6" console.log(parseInt(x3)!==6) // false // 4：逻辑运算符 && || ! console.log("--->>>4：逻辑运算符 && || !") var a4 = true var b4 = true console.log(a4 && b4) // true var day4 = 1 console.log(day4===6 || day4===7) // false var c4 = false console.log(!c4) // true /* 特殊： 1. !!a ==>转换成布尔值 2. && || 短路 用发 */ console.log("--->>>特殊用法") var x4 = "1111" console.log(!!x4) // true var y4 = null console.log(y4 && y4.toString()) // null console.log(11111) // 11111 var z4 = "" z4 = "赵钱孙李" document.write(z4 || "这个家伙很赖，什么也没有留下") // 5: 自增自减运算符 ++ -- console.log("--->>>5: 自增自减运算符 ++ --") var number50 = 10 var number51 = 10 console.log(++number50, number50) // 前置++ 会返回11，之后把 number50置为11 console.log(number51++, number51) // 后置++ 会返回10，之后把 number51置为11 var n = 10 console.log("--->>>5: 综合运算") // n的值 11 // 结果值 11 var res = ++n console.log(n,res) // 11 11 // n的值 11 12 // 结果值 11 11 n = 10; var res = ++n + n++ console.log(n,res) // n的值 11 12 13 // 结果值 11 11 13 n = 10; var res = ++n + n++ + ++n console.log(n,res) // 13 35 var m = 10 // m的值 11 // 结果值 10 var res = m++ console.log(m,res) var m = 10 // m的值 11 10 // 结果值 10 10 var res = m++ + --m console.log(m,res) var m = 10 // m的值 11 10 9 // 结果值 10 10 10 var res = m++ + --m + m-- console.log(m,res) // 9 30 // 6：三目运算符 10<20?console.log(11111):console.log(22222) </script> </head> <body> </body> </html>
详解：
自增自减：自己的结果都必须执行增或者减。之后 n++、++n、n--、--n 的结果不同而已。
6：分支结构
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>分支结构</title> <script> /* 分支结构：1：if 语句，2：switch 语句 1:if语句 1:if 2： if else 3：if else if else 2:switch case */ // 1:if语句 var sum = 46 var youhuisum if (sum > 200) { youhuisum = sum - 10 } else if (sum > 100) { youhuisum = sum - 5 } else if (sum > 50) { youhuisum = sum - 3 } else { youhuisum = sum } console.log(sum, youhuisum) // 2：switch 语句 /* 订单状态码 1 未付款 2 已付款 3.已发货 4.已完成 */ var code = 3 switch (code) { case 1: document.write("未付款") break; case 2: document.write("已付款") break; case 3: document.write("已发货") break; case 4: document.write("已完成") break; default: document.write("出错了") } /* 注意： 1. ===，是恒等于 2. 不要比较运算符 3. break；必须写 */ </script> </head> <body> </body> </html>
详解
7：循环
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>循环</title> <style> span{ display: inline-block; width: 100px; height: 30px; } </style> <script> /* 1:while循环 2：dowhile 循环 3：for循环 4：break 5:continue 6:return */ // 1:while循环 console.log("--->>>:1:while循环") var n1 = 0; while (n1 < 10) { console.log("li", n1) //自身改变，步长 n1++ } // 2：dowhile 循环 console.log("--->>>:2：dowhile 循环") var n2 = 0 do { console.log("li", n2) n2++ } while (n2 < 10) // 3:for循环 console.log("--->>>:3:for循环") for (var n = 1; n <= 10; n++) { // console.log(n) if (n <= 3) { console.log("广告商品", n) } else { console.log("普通商品", n) } } // 4：break 跳出来当前的循环 console.log("--->>>:4：break") for (var i = 0; i <= 5; i++) { if (i === 3) { break } console.log(i) } // 5:continue 跳过当前的这一次循环，执行下一次循环 console.log("--->>>:5:continue") for (var i = 0; i <= 5; i++) { if (i === 3) { continue } console.log(i) } // 6:return 跳过循环 function test() { console.log("--->>>:6:return 跳过循环") for (var i = 0; i <= 5; i++) { for (var j = 0; j < 3; j++) { if (i === 3 && j === 1) { // 需要把 return，放到 function 里面 // javascript中的return是只能放在function中的 return; } console.log(i, j) } } } test(); // 九九乘法表 for (var m = 1; m <= 9; m++) { for (var n = 1; n <= m; n++) { document.write("<span>"+m+"*"+n+"="+m*n+"</span>") } document.write("<br>") } </script> </head> <body> </body> </html>
详解：
引用
