2026/4/15 21:12:34
网站建设
项目流程
延庆网站制作,网站开发语言怎么选,使用cdn的网站,能做ppt的软件初识 JavaScript
JavaScript 是什么
JavaScript (简称 JS)
是世界上最流行的编程语言之一是一个脚本语言#xff0c;通过解释器运行主要在客户端 (浏览器) 上运行#xff0c;现在也可以基于 node.js 在服务器端运行.
JavaScript 最初只是为了完成简单的表单验证 (验证数据…初识 JavaScriptJavaScript 是什么JavaScript (简称 JS)是世界上最流行的编程语言之一是一个脚本语言通过解释器运行主要在客户端 (浏览器) 上运行现在也可以基于 node.js 在服务器端运行.JavaScript 最初只是为了完成简单的表单验证 (验证数据合法性), 结果后来不小心就火了.当前 JavaScript 已经成为了一个通用的编程语言JavaScript 的能做的事情:网页开发 (更复杂的特效和用户交互)网页游戏开发服务器开发 (node.js)桌面程序开发 (Electron, VSCode 就是这么来的)手机 app 开发发展历史JavaScript 之父 布兰登 * 艾奇 (Brendan Eich)曾经的布兰登现在的布兰登1995 年用 10 天时间完成 JS 的设计 (由于设计时间太短语言的一些细节考虑得不够严谨导致后来很长一段时间Javascript 写出来的程序混乱不堪)最初在网景公司命名为 LiveScript,一般认为当时 Netscape 之所以将 LiveScript 命名为 JavaScript, 是因为 Java 是当时最流行的编程语言带有 Java 的名字有助于这门新生语言的传播。其实 Java 和 JavaScript 之间的语法风格相去甚远。JavaScript 发展历史可以参考阮一峰大神的博客 http://www.ruanyifeng.com/blog/2011/06/birth_of_javascript.htmlJavaScript 和 HTML 和 CSS 之间的关系JavaScript 运行过程编写的代码是保存在文件中的也就是存储在硬盘 (外存上).双击.html 文件浏览器 (应用程序) 就会读取文件把文件内容加载到内存中 (数据流向硬盘 内存)浏览器会解析用户编写的代码把代码翻译成二进制的能让计算机识别的指令 (解释器的工作)得到的二进制指令会被 CPU 加载并执行 (数据流向内存 CPU)浏览器分成渲染引擎 JS 引擎渲染引擎解析 htmlCSS, 俗称 内核JS 引擎也就是 JS 解释器典型的就是 Chrome 中内置的 V8JS 引擎逐行读取 JS 代码内容然后解析成二进制指令再执行.JavaScript 的组成ECMAScript (简称 ES):JavaScript 语法DOM: 页面文档对象模型对页面中的元素进行操作BOM: 浏览器对象模型对浏览器窗口进行操作光有 JS 语法只能写一些基础的逻辑流程.但是想要完成更复杂的任务完成和浏览器以及页面的交互那么久需要 DOM API 和 BOM API.这主要指在浏览器端运行的 JS, 如果是运行在服务端的 JS, 则需要使用 node.js 的 API, 就不太需要关注 DOM 和 BOM重要概念ECMAScript这是一套 标准, 无论是啥样的 JS 引擎都要遵守这个标准来实现.啥叫标准车同轨书同文秦始皇最大的贡献之一就是制定了一套标准.三流公司做产品一流公司做标准.前置知识第一个程序script alert(你好!); /scriptJavaScript 代码可以嵌入到 HTML 的 script 标签中.JavaScript 的书写形式行内式直接嵌入到 html 元素内部input typebutton value点我一下 onClickalert(haha)注意: JS 中字符串常量可以使用单引号表示也可以使用双引号表示.HTML 中推荐使用双引号JS 中推荐使用单引号内嵌式写到 script 标签中script alert(haha); /script外部式写到单独的.js 文件中script srchello.js/script// hello.js文件内容 alert(hehe);注意这种情况下 script 标签中间不能写代码必须空着 (写了代码也不会执行).适合代码多的情况.注释单行注释//建议使用多行注释/* */// 我是单行注释 /* 我是多行注释 我是多行注释 我是多行注释 */使用ctrl /切换注释.多行注释不能嵌套形如这种代码就会报错:/* /* 我是多行注释 我是多行注释 */ */输入输出输入: prompt弹出一个输入框// 弹出一个输入框 prompt(请输入您的姓名:);输出: alert弹出一个警示对话框输出结果// 弹出一个输出框 alert(hello);输出: console.log在控制台打印一个日志 (供程序员看)// 向控制台输出日志 console.log(这是一条日志);注意在 VSCode 中直接输入log再按 tab 键就可以快速输入console.log需要打开浏览器的开发者工具 (F12) Console 标签页 才能看到结果.这样的输出一般不是给普通用户看的而是程序员来看的.重要概念日志日志是程序员调试程序的重要手段去医院看病医生会让患者做各种检查血常规尿常规B 超CT 等... 此时得到一堆检测结果。这些结果普通人看不懂但是医生能看懂并且医生要通过这些信息来诊断病情.这些检测结果就是医生的 日志PS: 相比于医生来说程序猿多一个终极大招重启下试试.重要概念:console是一个 js 中的 对象.表示取对象中的某个属性或者方法可以直观理解成 的console.log就可以理解成使用 控制台 对象 的log方法.语法概览JavaScript 虽然一些设计理念和 Java 相去甚远但是在基础语法层面上还是有一些相似之处的.有了 Java 的基础很容易理解 JavaScript 的一些基本语法.前置知识第一个程序script alert(你好!); /scriptJavaScript 代码可以嵌入到 HTML 的 script 标签中.JavaScript 的书写形式行内式直接嵌入到 html 元素内部input typebutton value点我一下 onClickalert(haha)注意: JS 中字符串常量可以使用单引号表示也可以使用双引号表示.HTML 中推荐使用双引号JS 中推荐使用单引号内嵌式写到 script 标签中script alert(haha); /script外部式写到单独的.js 文件中script srchello.js/script// hello.js文件内容 alert(hehe);注意这种情况下 script 标签中间不能写代码必须空着 (写了代码也不会执行).适合代码多的情况.注释单行注释//建议使用多行注释/* */// 我是单行注释 /* 我是多行注释 我是多行注释 我是多行注释 */使用ctrl /切换注释.多行注释不能嵌套形如这种代码就会报错:/* /* 我是多行注释 我是多行注释 */ */输入输出输入: prompt弹出一个输入框// 弹出一个输入框 prompt(请输入您的姓名:);输出: alert弹出一个警示对话框输出结果// 弹出一个输出框 alert(hello);输出: console.log在控制台打印一个日志 (供程序员看)// 向控制台输出日志 console.log(这是一条日志);注意在 VSCode 中直接输入log再按 tab 键就可以快速输入console.log需要打开浏览器的开发者工具 (F12) Console 标签页 才能看到结果.这样的输出一般不是给普通用户看的而是程序员来看的.重要概念日志日志是程序员调试程序的重要手段去医院看病医生会让患者做各种检查血常规尿常规B 超CT 等... 此时得到一堆检测结果。这些结果普通人看不懂但是医生能看懂并且医生要通过这些信息来诊断病情.这些检测结果就是医生的 日志PS: 相比于医生来说程序猿多一个终极大招重启下试试.重要概念:console是一个 js 中的 对象.表示取对象中的某个属性或者方法可以直观理解成 的console.log就可以理解成使用 控制台 对象 的log方法.语法概览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基本类似。用法上的差异此处暂时不讨论。理解 动态类型JS 的变量类型是程序运行过程中才确定的 (运行到 - 语句才会确定类型)var a 10; // 数字 var b hehe; // 字符串随着程序运行变量的类型可能会发生改变。var a 10; // 数字 a hehe; // 字符串这一点和 C Java 这种静态类型语言差异较大。C, C, Java, Go 等语言是静态类型语言。一个变量在创建的时候类型就确定了不能在运行时发生改变。如果尝试改变就会直接编译报错。基本数据类型JS 中内置的几种类型number: 数字。不区分整数和小数。boolean: true 真false 假。string: 字符串类型。undefined: 只有唯一的值 undefined。表示未定义的值。null: 只有唯一的值 null。表示空值。number 数字类型JS 中不区分整数和浮点数统一都使用 “数字类型” 来表示。数字进制表示计算机中都是使用二进制来表示数据而人平时都是使用十进制。因为二进制在使用过程中不太方便 (01 太多会看花眼)。所以在日常使用二进制数字时往往使用 八进制 和 十六进制 来表示二进制数字。var a 07; // 八进制整数以 0 开头 var b 0xa; // 十六进制整数以 0x 开头 var c 0b10; // 二进制整数以 0b 开头注意:一个八进制数字对应三个二进制数字一个十六进制数字对应四个二进制数字。(两个十六进制数字就是一个字节)各种进制之间的转换不需要手工计算直接使用计算器即可。特殊的数字值Infinity: 无穷大大于任何数字。表示数字已经超过了 JS 能表示的范围。-Infinity: 负无穷大小于任何数字。表示数字已经超过了 JS 能表示的范围。NaN: 表示当前的结果不是一个数字。var max Number.MAX_VALUE; // 得到 Infinity console.log(max * 2); // 得到 -Infinity console.log(-max * 2); // 得到 NaN console.log(hehe - 10);注意:负无穷大和无穷小不是一回事。无穷小指无限趋近与 0值为 1 / Infinityhehe 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); var b 哈哈; console.log(b.length);4 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和数字进行相加结果为NaNconsole.log(a 10);null 空值类型null表示当前的变量是一个 “空值”。var b null; console.log(b 10); // 10 console.log(b 10); // null10注意:null和undefined都表示取值非法的情况但是侧重点不同。null表示当前的值为空。(相当于有一个空的盒子)undefined表示当前的变量未定义。(相当于连盒子都没有)