3.5 Map和Set (ES6)
Map:
//ES6 Map
1 //ES6 Map
//学生的成绩,学生的名字
// var names = ["tom","jack", "haha"];
// var scores = [100,90,80];
8
9
var map = new Map([['tom', 100], ['jack', 90], ["haha',80]]);var name = map.get('tom');
//通过key获得valuemap.set('admin',123456); //新增或修改map.delete("tom");
//删除
Set:无序不重复的集合
set.add(2); //添加
set.delete(1); //删除
console
.1
og(set.has(3)); //是否包含某个元素
我的练习:
<script>
var map = new Map([['tom', 100], ['kavl', 90], ['dfg', 67]]);
var name0 = map.get('dfg');
map.set('bella', 234567);
map.delete('dfg');
console.log('kavl');
var set = new Set([3, 1, 1, 1, 1, 1]);
set.add(2);
set.add(5);
set.delete(2);
console.log(set.has(5));
</script>
3.6 iterator
遍历数组
//通过for of / for in 下标
var arr = [3,4,5]
for (var x of arr){console.1og(x)
遍历map
var map = new Map([["tom", 100], ["jack", 90], ["haha", 80]]);
for (let x of map) {
console.1og(x)
遍历set
var set = new Set([5, 6, 7]);
for (let x of set) [
console.1og(x)
4、函数
4.1 定义函数
函数 vs方法 对象(属性,方法)
定义方法1
function abs(x) {
if (x >= 0) {
return x;
} else {
return -x;
}
}
一旦执行到 return 代表函数结束,返回结果!如果没有执行 return,函数执行完也会返回结果,结果就是 undefined
定义方法2
匿名函数直接赋值给一个变量
var abs = function (x) {
if (x >= 0) {
return x;
} else {
return -x;
}
}
function(x){…}这是一个匿名函数。但是可以把结果赋值给 abs,通过abs 就可以调用函数
调用函数
直接abs(10)//10
abs(-10)//10
手动抛出异常
var abs = function (x) {
//手动抛出异常
if (typeof x !== 'number') {
throw 'Not a Number ~~';
}
if
(x >= 0) {
return x;
} else {
return -x;
}
}
arugements
是一个免费赠送的关键字;arguments代表,传递进来的所有的参数,是一个数组!
var abs = function (x) {
console.log("x====>" + x);
for (var i = 0; i < arguments.length; i++) {
console.log(arguments[i]);
}
if (x >= 0) {
return x;
} else {
return -x;
}
}
rest
ES6 引入的新特性,获取除了已经定义的参数之外的所有参数
rest 参数只能写在最后面,必须用 … 标识。
function aaa(a, b, ...rest) {
console.log(a);
console.log(b);
console.log(rest);
}
4.2 变量的作用域
在javascript中, var 定义变量实际是有作用域的
1 假设在函数体中声明,则在函数体外不可以使用
~(非要想实现的话,后面可以研究一下
闭包
function qj() {
var x = 1;
X = x + 1;
}
x = x + 2; //Uncaught ReferenceError: x is not defined
2 如果两个函数使用了相同的变量名,只要在函数内部,就不冲突
function qj() {
var x = 1;
x = x + 1;
}
function qj2() {
var x = 'A';
x = x + 1;
}
3 内部函数可以访问外部函数的成员,反之则不行
function qj() {
var x = 1;
function qj2() {
var y = x + 1;//y=2
}
// 内部函数可以访问外部函数的成员,反之则不行
var z = y + 1;
// 报错 找不到 not defined
}
4 就近原则。假设在javaScript 中 函数查找变量从自身函数开始~,由“内“向“外“查找.假设外部存在这个同名的函数变量,则内部函数会屏蔽外部函数的变量。
function qj() {
var x = 1;
function qj2() {
var x = 'A';
console.log('inner' + x);
}
qj2();
//innerA
console.log('outer' + x);
}
qj();
//outer1
5 js存在变量提升机制,JS引擎遇到var声明,会将其声明提到作用域顶端
5.1 全局变量
x = 1;
function f(){
console.1og(x);
};
f();//1
console.1og(x);//1
这个是在JavaScript建立之初就存在的特性。养成规范: 所有的变量定义都放在函数的头部,不要乱放,便于代码维护;
5。2全局函数
//全局变量 定义在函数之外的 就是全局变量
x = 1;
I
function fO fconsole.1og(x);
2fO;
console.1og(x);
5.2 全局对象 window
变量是对象的变量,变量都要绑定在对象上。
而默认所有的全局变量,都会自动绑定在 window对象下;
var x ='xxx';
alert(x);
alert(window.x);
// 默认所有的全局变量,都会自动绑定在 window对象下;
5.3alert这个函数本身也是一个 window 变量
var x = 'xxx';
window.alert(x);
var old_alert = window.alert;
//old_alert(x);
window.alert = function () {
};
// 发现 alert() 失效了 I
window.alert(123);
//恢复
window.alert = old_alert;
window.alert(456);
Javascript 实际上只有一个全局作用域,任何变量 (函数也可以视为变量),假设没有在函数作用范围内找到,就会向外查找,如果在全局作用域都没有找到,报错RefrenceError
5,4 规范
由于我们所有的全局变量都会绑定到我们的 window 上。如果不同的is 文件,使用了相同的全局变量,冲突~>如果能够减少冲突?
jQuery.XXX
$.XXX
// 唯一全局变量
var Zyy = {};
// 定义全局变量
Zyy.name = 'kuangshen', Zyy.add = function (a, b) {
return
a + b;
}
把自己的代码全部放入自己定义的唯一空间名字中,降低全局命名冲突的问题
jQuery
7 局部作用域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
}
在 ES6 引入了常量关键字const
const PI ='3.14';// 只读变量
console.1og(PI);
PI ='123', // TypeError: Assignment to constant variable.
console.1og(PI);
4.3、 方法的定义和调用
定义方法
1 方法就是把函数放在对象的里面,对象只有两个东西 : 属性和方法
var zyy = {
name: '王千',
bitrh: 1996,
// 方法
age: function () {
// 今年 - 出生的年
var now = new Date().getFullYear();
return now - this.bitrh;
}
}
//属性 zyy.name
//方法,一定要带zyy. age()
2 或者 将方法分开写,让对象的属性值调用方法。
function getAge() {
// 今年 - 出生的年
var now = new Date().getFullYear();
return now - this.bitrh;
}
var zyy = {
name: '王千',
bitrh: 1996,
// 方法
age: getAge
}
java :this是无法指向的,是默认指向调用它的那个对象;
javascript:
3 apply 在js 中可以控制 this 指向
function getAge() {
// 今年 - 出生的年
var now = new Date().getFullYear();
return now - this.bitrh;
}
var zyy = {
name: '王千',
bitrh: 1996,
// 方法
age: getAge
}
var ls= {
name: '李四',
bitrh: 2000,
// 方法
age: getAge
}
getAge.apply(b,[]);
//this,指向了ls,参数为空
调用
getAge.apply(ls,[])
VS
ls.age()
主动调用 和被动调用
5.内部对象
标准对象
typeof 123
"number"
typeof '123'
"string"
typeof true
"boolean"
typeof NaN
"number"
typeof []
"object"
typeof {}
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"
5.1 Date 日期类型
var now = new Date();//sat Jan 04 2020 10:47:06 GMT+0800 (中国标准时间)now.getFu11Year(; //年
now.getMonth();// 月0~11 代表月now.getDate(); // 日now.getDay(;// 星期几now.getHours(); // 时
now.getMinutes(;// 分now.getSeconds();// 秒
now.getTime();// 时间戳 全世界统一 1970 1.1 0:00:00毫秒数
console.1og(new Date(1578106175991)) //时间戳转为时间
now = new Date(1578106175991)sat Jan 04 2020 10:49:35 GMT+0800 (中国标准时间)
now.toLocalestring
// 注意,调用是一个方式,不是一个属性!f toLocalestring() f [native code] ]now.toLocalestring()"2020/1/4 上午10:49:35"
now.toGMTstring(
"sat,04 Jan 2020 02:49:35 GMT"
Date()
如何使用 Date() 方法获得当日的日期。
Date.getFullYear()
使用 getFullYear() 获取年份。
Date.getTime()
Date.getTime() 返回从 1970 年 1 月 1 日至今的毫秒数。
Date.setFullYear()
如何使用 setFullYear() 设置具体的日期。
Date.toUTCString()
如何使用 toUTCString() 将当日的日期(根据 UTC)转换为字符串。
Date.getDay()
如何使用 getDay() 和数组来显示星期,而不仅仅是数字。
Date.Display a clock
如何在网页上显示一个钟表。
5.2 JSON
json 是什么
早期,所有数据传输习惯使用 XML 文件!
·JSONUavaScript Object Notation,J 对象简谱)是一种轻量级的数据交换格式简洁和清晰的层次结构使得JSON 成为理想的数据交换语言.易于人阅读和编写,同时也易于机器解析和生成,并有效地提升网络传输效率
在JavaScript 一切皆为对象、任何is 支持的类型都可以用SON来表示
格式:
对象都用 {}
数组都用[]
所有的键值对 都是用 key:value
对象转化为json字符串
var user = {
name: “wangqian”,
age: 3,
sex: ‘女’
}
{“name”:“qinjiang”,“age”:3,“sex”:“男”]
var jsonUser = JSON.stringify(user);
调用:jsonUser
json 字符串转化为对象 参数为 json 字符串
var obj = JSON.parse('{"name":"wangqian","age":3, "sex":"女"}');
调用:
console.log(obj)
5.3、Ajax
。原生的js写法 xhr 异步请求。jQuey 封装好的方法 $(“#name").ajax("axios 请求
6. 面向对象编程 class继承
javascript、Java、c#。。。。面向对象;javascript有些区别!
类: 模板 原型
对象: 具体的实例
在JavaScript这个需要大家换一下思维方式!
原型:
6.1 原型 xiaoming.proto = Bird;
var Student = {
name: "qinjiang",
age: 3,
run: function () {
console.log(this.name + " run....");
}
};
var xiaoming = {
name: "xiaoming";
}
//原型对象
xiaoming.__proto__ = Student;
var Bird = {
fly: function () {
console.log(this.name + " fly....");
}
};
// 小明的原型 是 student
xiaoming.__proto__ = Bird;
6.2 class 继承
关键字,是在ES6引入的class
定义一个类,属性,方法
class 示例
//定义一个学生类 属性和方法
class Student {
constructor(name) {
this.name = name;
}
hello() {
alert("hello")
}
}
class XiaoStudent extends Student {
constructor(name, grade) {
super(name);
this.grade = grade;
}
myGrade() {
alert('hi 我是一名小学生')
}
}
var xi = new XiaoStudent("xi");
// //调用 : xi.hello()
// xi.myGrade()
// xi.name
//ES6之后
//定义一个学生类 属性和方法
class Student {
constructor(name) {
this.name = name;
}
hello() {
alert("hello")
}
}
var xiaoming = new Student("xiaoming");
//调用: xiaoming.hello(); 对象小明的hello方法
//调用: xiaoming.name 对象小明的name属性
var lisi = new Student("lisi");
//lisi.hello()
// lisi.name
console.log(xi);
XiaoStudent {name: 'xi', grade: undefined}grade: undefinedname: "xi"[[Prototype]]: Studentconstructor: class XiaoStudentmyGrade: ƒ myGrade()[[Prototype]]: Objectconstructor: class Studenthello: ƒ hello()[[Prototype]]: Object
7 操作BOM对象(重点)
7,1 浏览器介绍
JavaScript 和浏览器关系?
JavaScript 诞生就是为了能够让他在浏览器中运行!
BOM:浏览器对象模型
IE6~11
Chrome
Safari
FireFox
Opera
三方
。QQ浏览器
。360浏览器
7.2window 窗口
window 代表浏览器窗口
window.alert(1)
undefined
window.innerHeight
window.innerwidth
window.outerHeight
window.outerwidth
// 大家可以调整浏览器窗口试试...
7.3 navigator 不建议用
navigator. appName
“Netscape"
navigator.appVersion
"5.0 (windows NT 10.0; wOW64) AppleWebKit/537.36 (KHTML,1ike Gecko)chrome /63.0.3239.132 safari /537.36"
navigator.userAgent"
Mozi11a/5.0 (windows NT 10.0;wOW64)ApplewebKit/537.36 (KHTML,1ikeGecko) chrome /63.0.3239.132 Safari/537.36"
navigator.platform
"win32"
数时候,我们不会使用
对象,因为会被人为修改.navigator
7.4 screen 屏幕信息
screen.width
57
screen.height
677
7.5 location (重要)
location
location 代表当前页面的URL信息
host: "www. baidu.com"
href:"https ://www.baidu.com/"
protocol:"https:"
reload:f reload() // 刷新网页
// 设置新的地址
1ocation .assign('https://blog. zyy.com/')
7.6 document 内容 表单
1 document.title
‘新标签页’
2 document.title=“haohao”
‘haohao’
3 获取具体的文档树节点 document.getElementById(‘app’);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
</script>
</head>
<body>
<dl id="app">
<dt>Java</dt>
<dd>JavaSE</dd>
<dd>JavaEE</dd>
</dl>
<script>
var dl = document.getElementById('app');
</script>
</body>
</html>
7.7 获取cookie
1 获取 cookie
document.cookie
guid=111872281.88375976493059340.1578110638877.133;monitor_count=1"
2 劫持 cookie 原理
www.taobao.com
服务器端可以设置 cookie: httpOnly
7.8 history浏览器的历史记录
history 代表浏览器的历史记录
history.back() //后退
history.forward() //前进
8 操作DOM对象(对象)增删改查
8.1核心
浏览器网页就是一个Dom 树形结构!
更新:更新Dom节点
遍历dom节点: 得到Dom节点
删除: 删除一个Dom节点
添加: 添加一个新的节点要操作一个Dom节点,就必须要先获得这个Dom节点
8.2获得dom节点
对应css选择器
1标签document.getElementsByTagName(‘h1’);
var h1 = document.getElementsByTagName('h1');
2通过元素iddocument.getElementById(‘p1’);
var p1 = document.getElementById('p1');
3通过类名document.getElementsByClassName(‘p2’)
var p2 = document.getElementsByClassName('p2');
4获取夫类的节点后.children获取所有子元素
var father = document.getElementById('father');
var childrens =father.children;
4以下是源代码:
<body>
<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 childrens =father.children;
/*
* father.children
HTMLCollection(3)[h1, p#p1, p.p2, p1: p#p1]
* 获取父节点下的所有子节点
*/
</script>
</body>
8.3更新节点
1 操作文本
id1.innerText=‘hello world’
document.getElementById(‘id1’).innerText=‘hello 122345’
id1.innerHTML=‘1243’
可以解析HTML文本标签
<div id="id1">123 </div>
<!--document.getElementById('id1')
得到此标签
-->
<script>
var id1 = document.getElementById('id1');
id1.innerText='hello world'
//结合获取节点 加 调用innerText 进行代码块内容的修改
// document.getElementById('id1').innerText='hello 122345'
</script>
2 操作CSS
id1.style.color=‘red’//属性使用字符串进行包裹
id1.style.fontSize=‘200px’
不需要方法 直接结合获取节点 加 调用style方法进行
document.getElementById(‘id1’).style.color=‘blue’
id1.style.paddding = ‘2em’
3删除结点
注意: 删除多个节点的时候,children 是在时刻变化的,删除节点的时候一定要注意!
//删除元素p1
var p1 = document.getElementById('p1');
//找到p1的父结点
var father = p1.parentElement;
//通过父节点调用removeChildren方法 向下查找 进行删除操作
// 调用 father.removeChild(p1);
<body>
<div id="father">
<h1>标题一</h1>
<p id="p1">p1</p>
<p class="p2">p2</p>
</div>
<script>
//删除元素p1
var p1 = document.getElementById('p1');
//找到p1的父结点
var father = p1.parentElement;
//通过父节点调用removeChildren方法 向下查找 进行删除操作
// 调用 father.removeChild(p1);
</script>
</body>
4插入节点
创建一个新的标签,实现插入
<body>
<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>
var js = document.getElementById('js');
var list = document.getElementById('list');
//调用:
//list.appendChild(js) 追加到后面
var newP = document.createElement('p');//创建一个p标签
newP.id = 'newP';
newP.innerText = 'Hello,bella';
list.appendChild(newP);
var myScript = document.createElement('script');//创建一个标签节点
myScript.setAttribute('type', 'text/javascript');
myScript.setAttribute('id', 'js123');
list.appendChild(myScript);
//操作 :list.appendChild(myScript) 讲myScript标签作为子结点添加到list列表内
// 创建一个Style 标签
var myStyle1 = document.createElement('style');//创建一个空style标签
myStyle1.setAttribute('type','text/css');//设置标签的属性
myStyle1.innerHTML='body{background-color:red;}';//设置标签的内容
document.getElementsByTagName('head')[0].appendChild(myStyle1)
//插入到head的头部
</script>
</body>
insert
9、操作表单(验证)
9.1表单是什么 form DOM 树
。文本框 text
。下拉框< select >
。单选框radio
。多选框checkbox
。隐藏域 hidden
。密码框password
。表单的目的: 提交信息
<body>
<form action="post">
<p>
<span> 用户名:</span> <input type="text " id="username">
</p>
<p>
</p>
</form>
<script>
var input_text = document.getElementById('username');
</script>
<!--input_text.value 获取输入框的值
input_text.value= 修改输入框的值
-->
</body>
9.2 获得要提交的信息
<body>
<form action="post">
<p>
<span> 用户名:</span>
<input type="text " id="username">
</p>
<p>
<span>性别:</span>
<input type="radio" name="sex" value="man" id="boy">男
<input type="radio" name="sex" value="women" id="girl"> 女
</p>
</form>
<script>
var input_text = document.getElementById('username');
var boy_radio = document.getElementById('boy');
var girl_radio = document.getElementById('girl');
</script>
</body>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<form action="https://www.baidu.com" method="post" onsubmit="return aaa()">
<p>
<span> 用户名: </span>
<input type="text" id="username" name="username">
</p>
<p><span>密码:</span>
<input type="password" id="input-password">
</p>
<input type="hidden" id="md5-password" name="password">
<!-- 绑定时间 onclick 被点击 -->
<button type="submit">提交</button>
</form>
<script>
function aaa() {
alert(1);
var uname = document.getElementById('username');
var pwd = document.getElementById('input-password');
var md5pwd = document.getElementById('md5-password');
// pwd.value = md5(pwd.value);
md5pwd.value = md5(pwd.value);
//可以校验判断表单内容,true就是通过提交 false就是阻止提交
}
</script>
</body>
</html>
10、初识jQuery及公式
10.1 公式:$(selector).action()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script src="jquery-3.7.0.js"></script>
</head>
<body>
<a href="" id="test-jquery">点我</a>
<!--公式:$(selector).action()-->
<script>
document.getElementById('id');
//选择器就是css的选择器
$('#test-jquery').click(function () {
alert('hello,jQuery');
})
</script>
</body>
</html>
10.2选择器
1 原生js,选择器少,麻烦不好记
document.getElementsByTagName();//标签
document.getElementById();//ID
document.getElementsByClassName(); //类
2 jQuery css 中的选择器它全部部能用!
$(‘p’).click(); //标签选择器
$(‘#id1’).click(); //id选择器’
$(‘.class1’).click() //cLass选择器
文档工具站:https://jquery.cuishifeng.cn
10.3事件
鼠标事件
键盘事件
其他事件
$(selector).action()
$('.class1').click() //cLass选择器
$('.class1').mousedown()(jQuery)
$('.class1').mouseenter()(jQuery)
$('.class1').mouseleave()(jQuery)
$('.class1').mousemove()(jQuery)
$('.class1').mouseout()(jQuery)
$('.class1').mouseover()(jQuery)
$('.class1').mouseup()(jQuery)
for循环
for 循环是一种常用的循环结构,用于重复执行特定的代码块一定次数。它的基本语法如下:
// 循环体
}
- 初始化:在循环开始前执行的语句,用于设置循环的初始状态,通常用于定义循环变量的初始值。
- 条件:每次迭代前都会进行判断的表达式,如果条件为真,则继续执行循环体;如果条件为假,则跳出循环。
- 迭代:每次循环体执行完后执行的语句,用于更新循环变量的值。
<script>
var i=0;
for (++i; i < 5; i++) {
console.log(i); // 打印当前循环变量的值
}
</script>
0
1
2
3
4
continue;
continue 是 JavaScript 中的一种控制流语句,用于跳过当前循环中的剩余代码并进入下一次迭代。它通常用于循环语句中,如 for 循环或 while 循环。
当程序执行到 continue 语句时,会立即结束当前循环的当前迭代,并跳到下一次迭代开始的地方。换句话说,它会终止当前迭代的剩余代码,然后继续执行下一次迭代。
以下是一个示例,展示了 continue 语句的使用:
for (var i = 0; i < 5; i++) {
if (i === 2) {
continue;
}
console.log(i);
}
上述代码中,我们使用 for 循环打印了数字 0 到 4,但当 i 的值为 2 时,使用 continue 跳过了当前迭代,所以数字 2 并未被输出。输出结果如下:
Copy code
0
1
3
4
``
在这个示例中,当 i 等于 2 时,continue 语句被执行,导致剩余的代码不被执行,直接跳到下一次迭代。因此,数字 2 并未被打印出来。
需要注意的是,continue 只会跳过当前循环的剩余代码,不会终止整个循环。如果希望完全终止循环并跳出循环体,可以使用 break 语句。
<script>
var num = 10;
for (var i = 0; i < num; i++) {
if (i > 3 && i < 9) {
alert(++i);
} else {
alert(i++);
}
i++;
}
0
3
7
9
打印乘法表
for (var j = 1; j < 10; j++) {
var str = '';
for (var k = 1; k < 10; k++) {
str = str + k + '*' + j + '=' + k * j + ' ';
}
console.log(str);
}
参数 :
<script>
function func1(a){
return "hello";
}
var aaa =func1(1);
alert(aaa);
</script>
弹出
hello
- javscript函数的参数是可变长的,重名的函数会覆盖之前的函数日
- 函数体中可以调用其它函数,函数可以被无上限次调用,
- 有返回值的函数,不使用变量接收也不会报错
- 没有返回值的函数,使用变量接收不会报错,但是默认赋值undefined
- jayasgript不需要进行参数和返回值类型的声明,其它编程语言通常需要声明
- 函数(函数 かんすう)也称为方法(メソード).method
- 有参数的函数原则上讲,参数个数没有上限
- return语句会中止有参函数的运行,如果希望无返回值函数结束运行,可以使用return;
- 传入参数大小/小于定义参数个数时,程序不会报错。
- 函数体中,传入参数却未使用的情况,程序不会报错
- 参数个数不同的情况下,函数名可以重复。
- 函数体中可以调用其它函数,函数可以被无上限次调用
- JavaScript当出现错误时,不会往下运行
- JavaScript函数传入参数个数小于/大于定于函数参数个数时不报错