7.271.引入方式JavaScript 程序不能独立运行它需要被嵌入 HTML 中然后浏览器才能执行 JavaScript 代码。通过script标签将 JavaScript 代码引入到 HTML 中有两种方式内部方式通过script标签包裹 JavaScript 代码外部形式一般将 JavaScript 代码写在独立的以 .js 结尾的文件中然后通过 script 标签的 src 属性引入// demo.js document.write(嗨吼哈嘿)!DOCTYPE html html langen head meta charsetUTF-8 titleJavaScript 基础 - 引入方式/title /head body !-- 外部形式通过 script 的 src 属性引入独立的 .js 文件 -- script srcdemo.js/script /body /html如果 script 标签使用 src 属性引入了某 .js 文件那么 标签内的代码会被忽略2.输出 、输入输出JavaScript 可以接收用户的输入然后再将输入的结果输出alert()、document.wirte()输入向prompt()输入任意内容会以弹窗形式出现在浏览器中一般提示用户输入一些内容。3.变量、常量const)变量是计算机中用来存储数据的“容器”通俗的理解变量就是使用【某个符号】来代表【某个具体的数值】数据4.声明声明关键字、变量名标识关键字是 JavaScript 中内置的一些英文词汇单词或缩写它们代表某些特定的含义如let的含义是声明变量的看到let后就可想到这行代码的意思是在声明变量如let age;let和var都是 JavaScript 中的声明变量的关键字推荐使用let声明变量5.赋值声明定义变量相当于创造了一个空的“容器”通过赋值向这个容器中添加数据。6.数据类型注通过typeof 关键字检测数据类型 number,string , boolean, undefined(未定义)7.模板字符串外面用(反引号)内部用${...变量名}8.制类型转换(1)转换为String类型:将其它数值转换为字符串有三种方式toString()、String()、 拼串(。(2)转换为Number类型:Number()、parseInt() 和parseFloat()。Number()可以用来转换任意类型的数据而后两者只能用于转换字符串。parseInt()只会将字符串转换为整数而parseFloat()可以将字符串转换为浮点数。3转换为Boolean类型Boolean()函数9.案例练习!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 titleDocument/title style h2 { text-align: center; } table { /* 合并相邻边框 */ border-collapse: collapse; height: 80px; margin: 0 auto; text-align: center; } th { padding: 5px 30px; } table, th, td { border: 1px solid #000; } /style /head body h2订单确认/h2 script // 用户输入price num address计算总额 页面打印 let price prompt(请输入商品价格) let num prompt(请输入商品数量) let address prompt(请输入收货地址) let total price*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 /html7.281.运算符算术运算符作用求和-求差*求积/求商%取模取余数开发中经常用于作为某个数字是否被整除注意在计算失败时显示的结果是 NaN not a number赋值运算符作用加法赋值-减法赋值*乘法赋值/除法赋值%取余赋值自增自减运算作用说明自增变量自身的值加1例如: x–自减变量自身的值减1例如: x–比较运算符作用左边是否大于右边左边是否小于右边左边是否大于或等于右边左边是否小于或等于右边左右两边是否类型和值都相等重点左右两边值是否相等!左右值不相等!左右两边是否不全等逻辑运算符名称日常读法特点口诀逻辑与并且符号两边有一个假的结果为假一假则假||逻辑或或者符号两边有一个真的结果为真一真则真!逻辑非取反true变false false变true真变假假变真2.语句分支语句包含if分支语句三元运算符...?...:...3.switch语句switch(){case:......breakdefault:......}循环语句1.while循环 2.for 循环3.综合案例乘法表案例style span { display: inline-block; padding: 5px 10px; border:1px solid pink; margin: 2px; border-radius: 5px; } /style body script let i 1 let j 1 for(i1;i10;i){ for(j1;ji;j){ document.write(span${i}×${j}${i*j}/span) } document.write(br) } /script4.数组操作数组数组做为对象数据类型不但有length属性可以使用还提供了许多方法push 动态向数组的尾部添加一个单元unshift 动态向数组头部添加一个单元pop 删除最后一个单元shift 删除第一个单元splice 动态删除任意单元下面说一下splice函数处理数组的方法很多javascript splice()算是最强大的了它可以用于插入、删除或替换数组的元素。1.删除-用于删除元素两个参数第一个参数要删除第一项的位置第二个参数要删除的项数2.插入-向数组指定位置插入任意项元素。三个参数第一个参数其实位置第二个参数0第三个参数插入的项3.替换-向数组指定位置插入任意项元素同时删除任意数量的项三个参数。第一个参数起始位置第二个参数删除的项数第三个参数插入任意数量的项7.291、函数声明完整函数包括关键字function、函数名、形式参数、函数体、返回值调用使用()调用函数。函数可以分为具名函数和匿名函数匿名函数没有名字的函数,无法直接使用。函数表达式 // 声明 let fn function() { console.log(函数表达式) } // 调用 fn()2. 对象属性用于描述对象特征的数据信息。多个属性之间使用英文逗号,分隔。访问可以通过点号.或方括号[]来获取对象中属性对应的值。覆盖规则在同一个对象中如果出现同名的属性或方法后面的会覆盖前面的。ansparent方法Math.random生成 0 到 1 间的随机数// 0 ~ 1 之间的随机数, 包含 0 不包含 1 Math.random()Math.ceil数字向上取整// 舍弃小数部分整数部分加1 Math.ceil(3.4)Math.floor数字向下取整// 舍弃小数部分整数部分不变 Math.floor(4.68)Math.round四舍五入取整// 取整四舍五入原则 Math.round(5.46539) Math.round(4.849)Math.max在一组数中找出最大的// 找出最大值 Math.max(10, 21, 7, 24, 13)Math.min在一组数中找出最小的// 找出最小值 Math.min(24, 18, 6, 19, 21)Math.pow幂方法// 求某个数的多少次方 Math.pow(4, 2) // 求 4 的 2 次方 Math.pow(2, 3) // 求 2 的 3 次方Math.sqrt平方根// 求某数的平方根 Math.sqrt(16)8.11、DOM文档对象模型操作网页内容DOM 树将 HTML 文档以树状结构直观的表现出来我们称之为文档树或 DOM 树文档树直观的体现了标签与标签之间的关系。DOM 节点节点是文档树的组成部分每一个节点都是一个 DOM 对象主要分为元素节点、属性节点、文本节点等。2、获取DOM对象根据CSS选择器来获取DOM元素querySelector 满足条件的第一个元素querySelectorAll 满足条件的元素集合 返回伪数组其他方式getElementByIdgetElementsByTagNamedocument.getElementById 专门获取元素类型节点根据标签的id属性查找任意 DOM 对象都包含 nodeType 属性用来检检测节点类型3.操作元素内容1通过修改 DOM 的文本内容动态改变网页的内容。innerText将文本内容添加/更新到任意标签位置文本中包含的标签不会被解析。innerHTML将文本内容添加/更新到任意标签位置文本中包含的标签会被解析。总结如果文本内容中包含html标签时推荐使用innerHTML否则建议使用innerText属性。2实现对属性的修改常用属性修改直接通过属性名修改控制样式属性1 修改行内样式style属性实现对样式的动态修改对象.style.样式属性 值任何标签都有style属性通过style属性可以动态更改网页标签的样式如要遇到css属性中包含字符-时要将-去掉并将其后面的字母改成大写如background-color要写成box.style.backgroundColor2操作类名(className) 操作CSS修改样式比较多的情况3通过 classList 操作类控制CSS为了解决className 容易覆盖以前的类名我们可以通过classList方式追加add() 删除remove() 切换类toggle()style .box { width: 200px; height: 200px; color: #333; } .active { color: red; background-color: pink; } /style /head body div classbox123/div script // 获取元素 const box document.querySelector(.box) //修改 box.classList.add(active) /script /body4.随机抽奖案例title年会抽奖/title style .wrapper { width: 840px; height: 420px; background: url(./images/bg01.jpg) no-repeat center / cover; padding: 100px 250px; box-sizing: border-box; } /style /head body div classwrapper strong传智教育年会抽奖/strong h1一等奖span idone???/span/h1 h3二等奖span idtwo???/span/h3 h5三等奖span idthree???/span/h5 /div script const person [a, b, c, d] const random Math.floor(Math.random() * person.length) // console.log(person[random]) const one document.querySelector(#one) one.innerHTML person[random] person.splice(random, 1) const random2 Math.floor(Math.random() * person.length) const two document.querySelector(#two) two.innerHTML person[random2] person.splice(random2, 1) const random3 Math.floor(Math.random() * person.length) const three document.querySelector(#three) three.innerHTML person[random3] person.splice(random3, 1) s /script /body