独闯JavaScript
了解JavaScript
为什么学习JavaScript
JavaScript 是 web 开发者必学的三种语言之一:
HTML 定义网页的内容
CSS 规定网页的布局
JavaScript 对网页行为进行编程
我们学习 JavaScript,以及 JavaScript 如何与 HTML 和 CSS 协同工作的知识。
JavaScript简介
JavaScript 能够改变 HTML 内容
JavaScript 能够改变 HTML 属性
JavaScript 能够改变 HTML 样式 (CSS)
JavaScript 能够隐藏和显示 HTML 元素
JavaScript / ECMAScript
ECMA是“European Computer Manufacturers Association”的缩写,中文称欧洲计算机制造联合会。这个组织的目标是评估,开发和认可电信和计算机标准。
ECMA是标准, JavaScript是实现
类似HTML5是标准, IE10、Chrome、FF都是实现
目的是让所有前端脚本都实现ECMA
目前只有JavaScript实现ECMA标准, ECMAScript ≈ JS
ECMAScript简称ECMA或ES(ES6)
目前版本
高级浏览器支持ES6
低级浏览器主要支持ES3.1
JavaScript使用方式
在 HTML 中,JavaScript 代码必须位于 标签之间。
<script>//书写javascript代码
</script>
在HTMl标签中使用
<a href="javascript:alert('this is a test')">去百度</a>
<p οnclick="alert(‘诶呦,我被点了一下’)">加个事件</p>
独立外部脚本使用
<script src="./demo.js"></script>
案例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title><style></style><script src="two.js"></script><link rel="stylesheet" href=""><script>alert('1111111111111')</script></head><body><!--第一种方式--><script>window.alert('弹弹弹,弹走鱼尾纹~~~')</script><!--第二种方式--><a href="https://www.baidu.com">我想问度娘</a><!--一般只写一句javascript代码时会使用--><a href="javascript:alert('我是度娘')">我想问度娘1</a><h2 οnclick="alert('欸有,我被点击了')">使用事件的方式运行js</h2></body>
</html>
<script>alert('2222222222222222')
</script>
<!--第三种方式-->
<script src="one.js"></script>
one.js文件
alert('我是one.js里面的内容')
two.js文件
alert('我是two.js文件内容')
JavaScript输出
JavaScript 不提供任何内建的打印或显示函数
使用 window.alert() 写入警告框
alert('this is a test')
window.alert('this is a test')
使用 document.write() 写入 HTML 输出
document.write('写入内容到浏览器')
document.write(1 + 1)
使用 innerHTML 写入 HTML 元素
<div id="box"></div>
<script>document.getElementById('#box').innerHTML = '<b>跟我学前端</b>'
</script>
使用 console.log() 写入浏览器控制台
console.log('this is a test')
console.log(1 + 1)
案例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><div id="dv">#########3</div><p οnclick="document.write('111111')">this is a p</p><script>// 输出方式一alert('这是要输出的数据')window.alert('这是要输出的数据的第二条')alert(1 + 190)// 输出方式二document.write('我是第二种输出数据的方式')document.write(100 + 55)// 输出数据方式三document.getElementById('dv').innerHTML = '<b>我是第三种输出数据的方式</b>'document.getElementById('dv').innerHTML = '我不使用标签'// 输出数据方式四 输出到控制台console.log('输出到控制台')console.log(10 * 4)</script></body>
</html>
JavaScript语句
JavaScript 语句是由 web 浏览器“执行”的“指令”
值、运算符、表达式、关键词和注释等构成JavaScript语句
英文状态下的分号(;)分隔 JavaScript 语句
JavaScript 空白字符
JavaScript 行长度和折行
JavaScript 代码块
JavaScript 关键词
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script>var a = 10//这是一个注释var b = 20var c = a + bconsole.log(c)//; 命令执行符 指令分割符 或者 回车var d = 100;var e = 101;console.log(d + e)//换行可以是一个语句的结束,分号也可以是一个语句的介绍var a = 5; var b = 10;console.log(a + b)//结构定义语句不能加分号,程序执行语句一定要加分号或者换行(回车)if(true){if(true){}}//行的长度和折行 最多写80个字符var a = 'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa' +'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa' +'aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa' +'aaaaaaaaaaaaaaaaaaaaaaa'var b = 'aaa' + 'bbbb'console.log(b)//代码块function demo(a, b, c) {}//关键词 不要使用JS保留的关键词// var var = 'a'// Javascript 字面量console.log(19.2 + 5)//单引号中不能包含单引号 双引号中不能包含双引号var name = "hello\"World"var name1 = 'hello\'World'
</script>
</body>
</html>
JavaScript注释
注释被 JavaScript 忽略
JavaScript 注释用于解释 JavaScript 代码,增强其可读性。
JavaScript 注释也可以用于在测试替代代码时阻止执行。
单行注释 //
多行注释以 / 开头,以 / 结尾
注:多行注释不要嵌套多行注释
案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script>//写的内容不会被浏览器执行//写的是单行注释//var a = 10//console.log(a)/*这是多行注释1.写过的代码不要急于删除2.可以用于调试程序3.注释后程序结构一定要完整4.编写文档1. 写在程序的上面2. 要么写在程序的右边 不要写在下面*///100行代码if(true){// if(true){// if(true){//// }//}}//声明一个变量namevar name = 'zhangsan'var name1 = 'lisi'; //这是声明一个变量name/*方法:demo() 运算两个数的和参数a:第一个运算元参数b:第二个运算元*/function demo(a,b){return a + b}
</script>
</body>
</html>
JavaScript变量及常量
什么是变量
可以改变的量
JavaScript 变量是存储数据值的容器
变量命名
JS中声明变量必须使用var或者let进行声明
变量名不允许使用中文,必须使用英文或者拼音
变量名中可以使用数字,但是数字不能开头
变量名中不允许使用特殊字符,下划线(_)除外
变量名要有意义
变量名严格区分大小写
变量名推荐使用小写
如果变量名是多个单词建议使用驼峰命名法 (number one)=>(NumberOne)
变量赋值
= (等号) 将等号右边的值赋值给等号左边的变量
数据类型
变量里面能装的就是JS所支持的数据类型
变量声明
使用var 或者 let
案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script>/********js中的变量********///变量是一个容器 或者 你的一只手//声明变量var a//输出到控制台 未赋值的变量 默认时undefinedconsole.log(a)//赋值 = 将等号右边的内容赋值给等号左边的变量a = 10//输出到控制台console.log(a)//声明变量时 进行赋值var b = 20console.log(b)//尝试改变变量的值b = 50console.log(b)b = '你好js'console.log(b)//变量的明明规则//1.变量名中可以有数字,但是不允许以数字开头// var 1a = 10// console.log(1a)//2.变量中不可以使用特殊符号,下划线(_)除外var a_b = 10console.log(a_b)//3.变量名尽量使用英文或者拼音,(我)不允许使用汉字var 你好 = '我是汉字变量名'console.log(你好)//4. 变量名要有意义//5.严格区分大小写//会报错 hello is not defined (hello是未被定义的var Hello = '你好'console.log(hello)//6. 声明变量 需要使用var 或者 后面学习的let 关键字来进行声明
</script>
</body>
</html>
ES6声明变量
ES6 引入了两个重要的 JavaScript 新关键词:let 和 const。
JavaScript 块作用域
重新声明变量的问题
案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script>//使用var关键字可以重复声明变量var a = 10var a = 20console.log(a)//使用var声明的变量属于全局作用域if(true){var b = 10}console.log(b)//es6中提供的新关键字let//不可以重复声明let x = 10console.log(x)//报错:X已经被定义// let x = 11// console.log(x)//作用域的问题:let只能在自己的作用域中使用if(true){let y = 20console.log(y)}//会报错,因为let声明的变量只在当前作用域下有效console.log(y)
</script>
</body>
</html>
什么是常量
通常不会改变的量
变量就好比在黑板上写字,而常量就相当于在墓碑上刻字,一次刻印终身受用
ES6声明常量
通过 const 定义的常量与 let 变量类似,但不能重新赋值
在声明时必须赋值
常量对象或数组内容可以更改
常量名推荐大写,用于与变量名的区分,命名规则跟变量一样
案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script>//声明常量// const PI = 3.1415926// console.log(PI)//不能重新赋值// PI = 3.88// console.log(PI)//不能重新声明// const PI = 4.88// console.log(PI)//常量声明必须有值// const PI// PI = 3.99//声明一个常量数组 就是一组数据const arr = ['小明','小红','小白','小黑']//无法更改// arr = [1,2,3,4]console.log(arr)//查看某一个值console.log(arr[2]);//单独更改内容arr[2] = '最帅的人是我'console.log(arr)
</script>
</body>
</html>
JavaScript数据类型
JavaScript 中有五种可包含值的数据类型:
字符串(string)
声明字符串使用单引号或者双引号均可
案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script>/*******1.字符串类型*******///声明字符串let str = '你是我的优乐美'//输出内容console.log(str)//查看类型 typeofconsole.log(typeof(str))let str1 = "我是双引号声明"console.log(str1)console.log(typeof str1)
</script>
</body>
</html>
数值(number)
正数(包含小数)、负数(包含小数)、0
案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script>/********2.数值类型声明************///1.声明正整数let num1 = 10console.log(num1)console.log(typeof num1)//2.声明负整数let num2 = -10console.log(num2)console.log(typeof num2)//3.声明0let num3 = 0console.log(num3)console.log(typeof num3)//4.声明小数let num4 = 3.14console.log(num4)console.log(typeof num4)let num5 = -3.14console.log(num5)console.log(typeof num5)// 二进制声明 0101let b = 0b1010console.log(b)console.log(typeof b)// 八进制声明 01234567let ba = 010console.log(ba)console.log(typeof ba)// 十六进制声明 0123456789abcdeflet sl = 0xffconsole.log(sl)console.log(typeof sl)//使用科学计数法声明浮点数(小数)let num6 = 3.14e2console.log(num6)console.log(typeof num6)
</script>
</body>
</html>
布尔(boolean)
布尔类型只有两个值,一个是true(真),一个是false(假)
案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script>/********3.声明布尔类型**********/let bool = trueconsole.log(bool)console.log(typeof bool)//声明布尔值的值 不需要使用引号,使用引号就是字符串类型了let bool1 = 'true'console.log(bool1)console.log(typeof bool1)let bool2 = falseconsole.log(bool2)console.log(typeof bool2)</script>
</body>
</html>
对象(object)
案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script>/****4.声明对象*********/let obj = {'name':'zhangsan','sex':'男','age':30}console.log(obj)console.log(typeof obj)
</script>
</body>
</html>
函数(function)
案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script>/*******5.函数类型*******///声明一个函数 将函数赋值给变量let func = function () {}//打印出函数的声明结构console.log(func)//查看类型console.log(typeof func)
</script>
</body>
</html>
同时有两种不能包含值的数据类型:
null
undefined
案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script>/********6.不包含数据的值**********///nulllet nu = nullconsole.log(nu)console.log(typeof nu)var nu1 = nullconsole.log(null)console.log(typeof nu1)let nu2 = ''console.log(typeof nu2)let unde = undefinedconsole.log(unde)console.log(typeof unde)//未声明的变量console.log(typeof hhxi)//声明变量未赋值let unde1console.log(typeof unde1)
</script>
</body>
</html>
JavaScript类型转换
如何查看数据类型
typeof检测数据类型
typeof 数据变量
typeof(数据变量)
通过使用 JavaScript 函数 (强制类型转换 | 显性类型转换)
Number()
parseInt()
parseFloat()
变量.toString() 或 String()
Boolean()
案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script>/********1.转数值类型 *******//*转换后的数据变量 = Number(数据变量)*/let str = '100'str = '-100'str = '3.1415'str = '-3.1415'// NaN not a numberstr = '10a'// 科学计数法的方式声明浮点数 3e2 3*10的2次方str = '3e2'//NaNstr = '3a2'// str = '-10a'str = truestr = falsestr = ''//注意 在使用Number转换时,字符串中如果出现非数值内容 转换后将得到NaN 不是一个数console.log('原类型:'+typeof str)//进行Numberlet num = Number(str)console.log(num)console.log('转换后:'+typeof num)/********2.parseInt Int************/let str1 = '10'str1 = '-10'str1 = '100a'str1 = 'abc100'str1 = '555abc'str1 = '-5555abc'str1 = '+3333abnc'str1 = '10.1234abc'str1 = truestr1 = false//在使用parseInt转换整型时,如果是纯数字字符串 直接改变类型//如果字符串以数字开头,数字后面跟非数字内容,那么转换时将提取开头的数值部分//在字符串开头只允许出现正负符号(+ - ) 转换后代表正数或者负数let num1 = parseInt(str1)console.log('原类型:'+typeof str1)console.log(num1)console.log('转换后:'+typeof num1)/*********3.parseFloat ***********/let str2 = '10'str2 = '100a'str2 = '100-a'str2 = '10.1234abc'str2 = truestr2 = falselet num2 = parseFloat(str2)console.log('原类型:'+typeof str2)console.log(num2)console.log('转换后:'+typeof num2)/*******4. 转字符串 变量.toString() 或 String()*********/let num3 = 10//方式1let str3 = num3.toString()//方式2let str4 = String(num3)num3 = truenum3 = 10.333str3 = num3.toString()console.log('原类型:'+typeof num3)console.log(str3)console.log('转换后:'+typeof str3)/*******5.转布尔值 Boolean()*******/let num4 = 1num4 = 0num4 = ''num4 = '0'num4 = 0.0let bool = Boolean(num4)console.log('原类型:'+typeof num4)console.log(bool)console.log('转换后:'+typeof bool)
</script>
</body>
</html>
通过 JavaScript 本身自动转换 (自动数据类型转换 | 隐性类型转换)
在运算或者判断的过程中会发生自动数据类型转换
案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script>let a = 10let b = 'a'//会发生自动数据类型转换let result = a + bconsole.log(result)console.log(typeof result)//+ 在字符串中是相连的作用result = 1 + '2' + 3 + '4'console.log(result); //? 1234console.log(typeof result); //? stringresult = 1 + 2 + '3' + '4'console.log(result); //? 334console.log(typeof result); //string//判断if(Infinity){console.log('aaa')}
</script>
</body>
</html>
不同值转换结果:
1678961167768
严格模式
“use strict” 指令定义 JavaScript 代码应该以“严格模式”执行。
为什么使用严格模式
严格模式中不允许的事项
对未来的保障
案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script>/*1.严格模式放到script标签顶部 代表真个区域是严格模式的,放到代码块中,代表代码块是严格模式2.在严格模式下 变量(对象,数组) 不声明就使用,不允许3.删除对象或者变量是不行的,delete 不让用4.严格模式下不能使用8进制声明5.有一些转译字符不能使用6.未将来保留一些关键字不能用*/"use strict"x = 100console.log(x)var x;var yy = 100console.log(y)var a = 100console.log(a)//定义函数function demo(){// "use strict"// b = 12345// console.log(b)}//调用函数demo()//不能在严格模式下使用// delete a//声明8进制// var c = 077// var c = 0xff// console.log(c)// var demo = '\0mo\nk\ey\r\taaa'// var demo = '\010'// console.log(demo)var public = 'aa'console.log(public)</script>
</body>
</html>
JavaScript提升
JavaScript 声明会被提升
用 let 或 const 声明的变量和常量不会被提升
JavaScript 初始化不会被提升
严格模式中的 JavaScript 不允许在未被声明的情况下使用变量。
案例
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script>"use strict"x = 100console.log(x)// let x// const x = 'a'// var x//var 声明的变量可以提升,let const 不可以提升let aa = 10console.log(a)var b = 10</script>
</body>
</html>