2、快速入门
2.1、引入javaScript
-
内部标签
<script>
alert("Hello,world")
</script>
-
外部引用
<script src="js/my.js"></script>
2.2、基本语法入门
// 1、定义变量 变量类型 变量名 =变量值;
var score= 10;
// alert(score);
// 2、条件控制
if (score>1){
alert("true");
console.log(score)
}
// 在浏览器的控制台打印变量 console.log(score)
1、浏览器必备调试须知
2.3、数据类型
变量
var a="王者荣耀";
number
123//整数123
123.1//浮点数123.1
1.123e3 //科学计数法
-99 //复数
NaN //not a number
Infinity //表示无限大
字符串
'abc';
"abc";
布尔值
true，false
逻辑运算
&& 两个值都为真，结果为真
|| 一个为真，结果为真
! 真即假，假即真
比较运算符
= 赋值
== 等于(类型不一样，值一样，也会判断为true)
=== 绝对等于(类型一样,值一样，结果为true)
这是一个js的缺陷，检查不要使用==
浮点数问题：
console.log((1/3)===(1-2/3))
尽量避免使用浮点数进行运算，存在精度问题
Math.abs((1/3)-(1-2/3))<0.00000001;
null 和 undefined
-
null 空
-
undefined 未定义
数组
java的数值必须是相同类型的对象，js中不需要这样！
var arr=[1,2,3,'hello',null,true];
取数组下标：如果越界了，就会
undefined
对象
对象是大括号，数组是中括号
var person={
name:"husai",
age:3,
tags:['js','java']
}
2.4 、严格检查格式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
//前提：idea需要支持Es6语法
'use strict';//严格检查模式,预防javaScript的随意 性导致产生的一些问题
//必须写在第一行
//局部变量建议都使用let去定义
let i=1;
</script>
</head>
<body>
</body>
</html>
3、数据类型
3.1、字符串
1、正常字符串我们使用 单引号，或者双引号包裹
2、注意转义字符
'
n 换行
t 空格
u4e2d unicode字符
x41 Ascll 字符
3、多行字符串编写
let msg=`
hello
world
`
4、模板字符串
let name="张三";
let age=3;
let msg=`你好呀,${name},你的年龄是,${age}岁`
console.log(msg);
5、字符串长度
console.log(student.length)
6、字符串的可变性，不可变
7、大小写转换
\大写，这里是方法，不是属性
console.log(student.toUpperCase())
\小写
console.log(student.toLocaleLowerCase())
8、字符串截取
console.log(student.indexOf("t"))
9、substring
console.log(student.substring(1))//从第一个字符串截取到最后一个字符串
console.log(student.substring(1,3))//包含第一个不包含第三个
3.2、数组
Array可以包含任意是数据类型
let arr=[1,0,5,2,3]
1、长度
arr.length
注意：加入给arr.length赋值，数组大小就会发生变化，如果赋值过小，元素就会丢失
2、indexOf,通过元素获得下标索引
arr.indexOf(2)
字符串的”1“和数字的1是不同的
3、Slice()截取Array的一部分，返回一个新数组，类似于String中的SubString
4、push()、pop()
push: 压入到尾部
pop: 弹出尾部的一个元素
5、unshift(),shift()
unshift(): 压入到尾部
shift(): 弹出尾部的一个元素
6、排序sort()
(3) ["B", "C", "A"]
a.sort()
(3) ["A", "B", "C"]
7、元素反转 reverse()
a.reverse()
(3) ["C", "B", "A"]
8、concat()
console.log(a)
(3) ["C", "B", "A"]
a.concat([1,2,3])
(6) ["C", "B", "A", 1, 2, 3]
a
(3) ["C", "B", "A"]
注意：concat()并没有修改数组，只是会返回一个新的数组
9、连接符join
打印拼接数组，使用特定的字符串连接
a.join("-")
"C-B-A"
10、多维数组
arr=[[1,2],[3,4],["5",6]];
arr[2][0]
"5"
3.3、对象
javaScript中的所有的键都是字符串，值是任意对象！
若干个键值对
var 对象名={
属性名: 属性值,
属性名: 属性值,
属性名: 属性值
}
let person={
name: "zhangsan",
age: 10,
score: 50,
email: "1479531014@qq.com"
}
1、对象赋值
person.name="李四"
"李四"
2、使用一个出存在的对象属性，不会报错！undefined
person.aaa
undefined
3、动态的删减属性,通过delete删除对象的属性
delete person.name
true
person
{age: 10, score: 50, email: "1479531014@qq.com"}
4、动态的添加
person.name="aa"
"aa"
person
{age: 10, score: 50, email: "1479531014@qq.com", name: "aa"}
5、判断属性值是否在这个对象中
'age' in person
true
//继承
'toString' in person
true
6、判断一个属性是否是这个对象自身拥有的
person.hasOwnProperty('age')
true
person.hasOwnProperty('toString')
false
3.4、流程控制
if判断
'use strict'
let a=2;
if (a>3){
alert("hhh")
}else {
alert("ku")
}
while循环，避免程序死循环
let a=3;
while (a<100){
a++;
console.log(a);
}
for循环
for (let i = 0; i <100 ; i++) {
console.log(i)
}
forEach循环
let a=[1,2,3,4,5];
//函数
a.forEach(function (value) {
console.log(value)
})
for...in
for (let aKey in a) {
console.log(a[aKey]);
}
3.5、 Map和Set
Map
'use strict'
let map=new Map([["张三",80],["李四",70],["王五",50]]);
// let number = map.get("张三");//通过key取得values
map.set("hh",50);
console.log(map)
// console.log(number);
// new Set();
Set
let set=new Set([1,2,3,44,44,44])//Set可以去重
set.add(5) //添加
set.delete(2);//删除
console.log(set.has(1));//是否包含某个元素
console.log(set)
3.6、iterator
遍历数组
//通过for of /for in下标
let a=[11,55,40];
for (let number of a) {
console.log(number)
}
遍历map
let map=new Map([["张三",80],["李四",70],["王五",50]]);
// let number = map.get("张三");//通过key取得values
// map.set("hh",50);
for (let mapElement of map) {
console.log(mapElement)
}
遍历Set
let set=new Set([1,2,3,44,44,44])//Set可以去重
for (let number of set) {
console.log(number)
}
4、函数
4.1、定义函数
绝对值函数
'use strict'
function f(x) {
if (x>=0){
return x;
}else {
return -x;
}
}
一旦执行return代表函数结束，返回结果！
如果没有执行return，函数执行完也会返回结果，结果就是 undefined
定义方式二
'use strict'
let f=function(x) {
if (x>=0){
return x;
}else {
return -x;
}
}
function(x){...}这是一个匿名函数。但是可以把结果赋值给f，通过f调用
函数！
方式一和方式二等价
调用函数
f(10) //10
f(-10) //10
javaScript可以传任意个参数，也可以不传递参数
参数进来是否存在问题？
假设不存在参数，如何规避？
let f=function(x) {
//手动抛出异常来判断
if (typeof x!=="number"){
throw 'not a Number';
}
if (x>=0){
return x;
}else {
return -x;
}
}
arguments
arguments是一个js免费赠送的关键字；
代表，传递进来的所有的参数，是一个数组！
let f=function(x) {
console.log("xxx"+x)
// if (typeof x!=="number"){
// throw 'not a Number';
// }
for (let i = 0; i < arguments.length; i++) {
console.log(arguments[i]);
}
if (x>=0){
return x;
}else {
return -x;
}
}
ES6引入的新特性，获取除了已经定义的参数之外的所有参数
function f(a,b,
rest参数只能写在最后面，必须用...标识。
4.2、变量的作用域
function qj() {
let x=1;
x=x+1;
}
x=x+2; //Uncaught ReferenceError: x is not defined
如果两个函数使用了相同的变量名，只要在函数内部，就不冲突
function qj() {
let x=1;
x=x+1;
}
function qj2(){
let x='A';
x=x+1;
}
内部函数可以访问外部函数，反之则不行
function qj() {
let x=1;
//内部函数可以访问外部函数，反之则不行
function qj2(){
let y=x+1;
}
let z=y+1; //Uncaught ReferenceError: z is not defined
}
全局函数
let x=1;
function f() {
console.log(x);
}
f();
console.log(x);
全局对象 window
var x='xxx';
alert(x)
alert(window.x);
规范
//唯一全局变量
let hs={};
//定义全局变量
hs.name="hello,world"
hs.add=function (a,b) {
return a+b;
}
把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题
局部作用域
function aaa() {
for (let i = 0; i < 100; i++) {
console.log(i);
}
console.log(i+1);
}
aaa()//Uncaught ReferenceError: i is not defined
建议大家都是用let去定义局部作用域的变量；
常量 const‘’
在ES6之前，这么定义常量：只有用全部大写字母命名的变量就是常量；建议不用修改这样的值
var PI='3.14';
console.log(PI);
PI='213';//可以改变这个值
console.log(PI);
在ES6引入了常量关键字const
const PI='3.14'; //只读变量
console.log(PI);
PI='213';//不可以改变这个值
console.log(PI);
4.3、方法
定义方法
方法就是把函数放在对象的里面，对象只有两个东西：属性和方法
let hs={
name:"张三",
birth:1997,
//方法
age:function () {
//今年-出生的年
let now=new Date().getFullYear();
return now-this.birth;
}
}
//属性
hs.name
//方法，一定要带
hs.age()
5、内部对象
标准对象
typeof 123
"number"
typeof "123"
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof []
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"
5.1、Date
let now=new Date();
now.getFullYear() //年;
now.getMonth()// 月;
now.getDate()// 日；
now.getDay() //星期
now.getHours() //时
now.getMinutes() //分
now.getSeconds() //秒
now.getTime() //时间戳
console.log(new Date(1590072080010))//时间戳转换为时间
转换
now=new Date(1590072080010)
Thu May 21 2020 22:41:20 GMT+0800 (中国标准时间)
now.toLocaleString
ƒ toLocaleString() { [native code] }
now.toLocaleString()
"2020/5/21 下午10:41:20"
now.toGMTString()
"Thu, 21 May 2020 14:41:20 GMT"
5.2、JSON
JSON和JS对象的转换
let user={
name:"zhangsan",
age:3,
sex:"男"
};
console.log(user);
//将对象转换成json
let userJson=JSON.stringify(user);
console.log(userJson);
//将json字符串转换成对象,参数为json字符串
let obj=JSON.parse('{"name":"zhangsan","age":3,"sex":"男"}');
console.log(obj);
6、操作BOM对象(重点)
document
document代表当前的页面，HTML DOM文档树
document.title='张三'
"张三"
获取具体的文档树节点
<body>
<div id="add">
<dt>java</dt>
<dt>javaSe</dt>
<dt>javaEE</dt>
</div>
</body>
<script>
let byId = document.getElementById('add');
</script>
获取cookie
document.cookie
"BAIDUID=3AE4261FA7848C488225C2F42FE13768:FG=1; rsv_i=5f22G7b2aersof83Sb4zfA9jgyZ5U8No5q7BUc8kC7j1hjpOXBDOfSfI7JL5G79q2kphXRK1Ov1WFiVc3kmBwHCDgGFmjto; BDSVRTM=40; plus_lsv=e1339ee5f098ff6b; BDORZ=AE84CDB3A529C0F8A2B9DCDD1D18B695; Hm_lvt_12423ecbc0e2ca965d84259063d35238=1590132849; Hm_lpvt_12423ecbc0e2ca965d84259063d35238=1590132849; plus_cv=1::m:49a3f4a6; bd_af=1; SE_LAUNCH=5%3A26502214_0%3A26502214"
劫持cookie原理
<script src="aa.js"></script>
<!--恶意人员;获取你的cookie上传到他的服务器-->
服务器端可以设置cookie:HttpOnly
historytory
history代表浏览器的历史记录
history.back()//后退
history.forward() //前进
7、操作DOM对象（重点）
核心
浏览器网页就是一个Dom树形结构！
-
更新：更新Dom节点
-
遍历dom节点：得到Dom节点
-
删除：删除一个Dom节点
-
添加：添加一个新发节点
要操作一个Dom节点，就必须要先获得这个Dom节点
let elementsByName = document.getElementsByTagName('h1');
let elementById = document.getElementById('p1');
let elementsByClassName = document.getElementsByClassName('p2');
let elementById1 = document.getElementById('father');
let children = elementById1.children; //获取父节点下的所有子节点
更新节点
<body>
<div id="id1"></div>
</body>
<script>
let byId = document.getElementById(`id1`);
</script>
byId.innerText='123' //修改文本的值
"123"
byId.innerHTML='<Strong>456<Strong>' //可以解析HTML标签
"<Strong>456<Strong>"
操作js
byId.style.color='yellow';
byId.style.fontSize='20px';
byId.style.padding='2em';
删除节点
删除节点的步骤，先获取父节点，在通过父节点删除自己
<div id="father">
<h1>标题</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
let elementById = document.getElementById('p1');
let father = elementById.parentElement;
father.removeChild(elementById);
</script>
插入节点
<body>
<p id="js">javaJs</p>
<div id="aa">
<p id="se">javaSe</p>
<p id="ee">javaEE</p>
<p id="me">javaMe</p>
</div>
</body>
<script>
let jsId = document.getElementById('js');
let byId = document.getElementById('aa');
aa.append(jsId);//追加在后面
</script>
创建一个新的标签
//通过js，创建一个标签
let element = document.createElement('p'); //创建一个p标签
element.id='element'; //创建一个id;
element.innerText='Hello,world';
byId.appendChild(element);
8、jQuery
<a href="" id="jq">点我</a>
<script>
$('#jq').click(function () {
alert('Hello,world');
})
</script>
选择器
鼠标事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/jquery-1.12.4.js"></script>
<style>
#divMove{
500px;
height: 500px;
border: 1px solid red;
}
</style>
</head>
<body>
mouse :<span id="mouseMove"></span>
<div id="divMove">
在这里移动鼠标试试
</div>
</body>
<script>
$(function () {
$('#divMove').mousemove(function (e) {
$('#mouseMove').text('x:'+e.pageX+'y: '+e.pageY)
})
})
</script>
</html>