JavaScript书写位置内部JavaScript直接写在html文件里用script标签包住规范script标签写在上面拓展 alert(‘你好js’) 页面弹出警告对话框e.g.body!-- 内部js --script// 页面弹出警示框alert(你好js)/script/body注意事项我们将script放在 HTML 文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载 HTML。如果先加载的 JavaScript 期望修改其下方的 HTML那么它可能由于 HTML 尚未被加载而失效。因此将 JavaScript 代码放在 HTML 页面的底部附近通常是最好的策略。外部JavaScript代码写在以.js结尾的文件里语法通过script标签引入到html页面中。e.g.bodyscriptsrc./js/my.js/script/body注意事项:script 标签中间无需写代码否则会被忽略外部 JavaScript 会使代码更加有序更易于复用且没有了脚本的混合HTML 也会更加易读因此这是个好的习惯。内联 JavaScript代码写在标签内部语法bodybuttononclickalert(逗你玩~~~)点击我月薪过万/button/bodyJavaScript怎么写单行注释符号//作用//右边同一行的内容会被忽略VSCode 快捷键ctrl /script// 这种是单行注释的语法// 一次只能注释一行// 可以重复注释/script块注释多行注释符号/* */作用/*和*/包裹之间所有内容都会被忽略可以跨多行VSCode 快捷键shift alt ascript/* 这种的是多行注释的语法 *//* 更常见的多行注释是这种写法 在些可以任意换行 多少行都可以 *//scriptJS 结束符分号;作用英文分号;代表一条 JS 语句结束实际情况可写可不写JS 引擎能自动推断语句结束位置现状现在很多开发习惯直接省略分号代码风格约定统一写法要么每句都写要么全都不写遵循团队规范JavaScript 输入输出语法目标能写出常见 JavaScript 输入输出语法输出和输入也可理解为人和计算机的交互用户通过键盘、鼠标等向计算机输入信息计算机处理后再展示结果给用户这便是一次输入和输出的过程。输出语法语法 1document.write(要输出的内容)作用向 body 内输出内容注意如果输出的内容写的是标签也会被解析成网页元素语法 2alert(要输出的内容)作用页面弹出警告对话框语法 3console.log(控制台打印)作用控制台输出语法程序员调试使用输入语法语法prompt(请输入您的姓名)作用显示一个对话框对话框中包含一条文字信息用来提示用户输入文字展示JavaScript 代码执行顺序按 HTML 文档流顺序执行 JavaScript 代码alert()和prompt()它们会跳过页面渲染先被执行目前作为了解后期讲解详细执行过程字面量在计算机科学中字面量literal是在计算机中描述 事 / 物比如我们工资是1000 此时 1000 就是数字字面量黑马程序员字符串字面量还有接下来我们学的[]数组字面量{}对象字面量等等变量是什么变量是计算机存储数据的 “容器”变量白话变量就是一个装东西的盒子。通俗变量是计算机中用来存储数据的 “容器”它可以让计算机变得有记忆。注意变量不是数据本身它们仅仅是一个用于存储数值的容器。可以理解为是一个个用来装东西的纸箱子。变量的基本使用1. 声明变量要想使用变量首先需要创建变量也称为声明变量或者定义变量语法let变量名声明变量由两部分构成声明关键字、变量名标识let即关键字let: 允许、许可、让、要关键字是系统提供的专门用来声明定义变量的词语举例letage2. 变量赋值定义了一个变量后你就能够初始化它赋值。在变量名之后跟上一个然后是数值。// 1. 声明一个 age 变量letage// 2. age 变量赋值为 18age18// 3. 输出age变量alert(age)简单点也可以声明变量的时候直接完成赋值操作这种操作也称为变量初始化。script// 声明了一个age变量同时里面存放了 18 这个数据letage18/script3. 更新变量变量赋值后还可以通过简单地给它一个不同的值来更新它。letage18age19document.write(age)4. 声明多个变量语法多个变量中间用逗号隔开。letage18,unamepink说明虽然这种写法能让代码长度更短但并不推荐这样。为了更好的可读性建议一行一个变量。变量案例——交换变量的值需求有 2 个变量num1里面放的是 10num2里面放的是 20最后变为num1里面放的是 20num2里面放的是 10分析核心思路使用一个临时变量用来做中间存储步骤1. 声明一个临时变量 temp 2. 把 num1 的值赋值给 temp 3. 把 num2 的值赋值给 num1 4. 把 temp 的值给 num2letnum110letnum220lettemp// 都是把右边给左边tempnum1 num1num2 num2temp console.log(num1,num2)变量的本质内存计算机中存储数据的地方相当于一个空间变量本质是程序在内存中申请的一块用来存放数据的小空间变量命名规则与规范规则必须遵守不遵守报错法律层面规范建议不遵守不会报错但不符合业内通识道德层面1. 规则不能用关键字关键字有特殊含义的字符JavaScript 内置的一些英语词汇。例如let、var、if、for等只能用下划线、字母、数字、$组成且数字不能开头字母严格区分大小写如Age和age是不同的变量2. 规范起名要有意义遵守小驼峰命名法第一个单词首字母小写后面每个单词首字母大写。例userName变量拓展 - let 和 var 的区别let 和 var 区别:在较旧的 JavaScript使用关键字 var 来声明变量 而不是 let。var 现在开发中一般不再使用它只是我们可能再老版程序中看到它。let 为了解决 var 的一些问题。var 声明:可以先使用 在声明 (不合理)var 声明过的变量可以重复声明 (不合理)比如变量提升、全局变量、没有块级作用域等等数组的基本使用声明语法let数组名[数据1,数据2,…,数据n]e.g.letnames[小明,小刚,小红,小丽,小米]数组是按顺序保存所以每个数据都有自己的编号计算机中的编号从 0 开始所以小明的编号为 0小刚编号为 1以此类推在数组中数据的编号也叫索引或下标数组可以存储任意类型的数据取值语法数组名[下标]e.g.letnames[小明,小刚,小红,小丽,小米]names[0]// 小明names[1]// 小刚通过下标取数据一些术语元素数组中保存的每个数据都叫数组元素下标数组中数据的编号长度数组中数据的个数通过数组的length属性获得letnames[小明,小刚,小红,小丽,小米]console.log(names[0])// 小明console.log(names[1])// 小刚console.log(names.length)// 53. 常量的基本使用概念使用 const 声明的变量称为 “常量”。使用场景当某个变量永远不会改变的时候就可以使用 const 来声明而不是 let。命名规范和变量一致常量使用// 声明一个常量constG9.8//输出这个常量console.log(G)注意常量不允许重新赋值声明的时候必须赋值初始化小技巧不需要重新赋值的数据使用 const4. 数据类型计算机世界中的万事万物都是数据。计算机程序可以处理大量的数据为什么要给数据分类更加充分和高效的利用内存也更加方便程序员的使用数据比如JS 数据类型整体分为两大类基本数据类型引用数据类型数据类型 - 数字类型Number即我们数学中学习到的数字可以是整数、小数、正数、负数。letage18// 整数letprice88.99// 小数JavaScript 中的正数、负数、小数等 统称为 数字类型。数字可以有很多操作比如乘法*、除法/、加法、减法-等等所以经常和算术运算符一起。数学运算符也叫算术运算符主要包括加、减、乘、除、取余求模。求和-求差*求积/求商%取模取余数开发中经常作为某个数字是否被整除JavaScript 算术运算符执行的优先级顺序同时使用多个运算符编写程序时会按着某种顺序先后执行我们称为优先级。JavaScript 中 优先级越高越先被执行优先级相同时从左向右执行。乘、除、取余优先级相同加、减优先级相同乘、除、取余优先级大于加、减使用 () 可以提升优先级总结先乘除后加减有括号先算括号里面的案例 计算圆的面积需求对话框中输入圆的半径算出圆的面积并显示到页面scriptletrprompt(请输入圆的半径)letre3.14*r*r document.write(re)/scriptNaN 代表一个计算错误。它是一个不正确的或者一个未定义的数学操作所得到的结果console.log(老师-2)// NaNNaN 是粘性的。任何对 NaN 的操作都会返回 NaNconsole.log(NaN2)// NaN数据类型 - 字符串类型string通过单引号 、双引号 或反引号 () 包裹的数据都叫字符串单引号和双引号没有本质上的区别推荐使用单引号。letuname小明// 使用单引号letgender男// 使用双引号letgoods小米// 使用反引号lettel13681113456// 看上去是数字但是引号包裹了就是字符串letstr// 这种情况叫空字符串注意事项无论单引号或是双引号必须成对使用单引号 / 双引号可以互相嵌套但是不以自已嵌套自已口诀外双内单或者外单内双必要时可以使用转义符 \输出单引号或双引号字符串拼接场景 运算符 可以实现字符串的拼接。口诀数字相加字符相连document.write(我叫刘德华)// 我叫刘德华letuname刘德华letsong忘情水document.write(unamesong)// 刘德华忘情水模板字符串使用场景拼接字符串和变量在没有它之前要拼接变量比较麻烦document.write(大家好我叫name今年age岁)语法\(反引号)在英文输入模式下按键盘的 tab 键上方那个键1 左边那个键内容拼接变量时用${}包住变量document.write(大家好我叫${name}今年${age}岁)案例 页面输出用户信息案例需求页面弹出对话框输入名字和年龄页面显示大家好我叫 xxx今年 xx 岁了// 1. 弹出输入框获取名字letnameprompt(请输入你的名字)// 2. 弹出输入框获取年龄letageprompt(请输入你的年龄)// 3. 模板字符串输出document.write(大家好我叫${name}今年${age}岁了)数据类型 - 布尔类型boolean表示肯定或否定时在计算机中对应的是布尔类型数据。它有两个固定的值true和false表示肯定的数据用true真表示否定的数据用false假。// JavaScript 好玩不letisCooltrueconsole.log(isCool)数据类型 - 未定义类型undefined未定义是比较特殊的类型只有一个值 undefined。什么情况出现未定义类型只声明变量不赋值的情况下变量的默认值为 undefined一般很少【直接】为某个变量赋值为undefined。letage// 声明变量但是未赋值document.write(age)// 输出 undefined工作中的使用场景我们开发中经常声明一个变量等待传送过来的数据。如果我们不知道这个数据是否传递过来此时我们可以通过检测这个变量是不是 undefined就判断用户是否有数据传递过来。数据类型 - null空类型JavaScript 中的 null 仅仅是一个代表 “无”、“空” 或 “值未知” 的特殊值letobjnullconsole.log(obj)// nullnull 和 undefined 区别undefined 表示没有赋值null 表示赋值了但是内容为空//计算有区别console.log(undefined1)// NaNconsole.log(null1)// 1null 开发中的使用场景官方解释把 null 作为尚未创建的对象大白话将来有个变量里面存放的是一个对象但是对象还没创建好可以先给个 null通过typeof关键字检测数据类型typeof运算符可以返回被检测的数据类型。它支持两种语法形式作为运算符typeof x常用的写法函数形式typeof (x)换言之有括号和没有括号得到的结果是一样的所以我们直接使用运算符的写法。letage18letuname刘德华letflagfalseletbuy console.log(typeofage)// numberconsole.log(typeofuname)// stringconsole.log(typeofflag)// booleanconsole.log(typeofbuy)// undefined隐式转换某些运算符被执行时系统内部自动将数据类型进行转换这种转换称为隐式转换。规则号两边只要有一个是字符串都会把另外一个转成字符串除了以外的算术运算符比如-*/等都会把数据转成数字类型缺点转换类型不明确靠经验才能总结小技巧号作为正号解析可以转换成数字型任何数据和字符串相加结果都是字符串console.log(1111)// 22数字数字 → 加法console.log(1111)// 1111有字符串 → 拼接console.log(11-11)// 0console.log(11-11)// 0- 把字符串转成数字再减console.log(1*1)// 1console.log(1*1)// 1* 把字符串转成数字再乘console.log(typeof123)// stringconsole.log(typeof123)// number号当正号转成数字console.log(1111)// 22先把11转成数字11再11显式转换编写程序时过度依靠系统内部的隐式转换是不严禁的因为隐式转换规律并不清晰大多是靠经验总结的规律。为了避免因隐式转换带来的问题通常根逻辑需要对数据进行显示转换。概念自己写代码告诉系统该转成什么类型转换为数字型1.Number(数据)转成数字类型如果字符串内容里有非数字转换失败时结果为NaNNot a Number即不是一个数字NaN也是number类型的数据代表非数字2.parseInt(数据)只保留整数去掉小数部分不四舍五入3.parseFloat(数据)可以保留小数综合案例——渲染表格案例用户订单信息案例需求用户输入商品价格和商品数量以及收货地址可以自动打印订单信息分析需要输入 3 个数据所以需要 3 个变量来存储price、num、address需要计算总的价格total页面打印生成表格里面填充数据即可记得最好使用模板字符串!DOCTYPEhtmlhtmllangenheadmetacharsetUTF-8metanameviewportcontentwidthdevice-width, initial-scale1.0titleDocument/titlestyleh2{text-align:center;}table{border-collapse:collapse;height:80px;text-align:center;margin:0px auto;}th{padding:5px 30px;}table,th,td{border:1px solid #000;}/style/headbodyh2订单确认/h2scriptletpriceprompt(请输入商品价格)letnumprompt(请输入商品数量)letaddressprompt(请输入商品收货地址)lettotalprice*num document.write(table tr th商品名称/th th商品价格/th th商品数量/th th总价/th th收货地址/th /tr tr td小米手机青春PLUS/td td${price}元/td td${num}/td td${total}元/td td${address}/td /tr /table)/script/body/html常见问题constage console.log(age)// 错误 const 必须有赋值操作分析const声明的时候必须要赋值进行初始化console.log(age)//没有age变量分析提示age变量没有定义过很可能age变量没有声明和赋值或者我们输出变量名和声明的变量不一致引起的简单说写错变量名了letage18letage21console.log(age)// 错误 Let 不允许重复声明分析提示age已经声明很大概率是因为重复声明了一个变量。注意let或者const不允许多次声明同一个变量letnum1prompt(请输入第一个数值:)letnum2prompt(请输入第二个数值:)alert(两者相加的结果是${num1num2})分析因为prompt获取过来的是字符型所以会出现字符相加的问题prompt如果出现相加记得要转为数字型可以利用最简单letnum1prompt(请输入第一个数值:)letnum2prompt(请输入第二个数值:)alert(两者相加的结果是${num1num2})赋值运算符我们以赋值运算符来举例以前我们让一个变量加 1 如何做的letnum1numnum1console.log(num)// 结果是 2现在我们有一个简单的写法啦letnum1num1console.log(num)// 结果是 2一元运算符自增符号作用让变量的值 1自减符号--作用让变量的值 -1使用场景经常用于计数来使用。比如进行 10 次操作用它来计算进行了多少次了自增运算符的用法前置自增letnum1num// 让num的值加1变2每执行 1 次当前变量数值加 1其作用相当于num 1后置自增letnum1num// 让num的值加1变2每执行 1 次当前变量数值加 1其作用相当于num 1前置自增和后置自增单独使用没有区别前置自增和后置自增如果参与运算就有区别难点但是了解即可前置自增前置自增先自加再使用记忆口诀在前先加leti1console.log(i2)// 结果是 4// 注意i 是 2// i 先自加 1变成2之后再和后面的2相加后置自增后置自增先使用再自加记忆口诀在后后加leti1console.log(i2)// 结果是 3// 注意此时的 i 是 1// 先和2相加先运算输出完毕后i 再自加是2前置自增和后置自增独立使用时二者并没有差别一般开发中我们都是独立使用后面i后置自增会使用相对较多并且都是单独使用