一.什么是JavaScript
1.1
1.是一门世界上最流行的脚本语言
二.快速入门
2.1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--script标签内，写JavaScript代码-->
<!--<script>
alert('hello world');
</script>-->
<!--外部引入-->
<!--注意：script标签必须成对出现-->
<script src="js/qj.js"></script>
<!--不用显示定义type，也默认是JavaScript-->
<script type="text/javascript">
</script>
</head>
<body>
</body>
</html>2.2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--javascript严格区分大小写-->
<script>
//1.定义变量 变量类型 变量名=变量值;
var score=71;
//alert(num);
//2.条件控制
if(score>60&&score<70){
alert("60~70")
}else if(score>70&&score<80){
alert("70~80")
}else{
alert("other")
}
//console.log(score) 在浏览器的控制台打印变量 相当于Java中的System.out.println();
</script>
</head>
<body>
</body>
</html>2.3 数据类型
数值 文本 图形 音频 视频...
2.3.1number：
js不区分小数和整数，Number
123 //整数
123.1//浮点数
1.23e3//科学计数法
1230
-99//负数
-99
NaN//not a number
Infinity //表示无限大2.3.2字符串
'abc' "abc"
2.3.3 布尔值
true false
console.log(2>1)
VM321:1 true
undefined
console.log(2<1)
VM399:1 false2.3.4 逻辑运算
&&：两个都为真，结果为真
||：一个为真，结果为真
！：真即假，假即真
2.3.5 比较运算符
=：赋值符号
==：等于符号（类型不一样 值一样 也会判断为true）
===：绝对等于（类型一样，值一样，结果为true）
NaN===NaN，这个与所有的数值都不相等，包括自己
只能通过isNaN(NaN)来判断这个数是否是NaN
2.3.6 浮点数问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
console.log((1/3)===(1-2/3)) //false
</script>
</head>
<body>
</body>
</html>尽量避免使用浮点数进行运算，存在精度问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
console.log(Math.abs((1/3)===(1-2/3))<0.00000001) //true
</script>
</head>
<body>
</body>
</html>2.3.7 null和underfined
1.前者是空
2.后者未定义
2.3.8 数组
Java的数值必须是列相同类型的对象，js中不用这样
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//保证代码的可读性，尽量使用[]
var arr=[1,2,3,4,5,'hello',null,true]
new Array(1,2,3,4,5,5,'hello');
</script>
</head>
<body>
</body>
</html>取数组下标：如果越界了，就会undefined
2.3.9 对象
对象是大括号，数组是中括号~~
每个属性之间使用逗号隔开，最后一个不需要添加
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//Person person = new Person();
var person = {
name:"xioaming",
age:3,
tags:['js','java','web','...']
}
</script>
</head>
<body>
</body>
</html>取对象的值
person.name
'xioaming'
person.age
32.3.10 变量
var 王者荣耀="倔强青铜";2.4 严格检查模式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--前提： IEDA需要设置支持ES6语法
'use strict';严格检查模式,预防JavaScript的随意性导致一些问题
局部变量建议都使用let定义-->
<script>
'use strict'
//全局变量
var i=1;
//ES6 let
</script>
</head>
<body>
</body>
</html>三.数据类型
3.1 字符串
1.正常字符串使用单引号，或者双引号包裹
2.注意转义字符\
\' \n \t \u4e2d（中 \u#### unicode字符）\x41（ASCII字符）
3.多行字符串编写
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
'use strict';
//tab 上面 esc 下面
var msg='hello
world
你好ya'
</script>
</head>
<body>
</body>
</html>4.模板字符串
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
'use strict';
//tab 上面 esc 下面
let name = "qinjiang";
let age=3;
let msg = '你好呀,${name}'
</script>
</head>
<body>
</body>
</html>5.字符串长度 str.length
var student = "student"
console.log(student.length)6.字符串的可变性
console.log(student.length)
VM344:1 7
undefined
console.log(student[0])
VM491:1 s
undefined
student[0]=1
1
console.log(student)
VM583:1 student7.大小写转换 toUppercase
//注意，这里是方法，不是属性了
console.log(student.toUpperCase())
VM685:1 STUDENT
console.log(student.toLowerCase())
VM820:1 student8.获取指定的下标 indexOf
console.log(student.indexOf('t'))
VM936:1 1
console.log(student.indexOf('d'))
VM958:1 39.包含前面不包含后面 substring
console.log(student.substring(1,3))
VM1070:1 tu
undefined
console.log(student.substring(1))
VM1189:1 tudent //从第一个字符串截取到最后一个3.2 数组
Array可以包含任意的数据类型
var arr=[1,2,3,4,5,6]
arr[0]=2
2
console.log(arr)
VM1760:1 (6) [2, 2, 3, 4, 5, 6]1.长度
arr.length注意：只要给arr.length赋值，数组大小就会发生变化
arr.length=10
10
console.log(arr)
VM1514:1 (10) [1, 2, 3, 4, 5, 6, 空 ã4]
undefined
arr.length=3
3
console.log(arr)
VM1622:1 (3) [1, 2, 3]2.indexOf，通过元素获得下标索引
var arr=[2,2,3,4,5,6]
arr.indexOf(2)
0字符串的"1"和数字 1 是不同的
3.slice（）截取Array的一部分，返回一个新数组
var arr=[2,2,3,4,5,6]
arr.slice(2)
(4) [3, 4, 5, 6]
arr.slice(1,5)
(4) [2, 3, 4, 5]4.push,pop
1)前者压入到尾部
2)后者弹出尾部的一个元素
arr
(6) [2, 2, 3, 4, 5, 6]
arr.push('a','b')
8
arr
(8) [2, 2, 3, 4, 5, 6, 'a', 'b']
arr.pop()
'b'
arr
(7) [2, 2, 3, 4, 5, 6, 'a']5.unshift(),shift() 头部
arr
(7) [2, 2, 3, 4, 5, 6, 'a']
arr.unshift('c')
8
arr
(8) ['c', 2, 2, 3, 4, 5, 6, 'a']
arr.shift()
'c'
arr
(7) [2, 2, 3, 4, 5, 6, 'a']6.排序sort
arr=['B','C','A']
(3) ['B', 'C', 'A']
arr.sort()
(3) ['A', 'B', 'C']7.元素反转reverse
(3) ['A', 'B', 'C']0: "C"1: "B"2: "A"length: 3[[Prototype]]: Array(0)
arr.reverse()
(3) ['C', 'B', 'A']8.concat（）
(3) ['C', 'B', 'A']
arr.concat([4,5,6])
(6) ['C', 'B', 'A', 4, 5, 6]注意：concat（）并没有修改数组，只是会返回一个新的数组
9.连接符join
打印拼接数组，使用特定的字符串连接
3) ['C', 'B', 'A']
arr.join('--')
'C--B--A'10.多维数组
arr=[[1,2],[3,4],["5","6"]];
(3) [Array(2), Array(2), Array(2)]
arr[1][1]
4
扫一扫
1409
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
