定义
一种运行在客户端(浏览器)的编程语言,实现人机交互效果
作用
网页特效(监听用户的一些行为让网页做出对应的反馈)
组成
ECMAScript:基础语法,如变量,循环,对象等
BOM:操作浏览器,比如页面弹窗,检测窗口宽度,储存数据到浏览器等
书写位置
内部 JavaScript
原因在于浏览器会按照代码在文件中的顺序加载HTML,如果先加载的javascript期望修改其下方的HTML,那么它可能由于HTML尚未被加载而失败
HTML <!DOCTYPE html > <html lang ="en"> <head> <meta charset ="UTF-8"> <meta name ="viewport" content ="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> // 页面弹出警示框 alert (' 你好,js') </script> </body> </html>
外部 JavaScript
新建一个以.js文件结尾的文件
内联 JavaSript
代码写在标签内部
HTML <body> <button οnclick="alert(' 逗你玩--')">点击领奖</button> </body>
输出语法
语法 1 : document.write
作用:向body内输出内容
注意:如果输出的内容写的是标签,也会被解析成网页元素
HTML <!DOCTYPE html > <html lang ="en"> <head> <meta charset ="UTF-8"> <meta http-equiv ="X-UA-Compatible" content ="IE=edge"> <meta name ="viewport" content ="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> document .write ('hey') // 输出hello world document .write ("<h1>hello world</h1>") </script> </body> </html>
语法 2 : alret
页面弹出警告对话框
语法 3 : console.log
控制台输出语法,程序员调试使用
输入语法
Prompt
作用:显示一个对话框,对话框中包含一条文字信息,用来提示用户输入文字
注:alert和prompt会跳过页面渲染先被执行
变量
定义
变量是计算机中用来存储数据的容器,它可以让计算机变得有记忆
注意:变量不是数据本身,仅仅是一个用于存储数据的容器
基本使用
声明
声明变量由两部分构成:声明关键字,变量名
变量声明要有意义
小驼峰命名法
第一个单词首字母小写,第二个单词首字母大写,userName
赋值
等号两边要有空格
数组
Array
JavaScript let arr = [ 数据1,数据2,数据3]
常量
Const
常量不允许重新赋值
运算,判断与循环
注:运算,判断与循环的语法与C相同
并且支持自增和自减
JavaScript <!DOCTYPE html > <html lang ="en"> <head> <meta charset ="UTF-8"> <meta name ="viewport" content ="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> let a = 1, b = 1 for (let i = 1 ; i< 10; i++ ) { for (let j=1 ;j<= i ;j++ ) { document .write (j+ '*'+ i+ '='+ i* j+ ' ') } document .write ('<br>') } </script> </body> </html>
输出结果
数组
数组的组成
数组做为数据的集合,它的单元值可以是任意数据类型
CSS <script> // 6. 数组单值类型可以是任意数据类型 // a) 数组单元值的类型为字符类型 let list = ['HTML', 'CSS', 'JavaScript'] // b) 数组单元值的类型为数值类型 let scores = [78, 84, 70, 62, 75] // c) 混合多种类型 let mixin = [true, 1, false, 'hello'] </script>
数组长度属性
数组长度属性
重申一次,数组在 JavaScript 中并不是新的数据类型,它属于对象类型。
<script> // 定义一个数组 let arr = ['html', 'css', 'javascript'] // 数组对应着一个 length 属性,它的含义是获取数组的长度 console.log(arr.length) // 3 </script>
操作数组
数组做为对象数据类型,不但有 length 属性可以使用,还提供了许多方法:
push 动态向数组的尾部添加一个单元
unshit 动态向数组头部添加一个单元
pop 删除最后一个单元
shift 删除第一个单元
splice 动态删除任意单元
使用以上4个方法时,都是直接在原数组上进行操作,即成功调任何一个方法,原数组都跟着发生相应的改变 。并且在添加或删除单元时 length 并不会发生错乱。
JavaScript <script> // 定义一个数组 let arr = ['html', 'css', 'javascript'] // 1. push 动态向数组的尾部添加一个单元 arr.push('Nodejs') console.log(arr) arr.push('Vue') // 2. unshit 动态向数组头部添加一个单元 arr.unshift('VS Code') console.log(arr) // 3. splice 动态删除任意单元 arr.splice(2, 1) // 从索引值为2的位置开始删除1个单元 console.log(arr) // 4. pop 删除最后一个单元 arr.pop() console.log(arr) // 5. shift 删除第一个单元 arr.shift() console.log(arr) </script>