简介
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。
JavaScript能做的
1.常见的网页效果[表单验证,轮播图。。。
2.与H5配合实现游戏[水果忍者]
3.实现应用级别的程序[http://naotu.baidu.com]
4.实现图表统计效果[https://echarts.apache.org/examples/zh/]
5.js可以实现人工智能[面部识别]
6.后端开发,app开发,桌面端开发……
书写位置
- 和
css
一样,我们的js也可以有多种方式书写在页面上让其生效 js
也有多种方式书写,分为行内式,内嵌式,外链式(与css相同)- 外部脚本不能包含
<script>
标签。
行内式(不推荐)
<body>
<button onclick="alert('hello')">点我</button>
<a href="JavaScript:alert('hello')">点我</a>
</body>
内嵌式(<body>
或<head>
中)
<script>
document.write("123456")
</script>
外链式(推荐)
<script src="./xxxxxx.js"></script>
在引入外链式后,<script src="./xxxxxx.js"></script>
中写的代码失效 一个页面可以引入多个JavaScript文件
用法
- 在 HTML 页面中插入 JavaScript,使用
<script>
标签。 - 放在在
<head>
或者<body>
中 - 尽量把函数放入
<head>
部分中,或者放在页面底部。这样就可以把它们安置到同一处位置,不会干扰页面的内容。
输出
JavaScript 没有任何打印或者输出的函数。
而是以不同方式“显示”数据:
- 使用
window.alert()
写入警告框 - 使用
document.write()
写入 HTML 输出 - 使用
innerHTML
写入 HTML 元素 - 使用
console.log()
写入浏览器控制台
使用window.alert()
写入警告框
<script>
window.alert("我的第一个JavaScript")
</script>
使用document.write()
写入 HTML 输出
<script>
document.write("Hello World")
</script>
使用console.log()
写入浏览器控制台
F12>Console 中显示
<script>
a = 1;
b = 2;
c = a + b;
console.log(c);
</script>
prompt输入框
<script>
let uname = prompt("请输入你的名字");
document.write(uname)
</script>
注释与规范
注释
快捷键:Ctrl+/
// console.log(c);
快捷键:Shift+Alt+A
/*
a = 1;
b = 2;
c = a + b;
console.log(c);
*/
规范
每句后面分号可有可无,写在同一行必须加分号,不然报错
a = 1;
b = 2;
c = a + b;
console.log(c);
变量(重点)
- 变量指的是在程序中保存数据的一个容器
- 变量是计算机内存中存储数据的标识符,根据变量名称可以获取到内存中存储的数据
- 也就是说,我们向内存中存储了一个数据,然后要给这个数据起一个名字,为了是我们以后再次找到他
- 语法:
var/let 变量名 =值
- let不允许多次声明,var是全局声明
定义变量及赋值
// 定义一个变量
var num;
// 给一个变量赋值
num = 100;
// 定义一个变量的同时给其赋值
var num2 = 200;
// 定义三个变量的同时给其赋值
var x = 1, y = 2, z = 3
注意:
1.一个变量名只能存储一个值
2.当再次给一个变量赋值的时候,前面一次的值就没有了
3.变量名称区分大小写 (JS
严格区分大小写)
变量的命名规则和命名规范
- 规则:必须遵守的,不遵守就是错
1.一个变量名称可以由数字、字母、英文下划线 (_)、美元符号($)
2.严格区分大小写
3.不能由数字开头
4.不能是保留字或者关键字
5.不要出现空格
- 规范:建议遵守的 (开发者默认),不遵守不会报错
1.变量名尽量有意义 (语义化)
2.遵循驼峰命名规则,由多个单词
组成的时候,从第二个单词开始首字母大写
3.不要使用中文
变量扩展-数组
数组(Array):一组数据存储在单个变量名下
//定义
let 数组名 = [数据1,数据2,···,数据n];
let name = ['小明','小红','小李'];
// arr[索引号]; 从零开始
let arr = ['张三','李四','王五'];
document.write(arr[0]); //输出张三
let arr = ['周一','周二','周三','周四','周五','周六','周日']; //元素
console.log(arr[6]); //下标
console.log(arr.length); //数组长度
常量
使用const
声明的变量
命名规范与变量一致
常量不允许重新赋值,声明的时候必须赋值(初始化)
不需要重复赋值的数据使用const
const a = 10;
console.log(a);
数据类型
值类型(基本类型):字符串(String)、数字(Number)、布尔(Boolean)、空(Null)、未定义(Undefined)、Symbol。
(其中未定义(Undefined)就是声明了但是未赋值)不知道未来用作存什么值
空(Null)知道未来存什么类型的值
极大或极小的数字可以通过科学(指数)计数法来书写:
var y=123e5; // 12300000
var z=123e-5; // 0.00123
完成进制转换:
var x = 0x99 //153 16*9+9
var x = 0xff //255 16*15+15
var y = 0b11 //3 1*2+1
算术运算符
+ //求和
- //求差
* //求积
/ //求商
% //取余
运算符优先级
//先乘除后加减,有括号先算括号里面的
console.log(1 + 2 * 3)
console.log(10 - 8 / 2)
console.log(2 % 5 + 4 * 2)
判断数据类型
var x1
console.log(typeof x1) //undefined
var x2 = null
console.log(typeof x2) //object
var x3 = 123
console.log(typeof x3) //number
var x4 = "你好"
console.log(typeof x4) //string
数据类型转换
转数值
两种方法,Number()比较严格,parseInt()比较松散
Number(变量)
如果string类型中有非数值,在转换后会显示NaN,意为”Not a Number”
转Ture
和False
则会变成1和0
转Null
会变成0
转Undefined
会变成NaN
var a = "100"
var b = Number(a)
console.log(a,b) //100 100
console.log(typeof a,typeof b) //string number
parseInt(变量)
意思为”解析为整型”
var a = "100a" //如果是小数,点后面的会舍掉
var b = parseInt(a)
console.log(a,b) //100a 100
parseFloat(变量)
意思为”解析为浮点型”
var a = "100.12a"
var b = parseFloat(a)
console.log(a,b) //100.12a 100.12
非加号
var a = "100"
var b = a - 0 //有三种:-0 /1 *1
console.log(b) //100
转字符串
模板字符串:
//使用反引号``,类似python中的f""
let age = 18;
document.write(`我今年${age}岁了`);
document.write('我今年${age}岁了');
String(变量)
所有类型都能转换
var a = 100
var b = String(a)
console.log(b,typeof b) //100 string
.toString()
Null
和Undefined
不能转换
var a = 100
var b = a.toString()
console.log(b,typeof b) //100 string
加号
字符串拼接: 只要+
任意一边是字符串,就会进行字符串拼接
加法运算:只有两边都是数字的时候,才会进行数学运算
var a = 100
var b = a + ""
console.log(b, typeof b) //100 string
console.log(a, b) //100 '100'
转布尔
Boolean(变量)
在JavaScript中,只有""
、0
、Null
、undefined
、NaN
,这些是False
其余都是True
var a = 100
var b = Boolean(a)
console.log(b, typeof b) //true 'boolean'
console.log(a, b) //100 true
var a1
var b1=Boolean(a1)
console.log(b1, typeof b1) //false 'boolean'
console.log(a1, b1) //undefined false
隐式转换
隐式转换:系统内部自动将数据类型进行转换
//+号两边只要有一个是字符串,都i会把另外一个给转成字符串
console.log('Hello' + 1)
结果:Hello1
//除了+以外的算数运算符,比如- * / 等都会把数据转成数字类型
console.log('Hello' - 1) //结果:NaN
console.log('1' - 1) //结果:0,进行了隐式转换
console.log(+ '123') //结果:123,转换为了数字型
显式转换
显式转换:自己写代码告诉系统该转成什么类型
let str = '123'
console.log(Number(str))
//123
let num = +prompt('请输入一个数字')
console.log(num)
//123
console.log(parseInt('12px')) //12
console.log(parseInt('12.34px')) //12
console.log(parseInt('12.94px')) //12
console.log(parseFloat('12px')) //12
console.log(parseFloat('12.34px')) //12.34
console.log(parseFloat('12.94px')) //12.94
运算符
赋值运算符
对变量进行赋值的运算符
//= 将等号右边的值赋予给左边,要求左边必须是一个容器
a = 1
//+=
let num = 1
num = num + 1
num1 += 1 //赋值运算符
console.log(num) //结果:2
一元运算符
能够使一元运算符做自增运算
使用场景:计数,进行10次操作,计算进行了多少次
//二元运算符
let num = 10 + 20
//一元运算符 自增 ++
"""
自增相当于num = num + 1
1.前置自增
let num = 1
++num
document.write(num)
2.后置自增
let num = 1
num++
document.write(num)
"""
前置自增和后置自增如果参与运算就有区别
let i = 1
console.log(++i + 2) //结果:4
let i = 1
console.log(i++ + 2) //结果:3
比较运算符
比较两个数据的大小、是否相等
> //大于
< //小于
>= //大于等于
<= //小于等于
== //值相等
=== //类型和值相等
!== //不全等
-------------------------------------------
其中有隐式转换
2 == '2' //True
-------------------------------------------
2 === '2' //False
Nan === Nan //False
-------------------------------------------
字符串比较ascii码,从左往右依次比较
涉及'Nan'都是False
不要比较小数,有精度问题
逻辑运算符
符号 | 名称 | 含义 | 特点 | 口诀 |
---|---|---|---|---|
&& | 逻辑与 | 并且 | 符号两边都为True 结果才为True |
一假则假 |
|| | 逻辑或 | 或者 | 符号两边有一个为True 就为True |
一真则真 |
! | 逻辑非 | 取反 | True变False False变True |
真变假,假变真 |
运算符优先级
优先级 | 运算符 | 顺序 |
---|---|---|
1 | 小括号 | () |
2 | 一元运算符 | ++ — ! |
3 | 算数运算符 | 先*/后+- |
4 | 关系运算符 | > >= < <= |
5 | 相等运算符 | == != === !== |
6 | 逻辑运算符 | 先&&后|| |
7 | 赋值运算符 | = |
8 | 逗号运算符 | , |
语句
程序三大流程控制语句:顺序结构,分支结构,循环结构
顺序结构:按照上往下的顺序运行
分支结构:根据条件选择执行代码
循环结构:一段代码重复执行
表达式和语句
区别:表达式可以被求值,语句不一定有值
//表达式
num = 1 + 2
//语句
docment.write() & console.log() & alert() & break
分支语句
有选择地执行代码
if分支语句
三种使用:单分支、双分支、多分支
//单分支
if (条件) {
满足条件要执行的代码
}
注意:
1.括号内的条件为true时,进入大括号里执行代码
2.小括号内的结果若不是布尔类型时,会发生隐式转换转为布尔类型
3.如果大括号只有一个语句,大括号可以省略(不建议)
//双分支
if (条件) {
满足条件要执行的代码
}else {
不满足条件要执行的代码
}
//多分支,多选一 使用场景:学生评分 优、良、合、不合
if (条件1) { 先判断条件1,若满足条件1就执行代码1,其他不执行
代码1
} else if (代码2) { 若不满足则向下判断条件2,满足条件2执行代码2,其他不执行
代码2
} else if (代码3) { 若依然不满足继续往下判断,依次类推
代码3
} else { 若以上条件都不满足,执行else里的代码n
代码n
}
案例:
// 1.输入成绩
let score = +prompt('请输入成绩')
// 2.判断
if (score >= 90) {
alert('优秀')
} else if (score >= 70) {
alert('良好')
} else if (score >= 60) {
alert('合格')
} else {
alert('不合格')
}
三元运算符
一般用来取值,场景适用于简单的if else
语法:条件 ? 满足条件执行的代码 : 不满足条件执行的代码
console.log(5 > 13 ? '真' : '假')
switch语句
1.switch case语句一般用于等值判断,不适合于区间判断
2.switch case一般需要配合break关键字使用 没有break会造成case穿透
语法:
switch (数据){ //找到跟小括号里数据全等的case值,并执行里面对应的代码
case 值1:
代码1
break
case 值2: //例:数据若跟值2全等,则执行代码2
代码2
break
default: //若没有全等 ===的则执行default里的代码
代码n
break
}
案例:
switch (1){
case 1:
console.log('选择的是1')
break
case 2:
console.log('选择的是2')
break
default:
console.log('没有符合的')
break
}
=======================================================================
let num1 = +prompt('输入第一个数')
let num2 = +prompt('输入第二个数')
let operator = prompt('请输入运算符')
switch (operator) {
case '+':
alert(`您选择了加法,结果是${num1 + num2}`)
break
case '-':
alert(`您选择了减法,结果是${num1 - num2}`)
break
case '*':
alert(`您选择了乘法,结果是${num1 * num2}`)
break
case '/':
alert(`您选择了除法,结果是${num1 / num2}`)
break
default:
alert('请选择运算符')
}
循环语句
断点调试:F12 -> sources(源代码)
while循环
//while循环语法:
while (循环条件){
要重复执行的代码(循环体)
}
while循环具备三要素:
1.变量起始值
2.终止条件(没有终止条件,循环会一直执行,造成死循环)
3.变量变化量(用自增或者自减)
let i=1 //变量起始值
while(i<=3){ //终止条件
document.write('循环3次<br>')
i++ //变量变化量
}
// 死循环
while(true){}