JavaScript学习简单记录

JavaScript

1、JavaScript概述

**HTML:**网站的结构搭建 CSS:网页界面的美化 JavaScript:网页动态实现

前端框架： BootStrap、ElementUI、LayUi、VUE…

什么是JavaScript？

JavaScript是一门世界上流行的脚本语言。由网景公司（1997年）耗时10天完成开发！

一个合格的java开发者，必须精通JavaScript，因为JavaScript在实际工作中JavaScript可能比java代码写的还多

JavaScript 特点：语法格式不是很严格，遵循java语法格式，基本不会有问题！！！

2、JavaScript入门

**学习JavaScript必须学会使用浏览器控制台等进行调试 **

1、内部引入

  <script>alert("lihui");</script>

2、内部引入(lh.jjs)

    <!--外部引入--><script src="js/lh.js"> </script>

3、基本语法入门

  <!--script标签内，写JavaScript代码 js代码位置不固定 行内引入--><script>//1、定义变量   变量类型    变量名    变量值var num = 1;//条件控制if (num > 0 && num <2){alert("lihui");}else if (num >2 && num <3){alert("lihui");}else {alert("lihui");}console.log(num);//在浏览器控制台打印变量 相当于java中的输出</script>

数据类型

数值、文本、视频、音频。

number：js不区分小数和整数。

123 //整数
123.1 //浮点数
1.2e3 //科学计数法
-9 //负数
NaN //not a number
Infinity //表示无限大

字符串：

'lihui'      "lihui"

布尔值：

true      false

逻辑运算：

&& || !

比较运算符：

=
== 等于（类型不一样、值一样、也会判断为true）
=== 绝对等于（类型一样、值一样、结果为true）

这是一个js弊端、尽量不要使用 ==

Math.abs//绝对值函数

null和undefined区别？

null：空 undefined：未定义

创建变量：es5用var es6用let

定义数组：

var arr = {...};
new Array(...);

数组下标越界：undefined

**对象：**对象是用大括号、数组使用中括号。

  Person person = new Person(1,2,3);var person = {name:"lihui",age:3,tags:['js','java',[web],'...']}

取对象的值：

person.name
>"lihui"
person.age
>3

严格检查模式(strict)：

<!--idea需要设置es6的语法。'use strict':严格检查默认、预防JavaScript的随意性导致产生的一些问题。局部变量都建议使用let 定义必须写在JavaScript的第一行！
-->

字符串的使用

1、正常字符串使用''或者""包裹
2、需要注意转义字符 \
\'
\n
\t
\u4e2d \u#### Unicode字符
\x41  Ascall字符

多个字符串编写

使用：``符号

使用模板字符串

使用：`lihui,你好${}`

字符串长度

console.log(str.length)

字符串的可变性，不可变

大小写转换

//这里是方法、不是属性
student.toUpperCase()
student.toLowerCase()

student.indexOf(‘t’)

substring

student.subString(1)  //从第一个到最后一个
student.subString(1,3)//[1,3)

数组

Array可以包含任意数据类型

var arr = [1,2,3]

长度

arr.length

注意：如果给arr.length赋值，数组大小就会发生变化。如果赋值过小，元素就会丢失。

indexOf:通过元素、获得下标索引

arr.indexof(2)

字符串的’1’和数字1颜色是不一样的。

slice():截取array的一部分，返回一个新数组，类似于String中的substring

push(),pop() 尾部

push:压入到尾部
pop:弹出尾部的一个元素

unshift(),shift()头部

unshift:压入到头部
shift:弹出头部的一个元素

排序 sort()

['a','b','c']
arr.sort()
['b','c','a']

元素反转reverse()

['A','B','C']
arr.reverse()
['C','B','A']

concat()

['A','B','C']
arr.concat()
['C','B','A','1','2','3']

注意：concat()并没有修改数组，只是会返回一个新的数组

连接符join

打印拼接数组，使用特定的字符串拼接

