【Web】JavaScript |
您所在的位置：网站首页 › js基本语法遵循的标准 › 【Web】JavaScript |
【Web】JavaScript
|
JavaScript是什么是世界上最流行的编程语言之一是一个脚本语言, 通过解释器运行主要在客户端(浏览器)上运行, 现在也可以基于 node.js 在服务器端运行.JavaScript 的能做的事情:网页开发(更复杂的特效和 用户交互)网页游戏开发服务器开发(node.js)桌面程序开发(Electron, VSCode 就是这么来的)手机 app 开发
编写的代码是保存在文件中的, 也就是存储在硬盘(外存上). 双击 .html 文件浏览器(应用程序)就会读取文件, 把文件内容加载到内存中(数据流向: 硬盘 => 内存) 浏览器会解析用户编写的代码, 把代码翻译成二进制的, 能让计算机识别的指令(解释器的工作) 得到的二进制指令会被 CPU 加载并执行(数据流向: 内存 => CPU)
JS 引擎逐行读取 JS 代码内容, 然后解析成二进制指令, 再执行. JavaScript 的组成ECMAScript(简称 ES): JavaScript 语法 DOM: 页面文档对象模型, 对页面中的元素进行操作 BOM: 浏览器对象模型, 对浏览器窗口进行操作 光有 JS 语法, 只能写一些基础的逻辑流程. 但是要想完成更复杂的任务, 完成和浏览器以及页面的交互, 那么就需要 DOM API 和 BOM API. 这主要指在浏览器端运行的 JS. 如果是运行在服务端的 JS , 则需要使用 node.js 的 API, 就不太需要关注 DOM 和 BOM 重要概念: ECMAScript 这是一套 “标准”, 无论是啥样的 JS 引擎都要遵守这个标准来实现. 啥叫标准? 车同轨, 书同文. 秦始皇最大的贡献之一, 就是制定了一套标准. 三流公司做产品, 一流公司做标准. JavaScript 的书写形式行内式直接嵌入到 html 元素内部 注意, JS 中字符串常量可以使用单引号表示, 也可以 使用双引号表示.HTML 中推荐使用双引号, JS 中推荐使用单引号. 内嵌式写到 script 标签中 alert("thank u kobe"); 外部式写到单独的 .js 文件中 alert("hehe");注意, 这种情况下 script 标签中间不能写代码. 必须空着(写了代码也不会执行). 适合代码多的情况.
输入：promp 弹出一个输入框 // 弹出一个输入框 prompt("请输入您的姓名:");输出：alert 弹出一个警示对话框, 输出结果 // 弹出一个输出框 alert("hello");输出：console.log 在控制台打印一个日志(供程序员看 在浏览器的开发者工具下查看console标签页即可查看) // 向控制台输出日志 console.log("这是一条日志");注意: 在 VSCode 中直接输入 "log" 再按 tab 键, 就可以快速输入 console.log 敲黑板！！！ 重要概念: 日志 日志是程序员调试程序的重要手段 去医院看病, 医生会让患者做各种检查, 血常规, 尿常规, B超, CT等… 此时得到一堆检测结果. 这些 结果普通人看不懂, 但是医生能看懂, 并且医生要通过这些信息来诊断病情. 这些检测结果就是医生的 “日志” 重要概念:console . console 是一个 js 中的 “对象” . 表示取对象中的某个属性或者方法. 可以直观理解成 “的” console.log 就可以理解成: 使用 “控制台” 对象 “的” log 方法.(有点java内味儿) 语法概览JavaScript 虽然一些设计理念和 Java 相去甚远, 但是在基础语法层面上还是有一些相似之处的. 有了 Java 的基础很容易理解 JavaScript 的一些基本语法. 变量的使用基本用法 创建变量(变量定义/变量声明/变量初始化) var name = 'zhangsan'; var age = 20;var 是 JS 中的关键字, 表示这是一个变量. = 在 JS 中表示 “赋值”, 相当于把数据放到内存的盒子中. = 两侧建议有一个空格 每个语句最后带有一个 ; 结尾. JS 中可以省略 ; 但是建议还是加上. 注意, 此处的 ; 为英文分号. JS 中所有的标点都是英文标点. 初始化的值如果是字符串, 那么就要使用单引号或者双引号引起来. 初始化的值如果是数字, 那么直接赋值即可. 使用变量console.log(age); // 读取变量内容 age = 30;为啥动漫中的角色都是要先喊出技能名字再真正释放技能? 就是因为变量要先声明才能使用. 代码示例: 弹框提示用户输入信息, 再弹框显示. var name = prompt("请输入姓名:"); var age = prompt("请输入年龄:"); var score = prompt("请输入分数"); alert("您的姓名是: " + name); alert("您的年龄是: " + age); alert("您的分数是: " + score);也可以把三个输出内容合并成一次弹框 var name = prompt("请输入姓名:"); var age = prompt("请输入年龄:"); var score = prompt("请输入分数"); alert("您的姓名是: " + name + "\n" + "您的年龄是: " + age + "\n" + "您的分数是: " + score + "\n");+表示字符串拼接, 也就是把两个字符串首尾相接变成一个字符串.\n 表示换行
JavaScript 中还支持使用 let 定义变量. 用法和 var 基本类似. 1. 作用域不同 var是函数作用域，let是块作用域。 在函数中声明了var，整个函数内都是有效的，比如说在for循环内定义的一个var变量，实>际上其在for循环以外也是可以访问的 而let由于是块作用域，所以如果在块作用域内定义的变量，比如说在for循环内，在其外面>是不可被访问的，所以for循环推荐用let 2. let不能在定义之前访问该变量，但是var可以。 let必须先声明，再使用。而var先使用后声明也行，只不过直接使用但没有定义的时>候，其值是undefined。var有一个变量提升的过程，当整个函数作用域被创建的时候，实际上var定义的变量都会被创建，并且如果此时没有初始化的话，则默认为初始化一个undefined 3.let不能被重新定义，但是var是可以的 理解 动态类型 JS 的变量类型是 程序运行过程中才确定的(运行到 = 语句才会确定类型) var a = 10; // 数字 var b = "hehe"; // 字符串随着程序运行, 变量的类型可能会发生改变. var a = 10; // 数字 a = "hehe"; // 字符串基本数据类型JS 中内置的几种类型 number: 数字. 不区分整数和小数. boolean: true 真, false 假. string: 字符串类型. undefined: 只有唯一的值 undefined. 表示未定义的值. null: 只有唯一的值 null. 表示空值. number数字类型特殊的数字值 Infinity: 无穷大, 大于任何数字. 表示数字已经超过了 JS 能表示的范围. -Infinity: 负无穷大, 小于任何数字. 表示数字已经超过了 JS 能表示的范围. NaN: 表示当前的结果不是一个数字. 注意: 负无穷大 和 无穷小 不是一回事. 无穷小指无限趋近与 0, 值为 1 / Infinity‘hehe’ + 10 得到的不是 NaN, 而是 ‘hehe10’, 会把数字隐式转成字符串, 再进行字符串拼接.可以使用 isNaN 函数判定是不是一个非数字.console.log(isNaN(10)); // false console.log(isNaN('hehe' - 10)); // truestring字符串类型基本规则 字符串字面值需要使用引号引起来, 单引号双引号均可. var a = "haha"; var b = 'hehe'; var c = hehe; // 运行出错如果字符串中本来已经包含引号咋办? var msg = "My name is "zhangsan""; // 出错 var msg = "My name is \"zhangsan\""; // 正确, 使用转义字符. \" 来表示字符串内部的引 号. var msg = "My name is 'zhangsan'"; // 正确, 搭配使用单双引号 var msg = 'My name is "zhangsan"'; // 正确, 搭配使用单双引号转义字符 有些字符不方便直接输入, 于是要通过一些特殊方式来表示. \n\’"\t求长度 使用 String 的 length 属性即可，单位为字符的数量 var a = 'hehe'; console.log(a.length);//结果是4 var b = '哈哈'; console.log(b.length);//结果是2字符串拼接 使用 + 进行拼接 var a = "my name is "; var b = "zhangsan"; console.log(a + b);注意, 数字和字符串也可以进行拼接 var c = "my score is "; var d = 100; console.log(c + d);注意, 要认准相加的变量到底是字符串还是数字 console.log(100 + 100); // 200 console.log('100' + 100); // 100100boolean布尔类型表示 “真” 和 “假” boolean 原本是数学中的概念 (布尔代数). 在计算机中 boolean 意义重大, 往往要搭配条件/循环完成逻辑判断. Boolean 参与运算时当做 1 和 0 来看待. console.log(true + 1); console.log(false + 1)这样的操作其实是不科学的. 实际开发中不应该这么写. undefined 未定义数据类型如果一个变量没有被初始化过, 结果就是 undefined, 是 undefined 类型 var a; console.log(a)undefined 和字符串进行相加, 结果进行字符串拼接 console.log(a + "10"); // undefined10undefined 和数字进行相加, 结果为 NaN console.log(a + 10);null 空值类型null 表示当前的变量是一个 “空值”. var b = null; console.log(b + 10); // 10 console.log(b + "10"); // null10注意: null 和 undefined 都表示取值非法的情况, 但是侧重点不同. null 表示当前的值为空. (相当于有一个空的盒子) undefined 表示当前的变量未定义. (相当于连盒子都没有) 运算符算术运算符+-*/%赋值运算符 & 复合赋值运算符= += -= *= /= %= 自增自减运算符++: 自增1 - -: 自减1 比较运算符= == 比较相等(会进行隐式类型转换) != === 比较相等(不会进行隐式类型转换) !== 逻辑运算符用于计算多个 boolean 表达式的值. && 与: 一假则假 || 或: 一真则真 ! 非 位运算& 按位与 | 按位或 ~ 按位取反 ^ 按位异或 移位运算> 有符号右移(算术右移) >>> 无符号右移(逻辑右移) 条件语句if 语句基本语法格式条件表达式为 true, 则执行 if 的 { } 中的代码// 形式1 if (条件) { 语句 } // 形式2 if (条件) { 语句1 } else { 语句2 } // 形式3 if (条件1) { 语句1 } else if (条件2) { 语句2 } else if .... { 语句... } else { 语句N } 三元表达式是 if else 的简化写法. 条件 ? 表达式1 : 表达式2条件为真, 返回表达式1 的值. 条件为假, 返回表达式2 的值. 注意, 三元表达式的优先级是比较低的 switch更适合多分支的场景. switch (表达式) { case 值1: 语句1; break; case 值2: 语句2: break; default: 语句N; } |
【本文地址】