JavaScript
1.什么是JavaScript
1.1概述
JavaScript是一门世界上最流行的脚本语言
Java、JavaScript
从构想到出来只用了10天!!!
一个合格的后端人员,必须要精通JavaScript
ECMAScript它可以理解为是JavaScript的一个标准
1.2历史
最新版本已经到ES6版本~
但是大部分浏览器还只停留在支持es5代码上!
开发环境与线上环境,版本不一致
核心:关键字、变量、流程控制、对象、数组、结构…
2.快速入门
2.1引入JavaScript
-
内部标签
<script> //.. </script>
-
外部引入
sjy.js
//...
index.html
<script src="js/sjy.js"></script>
2.2基本语法入门
// 1.定义变量
var num = 1;
var name = "sjy";
alert(num);
// 2.条件控制
if(2>1){
alert(true)
}
//3.注释
//
/**/
//console.log()在浏览器的控制台打印
2.3数据类型
数值,文本,图ing,音频,视频…
变量
var la;
//不能以数字开头
//可以使用$开头
//可以使用_开头
number
js不区分小数和整数,Number
123//整数123
123.1浮点数123.1
1.123e3//科学计数法
-99//符数
NAN//not a number
Infinity//表示无限大
字符串
'abc'
"abc"
'\n'
布尔值
true
false
逻辑运算
&&//两个都为真,结果为真
||//一个为真,结果为真
!//真即假,假即真
比较运算符重要!!!
= //赋值
==//等于(类型不一样,值一样,也会判断为true)
===//绝对等于()类型一样,值一样,结果为true
这是一个JS的缺陷,坚持不要使用==比较
须知:
- NaN===NaN,这个数值与所有的数值都不相等,包括自己
- 之呢个通过isNaN(NaN)来判断是不是NaN
浮点数问题:
console.log((1/3) === (1-2/3));//false
尽量避免使用浮点数进行运算,存在精度问题!
console.log(Math.abs((1/3)-(1-2/3)<0.0000001));
null和undefined
- null空
- undefined未定义
数组
java中数组必须是一系列相同类型的对象
javascript
//保证代码的可读性,尽量使用[]
var arr =[1,2,3,4,5,'hello',null,true];
new Array(1,2,3,4,5,'hello');
取数组下标:如果越界了,就会undefined
对象
对象是大括号,数组是中括号
每个属性之间使用逗号隔开,最后一个不需要添加
取对象的值 对象名.属性名
2.4严查检查模式strict
严格检查模式(‘use strict’;):
预防JavaScript的随意性导致产生的一些问题
前提:IDEA 需要设置支持ES6
要求:必须写在第一行
ES6:
局部变量用let定义
全局变量用var定义
3.数据类型
3.1字符串
-
正常字符串我们使用单引号或者双引号包裹
-
注意转移字符\
\'//' \n//换行 \t//制表 \u4e2d//中 \u#### Unicode字符 \x41 //A Ascll字符
-
多行字符串编写(单反引号)
`table 上面的 那个键 引起来`
-
模板字符串
let name = "sjy"; let age = 18; let msg =`你好吖,${name}`;
-
字符串长度
str.length
-
字符串的可变性,不可变
-
大小写转换,注意是方法,不是属性
- toUpperCase()
- toLowerCase()
-
获取指令的下标str.indexOf(‘t’)
-
截取字符串substring(1,3) 左闭右开
3.2数组
Array可以包含任意的数据类型
var aar = [1,2,3,4,5,6]
1.长度
arr.length
注意:加入给arr.length赋值,数组大小就会发生变化。如果赋值国小,元素就会丢失;如果赋值过大,那么添加的就是undefined。
2.indexOf
通多元素获得下标索引
字符串的’1’和数字1是不同的
3.slice()
截取Array的一部分,返回一个新数组,类似于String中的substring
4.push(),pop()尾部
push:压入到尾部
pop:弹出尾部的一个元素
5.unshift(),shift()头部
unshift:压入头部
shift:弹出头部的一个元素
6.sort()排序
7.reverse元素反转
8.contat()添加
注意:concat并没有修改数组,只是会返回一个新的数组
9.链接符join()
打印拼接数组,使用特定的字符串连接
10.多维数组
数组:存储数据(如何存,如何取,方法都可以自己实现!)
3.3对象
若干个键值对
var 对象名 = {
属性名:属性值,
属性名:属性值,
属性名:属性值
}
var person = {
name: "sjy",
age: 3,
email: "438217638@qq.com",
sccore: 0
}
js中对象,{,}表示一个对象,键值对描述属性xxxx:xxxx,多个属性之间使用逗号隔开,最后一个属性不加逗号!
js中所有键都是字符串,值是任意对象
1.对象赋值
name: "sjy",
age: 3,
email: "438217638@qq.com",
sccore: 0
2.使用一个不存在的对象属性,不会报错!undefined
person.haha
undefined
3.动态的删减属性,通过delete删除对象的属性
delete persom.name
true
4.动态的添加属性,直接给新的属性添加值即可
person.haha = "haha"
"haha"
5.判断属性值是否在这个对象中! xxx in xxx!
'age' in person
true
6.判断一个属性是否是这个自身拥有的hasOwnProperty()
person.hasOwnProperty('toString')
flase
person.hasOwnProperty('age')
true
3.4流程控制
if判断
while循环,避免程序死循环
do while循环
for循环
forEach循环 ES5.1新特性
var age = [1,2,3,4,5,6,7,8,9];
age.forEach(function (value) {
console.log(value);
})
for in循环
3.5Map和Set
ES6新特性
Map:
var names = ['tom','jack','haha'];
var scores = [100.90,80];
//学生的成绩,学生的名字
var map = new Map([['tom',100],['jack',90],['haha',80]]);
var tom = map.get('tom');//通过key获得value
console.log(tom)
map.set('admin',123456);//新增或修改
map.delete('admin');//删除
Set:无需不重复集合
var set = new Set([3,1,1,1,1]);//set可以去重
set.add(1);//添加
set.delete(1);//删除
set.has(3);//是否包含某个元素
3.6iterator
ES6新特性
使用iterator来遍历迭代Map,Set
遍历数组
//通过for of/for in 下标实现
var arr = [3,4,5];
for (var x in arr){
console.log(x);
}
for (let x of arr){
console.log(x);
}
遍历map
var map = new Map([["tom",100],["jack",90],["haha",80]]);
for (let x of map){
console.log(x);
}
遍历set
var set = new Set([1,2,3,4,5,6]);
for (let x of set){
console.log(x);
}
4.函数及面向对象
方法:对象(属性,方法)
函数也一样
4.1函数定义及变量作用域
定义方式一
绝对值函数
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可以穿任意个参数,也可以不传递参数~
参数进来是否存在的问题?
假设不存在参数,如何规避?
function abs(x){
//手动抛出异常来判断
if(typeof x !== 'number'){
throw 'Not a Number';
}
if(x>=0){
return x;
}else{
return -x;
}
}
arguments
arguments
是JS免费赠送的关键字;
代表,传递进来的所有参数,是一个数组!
function abs(x){
console.log("x=>" + x);
for (var i = 0;i < arguments.length;i++){
console.log(arguments[i]);
}
//手动抛出异常来判断
if(typeof x !== 'number'){
throw 'Not a Number';
}
if(x>=0){
return x;
}else{
return -x;
}
}
问题:arguments包含所有的参数,我们有时候想使用多余的参数来惊醒附加操作,需要排除已有参数~
reset
以前:
function aaa(a,b){
console.log("a=>" + a);
console.log("b=>" + b);
if (arguments.length>2){
for (var i = 2;i<arguments.length;i++){
}
}
}
ES6新特性,获取除了已经定义的参数之外的所有参数
function bbb(a,b,...rest){
console.log("a=>" + a);
console.log("b=>" + b);
console.log(rest)
}
rest参数只能卸载最后面,必须用…标识
变量的作用域
在javascript中,var定义变量实际是有作用域的。
假设在函数体中声明,则在函数体外不可以使用~(非要实现的化,可以研究一下闭包
)
function sjy() {
var x = 1;
x = x + 1;
}
x = x +2;
如果两个函数是用来相同的变量名,只要在函数内部,就不冲突
function sjy() {
var x = 1;
x = x + 1;
}
function sjy2() {
var x = 1;
x = x + 1;
}
内部函数可以使用外部函数的成员,反之则不行
function sjy() {
var x = 1;
function sjy2() {
var y = x + 1;//2
}
var z = y + 1;//not defined
}
假设内部函数变量和外部函数的变量的重名,函数查找变量从自身函数开始,由内向外查找,假设外部存在这个同名的函数变量,则内部函数会屏蔽外部函数的变量。
function sjy() {
var x = 1;
function sjy2() {
var x = 'a';
console.log(x);
}
console.log(x);//1
sjy2();//a
}
提升变量的作用域
function sjy() {
var x = 'x' + y;
console.log(x);
var y = 'y';
}
结果:xundefined
说明:JS执行引擎,自动提升了y的声明,但是不会提升变量的赋值。
这个是在JS建立之初就存在的特性。养成规范:所有的变量定义都放在函数的头部,不要乱放,便于代码维护。
全局变量
默认所有的全局变量,都会自动绑定在window对象下
alert()这个函数本身也一个是window
变量
JS实际上只有一个全局作用域,任何变量(函数也可以视为变量),假设没有在函数作用范围内找到,就会向外查找,如果在全局作用域都没有找到,报错RefrenceError
规范
由于我们所有的全局变量都会绑定到我们的window上。如果不同的js文件,是用了相同的全局变量,冲突->如何能够减少冲突?
//唯一全局变量
var app = {};
//定义全局变量
app.name = 'sjy';
app.add = function(a,b){
return a+b;
}
把自己的代码全部放入自己定义的唯一空间名字中,降低全局命名冲突的问题~
JQuery
局部作用域 let
function aaa(){
for ( var i = 0;i < 100;i++){
console.log(i);
}
console.log(i+1);//问题:i处理这个作用域还可以使用
}
ES6 let关键字,解决局部作用域冲突问题!
function aaa(){
for ( let i = 0;i < 100;i++){
console.log(i);
}
console.log(i+1);//Uncaught ReferenceError:i is not defined
}
建议大家都使用let取定义局部作用域的变量。
常量const
在ES6之前,指明定义常量:只要用全部大写字母命名的变量就是常量;建议不要修改这样的值。
var PI = '3.14';
console.log(PI);
PI = '123';//可以改变这个值
console.log(PI);
在ES6引入了常量关键字const
let PI = '3.14';//只读变量
console.log(PI);
4.2方法
let sjy = {
name: 'sjy',
birth: 1998,
//方法
age: function(){
//今年-出生的年
let now = new Date().getFullYear();
return now-this.birth;
}
}
属性:对象.属性名
方法:对象.方法名;注意:一定要带();sjy.age()
this代表什么?拆开上面的代码看看~
let sjy = {
name: 'sjy',
birth: 1998,
//方法
age: getAge
}
function getAge(){
//今年-出生的年
let now = new Date().getFullYear();
return now-this.birth;
}
sjy.age();//ok
getAge();//NaN window
this是无法指向的,是默认指向调用这个方法的那个对象
apply
在js中可以控制this指向
getAge.apply(sjy,[]);//this,之习性拿过来sjy,参数名为空
4.3闭包(难点)
4.4箭头函数(新特性)
4.5创建对象
什么是面向现象
javascript、java、C#…面向对象;javascript有些区别!
类:模板
对象:具体的实例
在JavaScript这个需要大家换一下思维方式!
原型!!!
let Student = {
name: 'sjy',
age: 23,
run: function () {
console.log(this.name + "run ......");
}
};
let lia = {
name: 'lia'
};
//lia的原型指向学生
lia._proto_ = Student;
4.6class继承(新特性)
class继承
class
关键字,是在ES6引入的
1.定义一个类,属性,方法
function Student(name) {
this.name = name;
}
//给Student新增一个方法
Student.prototype.hello = function () {
alert("Hello");
}
//ES6之后
class Student{
constructor(name) {
this.name= name;
}
hello(){
alert('hello');
}
}
2.继承
class SmallStudent extends Student{
constructor(name,grade) {
super();
this.grade = grade;
}
myGrade(){
alert("我是一名小学生");
}
}
new SmallStudent('李华',100).myGrade();
4.7原型链继承(难点)
_ proto _:
5.内部对象
标准对象
number、string、boolean、object、function、undefined
5.1Date
基本使用
let now = new Date();
console.log(now);//Thu Jan 28 2021 14:12:33 GMT+0800
now.getFullYear();//年
now.getMonth();//月 0~11
now.getDate();//日
now.getDay();//星期几
now.getHours();//小时
now.getMinutes();//分
now.getSeconds();//秒
ow.getTime();//时间戳 全世界统一1970.1.1 00:00:00 到现在的 毫秒数
转换
let s = now.toLocaleString();//注意,调用的是一个方法,不是一个属性!
console.log(s);
5.2JSON
JSON是什么
- (JavaScript Object Notation, JS 对象简谱) 是一种轻量级的数据交换格式。
- 简洁和清晰的层次结构使得 JSON 成为理想的数据交换语言。
- 易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率。
早期,所有数据传输习惯使用XML文件
在JS中,一切皆为对象,任何js支持的类型都可以使用JSON来表示;
格式:
- 对象都用{}
- 数组都用[]
- 所有的键值对都是用key:value
JSON字符串和JS对象的转化
let user = {
name: 'sjy',
age: 23,
sex: '男'
}
//对象转化为json字符串
let s = JSON.stringify(user);
console.log(s);
//json字符串转换为对象 参数为json字符串
let parse = JSON.parse('{"name":"sjy","age":23,"sex":"男"}');
console.log(parse);
很多人搞不清除,JSON和JS对象的区别
var obj = {a:'helloa',b:'hellob'};
var json = '{"a":"helloa","b":"hellob"}';
5.3Ajax
- 原生的js写法 xhr异步请求
- JQuery封装好的方法 $("#name").ajax("")
- axios请求
6.操作Dom元素
核心
DOM:文档对现象模型
浏览器网页就是一个DOM树形结构!
- 更新:更新Dom节点
- 遍历Dom节点:的搭配Dom节点
- 删除:删除一个Dom节点
- 添加:添加一个新的节点
要操作一个Dom节点,就必须要先获得这个Dom节点
6.1获得Dom
<div id="father">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
//对应css选择器
let h1 = document.getElementsByTagName('h1');
let p1 = document.getElementById('p1');
let p2 = document.getElementsByClassName('p2');
let father = document.getElementById('father');
let childrens = father.children;//获取父节点下的所有子节点
</script>
这是原生代码,之后我们尽量都使用jQuery();
6.2更新Dom
<div id="id1">
</div>
<script>
let id1 = document.getElementById('id1');
id1.innerText = '456';
id1.innerHTML = '<strong>123</strong>';
</script>
操作文本
操作JS
操作CSS
6.3删除Dom
删除节点的步骤:先获取父节点,再通过父节点删除自己
<div id="father">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
let father = document.getElementById('father');
let p1 = document.getElementById('p1');
father.removeChild(p1);
</script>
注意:删除多个节点的时候,children是时刻变化的,删除节点的时候一定要注意
6.3创建和插入Dom
我们获得了某个Dom节点,假设这个dom节点是空的,我们通过innerHTML就可以增加一个元素了,但是这个DOM节点已经存在元素了,我们就不能这么干了!会产生覆盖
追加
<p id="js">JavaScript</p>
<div id="list">
<p id="se">JavaSE</p>
<p id="ee">JavaEE</p>
<p id="me">JavaME</p>
</div>
<script>
let js = document.getElementById('js');
let list = document.getElementById('list');
let ee = document.getElementById('ee');
//已经存在的节点
list.append(js);
//通过JS创建一个新的节点
let newP = document.createElement('p');//创建一个p标签
newP.id = 'newP';
newP.innerText = 'Hello';
list.append(newP);
//insert
list.insertBefore(js,ee);
7.操作BOM元素
BOM:浏览器对象模型
浏览器介绍
JavaScript和浏览器关系?
JavaScript诞生就是伪类能够让它在浏览器中运行!
- IE6~11
- Chrome
- Safari
- FireFox Linux默认
- Opera
三方
- QQ浏览器
- 360浏览器
7.1window
window代表浏览器窗口
7.2navigator
Navigator,封装了浏览器的信息
大多数时候,我们不会使用navigator
对象,因为会被人为修改
不建议使用这些属性来判断和编写代码
7.3screen
代表屏幕尺寸
7.4location
代表当前页面的URL信息
host:主机
href:跳转网页
protocol:协议
reload:重新加载
assign:设置新的地址
7.5document
代表当前的页面,HTML DOM文档树
获取具体的文档树节点
<dl id="app">
<dt>Java</dt>
<dd>JavaSE</dd>
<dd>JavaEE</dd>
</dl>
<script>
let dl = document.getElementById('app');
</script>
可以获取cookie
劫持cookie原理
<script src="sjy.js"></script>
<--恶意人员获取你的cookie,上传到他的服务器-->
服务器端可以设置cookie:httpOnly
7.6history
代表浏览器的历史记录,不建议使用
history.back()后退
history.forword()前进
7.7操作表单(验证)
表单是什么 form DOM树
- 文本框 text
- 下拉框 select
- 单选框 radio
- 多选框 checkbox
- 隐藏域 hidden
- 密码框 password
- …
获取和设置表单的值
<form action="post">
<p>
<span>用户名:</span><input type="text" id="username">
</p>
<!--多选框的值,就是定义好的value-->
<p>
<span>性别:</span>
<input type="radio" name="sex" value="man" id="boy">男
<input type="radio" name="sex" value="woman" id="girl">女
</p>
</form>
<script>
let input_text = document.getElementById('username');
let input_boy = document.getElementById('boy');
let input_girl = document.getElementById('girl');
//得到输入框的值
input_text.value;
//需修改输入框的值
input_text.value = '123456';
</script>
对于单选框,多选框等固定的值,.value只能获取当前的值,用.checked查看返回的结果,是否为true,如果为true,则被选中
提交表单
<form action="#" method="post">
<p>
<span>用户名:</span><input type="text" id="username" name="username">
</p>
<p>
<span>密码:</span><input type="text" id="password" name="password">
</p>
<!--绑定事件 onclick被点击-->
<button type="submit" onclick="sjy()">提交</button>
</form>
<script>
function sjy() {
let username = document.getElementById('username');
let password = document.getElementById('password');
console.log(username.value);
//MD5 算法
password.value = md5(password.value);
console.log(password.value);
}
</script>
表单绑定提交事件
onsubmit 绑定一个提交检测的函数,true和false
将这个结果返回给表单,使用obsubmit接收
7.8操作文件
8.jQuery
JavaScript
JQuery库,里面存在大量的JavaScript库\
使用:公式: $(selector).action()
获取jQuery
1.在线引入
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
2.导入js包
<script src="lib/jquery-3.4.1.js"></script>
初体验
<script>
//选择器就是css选择器
$('#test-jquery').click(function () {
alert('hello,jQuery');
})
</script>
选择器
<script>
//原生js,选择器少,麻烦不好记
//标签
document.getElementsByTagName();
//id
document.getElementById();
//类
document.getElementsByClassName();
//jQuery
$('p').click();//标签选择器
$('#id1').click();//id选择器
$('.class1').click();//类选择器
</script>
文档工具站:https://jquery.cuishifeng.cn/
事件
鼠标事件,键盘事件,其他事件
<!--要求:获取鼠标当前的一个坐标-->
mouse:<span id="mouseMove"></span>
<div id="divMove">
在这里移动鼠标试试
</div>
<script>
//当网页元素加载完毕之后,响应事件
$(function () {
$('#divMove').mousemove(function (e) {
$('#mouseMove').text('x:'+e.pageX+ ' y:'+e.pageY);
});
});
</script>
操作Dom
<ul id="test-ul">
<li class="js">JavaScript</li>
<li name="py">Python</li>
</ul>
</div>
<script>
// document.getElementById('')
$('#test-ul li[name=py]').text();//获得值
$('#test-ul li[name=py]').text('Java');//设置值
$('#test-ul li[name=py]').html();//获得值
$('#test-ul li[name=py]').html('<strong>Java</strong>');//设置值
</script>
节点文本操作
css操作
元素的显示和隐藏,本质display:none