定义
一种运行在客户端（浏览器）的编程语言，实现人机交互效果
作用
- 网页特效（监听用户的一些行为让网页做出对应的反馈）
组成
- 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> |