['C','B','A']
arr.join('-')
"C-B-A"

多维数组

arr = [[1,2],[2,3],["5","6"]]
arr[1][1]
1

数组：存储数据（如何存、如何取、都可以自己实现）

对象

由若干个键值对组成

var 对象名 = {属性名：属性值，属性名：属性值，属性名：属性值，属性名：属性值
}

js中的对象，{…}表示一个对象，键值对描述属性，xxxx.xxxx,多个属性直接使用逗号隔开，最后一个属性不加逗号。

1、对象赋值

person.name ="lihui"
person.age = 18

2、使用一个不存在的对象、不会报错！undefined

person.lihui
undefined

3、动态的删减属性、通过delete删除对象的属性

delete person.name
true
person

4、动态的添加。直接给新的属性添加值即可

person.lh ="lihui"
"lihui"
person

5、判断属性值是否在这个对象中！ xxx in xxx !

'age' in person
true
//继承
'toString' in person
true

6、判断一个属性是否是这个对象自身拥有的hasOwnProperty()

person.hasOwnProperty("toString")
false
persion.hasOwnProperty("age")
true

流程控制

if判断

 var num = 1;//条件控制if (num > 0 && num <2){alert("lihui");}else if (num >2 && num <3){alert("lihui");}else {alert("lihui");}

循环

        while (num< 100){age = age +1;}do{age = age +1}while (age<10)for (let i = 0; i < 100; i++) {alert(i)}//for in 相当于java的for for (const arrayKey in array) {alert("lihui")}

Map 和 Set

ES6的新特性：

Map:

let map = new Map(['lihui',90],['hh',98])var lihui = map.get('lihui');map.set('qianying')console.log(lihui)

Set:无序不重复的集合

var set = new Set([1,2,3]) //set可以去重set.delete(1);set.add(3);consloe.log(set.has(3))

** iterator **

遍历数组：

var arr = [3,4,5]
for (var x of arr){console.log(x)
}

遍历map

var map = new Map(['tom',90],['lihiui',89]);
for(let x of map){console.log(x)
}

遍历set

var set  = new Set([5,6,7]);
for(let x of set){console.log(x)
}

函数

方法：对象（属性、方法）

函数：

定义函数

绝对值函数：

定义方式一：

function abs(x){if(x>=0){return x;}else{return -x;}
}

一旦执行到return 代表函数结束，返回结果！

如果没有执行return，函数执行完也会返回结果，结果就是undefined

定义方式二：

var abs = function(x){if(x>=0){return x;}else{return -x;}
}

function(x){…}这是一个匿名函数，但是这个可以把结果赋值给abs,通过abs就可以调用函数。

** 函数调用**

abs(10) //10
abs(-10)//10

参数问题：JavaScript可以传递任意个参数，也可以不传递参数~

参数进来是否存在的问题？可以进行判断。假设不存在参数，可以规避。

arguments

arguments是一个js免费赠送的关键字，使用多余的参数，

代表，传递进来的所有参数，是一个数组。

rest

  if(arguments.length>2){for (let i = 0; i <10 ; i++) {console.log()}}

变量的作用域

在JavaScript中，var定义变量实际是有作用域的。

  function qj() {var x = 1;x = x+1;}x = x +2; //x is not defined

和java的基本一致！！！

全局函数

全局对象：window

alert（）这个函数本身也是一个全局对象。

局部作用域：let

常量：const

ES5：只要用大写字母定义的变量就是常量（但是存在缺陷，这个常量可以改变）

ES6:引入了const关键字定义常量，只读变量。

方法

定义方法：

方法就是把函数放在对象里面，对象只要两个东西：属性和方法

var lihui ={name:"lihui",age:18,//方法bith:function (){var now = new Date().getFullYear();return now-this.age;}}
//属性
lihui.name
//方法，一定要带()
lihui.bith()

this.代表什么？不同的位置代表的不一样。

this是无法指向的，是默认指向调用他的那个对象！！！

apply

在js中可以控制this的指向。

getAge.apply(方法名、参数);

内部对象

标准对象：

Date

  var now = new Date();now.getFullYear();now.getMonth();now.getDate();now.getDay();...

JSON

json是什么？

在JavaScript中一切皆为对象，任何js支持的类型都可以用json来表示

格式：

对象都用{}
数组都用[]
所有的键值对都用key:value

对象转换为json

var user = {name:"lihui",age:8,sex:"男"}var s = JSON.stringify(user);var parse = JSON.parse("{'name':'lihui',{'age':18}");

JSON和JS对象的区别：

var obj = {a:'lihui',b:'hello'};
var json = '{"a":"hello","b":"hello"}'

Ajax

原生的js写法：xhr 异步请求
jQuery 封装好的方法， $(“#name”).ajax(“”)
axios请求

面向对象编程

什么是面向对象？

JavaScript和其他语言有所区别：

类：模板

对象：具体的实例

JavaScript中：

原型对象：

class继承：

//定义一个类
class student{constructor(name){this.name = name;}hello(){alert("lh")}
}
var lihui = new Student("")
var qianying = new Student("")
lihui.hello()

继承：

class xiaoxuesheng extends Student{constructor(name,grade){supper(name);this.grade = grade;}
}

原型链：

操作BOM对象（重点）

浏览器介绍：

JavaScript和浏览器的关系？

JavaScript诞生就是为了能够让代码能够在浏览器上面运行！！！

BOM:浏览器对象模型

IE
Chrome
Safari
FireForx

window（重要）

window代表浏览器窗口

window.alert(1)
undefined
window.innerHeight
150
window.innerHeight
150
window.innerHeight
227
window.innerWidth
816

Navigator

navigator.platform
'Win32'
navigator.appVersion
'5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36'
navigator.appName
'Netscape'

navigator对象一般不会使用，因为会被人为修改。

screen

screen.width
1280
screen.width
1280

location（重要）

host:"'chrome://new-tab-page/'"
href:href: "chrome://new-tab-page/"
protocol: "chrome:"
reload:f reload() //刷新网页
//设置新的地址
location.assign("https://www.baidu.com")

document

document.title
'新标签页'

获取具体的文档树节点

<dl id="app"><dt>a</dt><dt>b</dt><dt>c</dt>
</dl>
<script>var dl = document.getElementById('app');
</script>

获取cookie

document.cookie
''

劫持cookie原理

www.baidu.com

<script src="aaa.js"></script>

服务器端可以设置cookie：httpOnly

history

history.back
ƒ back() { [native code] }
history.forward
ƒ forward() { [native code] }

操作DOM对象（重点）

核心

浏览器网页就是一个Dom树形结构！

更新：更新Dom节点
遍历Dom节点：得到Dom节点
添加：添加一个新的Dom节点

要操作一个Dom节点、必须要先获得这个Dom节点。

Document:文档树。树的每一个节点就是一个Dom

获取Dom节点

 <div id="father"><h1>标题一</h1><p id="p1">p1</p><p class="p2">p2</p></div><script>//对应css选择器var h1 = document.getElementsByTagName('h1');var p1 = document.getElementById('p1');var p2 = document.getElementsByClassName('p2');var father = document.getElementById('father');var children = father.children;father.firstChildfather.lastChild</script>

原生代码：用jQuery代替。

更新节点

操作文本： <div id="id1"></div><script>var id1 = document.getElementById('id1');</script>操作js:id1.innerText="123""123"id1.innerHTML='<strong>123</strong>'"<strong>123</strong>" id1.style.color ='red'"red"

删除节点

删除节点的步骤：先获取父节点、在通过父节点删除本身节点。

   <div id="father"><h1>标题一</h1><p id="p1">p1</p><p class="p2">p2</p></div><script>father.removeChild(p1)</script>

注意：删除多个节点的时候，children是在时刻变化的，删除的时候需要注意。

插入节点

获得某个Dom节点，这个节点如果为空，通过innerHtml就可以添加一个元素。如果Dom节点已经存在元素，我们就不能添加，这样会覆盖原来的操作。

    <p id="lihui">javascript</p><div id="id1"><p id="se">javase</p><p id="ee">javaee</p><p id="me">javame</p></div><script>let js = document.getElementById('lihui');var list = document.getElementById('id1');list.appendChild(js);</script>

创建一个新的标签

    <p id="lihui">javascript</p><div id="id1"><p id="se">javase</p><p id="ee">javaee</p><p id="me">javame</p></div><script>let js = document.getElementById('lihui');var list = document.getElementById('id1');var lh = document.createElement('p');lh.id='lihui';lh.innerText='hello,lihui';//创建一个新节点标签(通过这属性，可以设置任意属性的值)var scriptElement = document.createElement('script');scriptElement.setAttribute('type','text/javascript')</script>

insert

inserBefore

xxx.insertBefore('新节点','旧节点');

操作表单（验证）

表单是什么 form DOM 树

文本框 text
下拉框
单选框 radio
多选框 checkbox
隐藏域 hidden
密码框 password
…

表单的目的：提交信息

 <form action="post"><p> <span>用户名：</span><input type="text" id="userName"></p><p> <span>性别：</span><input type="radio" name="sex" value="nan" id="boy">男<input type="radio" name="sex" value="nv" id="girl">女</p></form><script>let by = document.getElementById('userName');var boy = document.getElementById('boy');var girl = document.getElementById('girl');//得到输入框的值input_text.value//修改输入框的值input_text.value="123"//对于单选框，多选框等等固定的值，boy.value只能获得当前的值boy.checked = true;//查看放回的结果是否为true，如果为true，被选中</script>

提交表单

    <form action="#" method="post"><p> <span>用户名：</span><input type="text" id="userName" name="username"></p><p> <span>用户名：</span><input type="password" id="password" name="password"></p><p> <span>性别：</span><input type="radio" name="sex" value="nan" id="boy">男<input type="radio" name="sex" value="nv" id="girl">女</p><!--<input type="submit">--><!--绑定事件、onclick 被点击--><button type="button" onclick="sub()">提交</button></form><script>function sub(){var username = document.getElementById('userName');let pws = document.getElementById('password');console.log(username.value);console.log(pws.value);pds.value="123";return true;}</script>

jQuery

JavaScript和jQuery的关系；工具类

jQuery官网：

https://jquery.com/

cdnjQuery：

http://lib.sinaapp.com/

引入jQuery：

src="地址"

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="http://lib.sinaapp.com/"></script></head>
<body><a href="" id="test-jquery">点我</a><script>$('#test-jquery').click(function (){alert('lihui');})</script></body>
</html>

jQuery选择器

 <script>//标签选择器document.getElementsByTagName();//id选择器document.getElementById();//类选择器document.getElementsByClassName();//jQuery$('p').click();//标签选择器$('#de').click();//id选择器$('.clas').click();//类选择器
//使用官网学习</script>

事件

鼠标事件、键盘事件、

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><script src="http://lib.sinaapp.com/"></script><style>#divMove{width: 500px;height: 500px;border: 1px solid red;}</style></head>
<body>mouse : <span id="mouseMove"></span><div id="divMove">移动鼠标</div><script>$(function (){$('#divMove').onmousemove(function (e){$('#mouseMove').text('X:'+e.pageX+'Y:'+e.pageY)})});</script></body>
</html>

jQuery操作Dom

  <script>$('#test-ul li[name=lh]').text();//获得值$('#test-ul li[name=lh]').text('jalgj');//设置值$('#test-ul').html();//获得值$('#test-ul').html(<a></a>);//设置值</script>

元素的显示与隐藏：

本质：display:none

$.ajax({......
})