JavaScript
文章目录
-
- 1、什么是 JavaScript
-
- 1.1、概述
- 2、快速入门
-
- 2.1、引入JavaSciprt
- 2.2、基本语法入门
- 2.3、数据类型
- 2.4、严格检查格式
- 3、数据类型详解
-
- 3.1、字符串
- 3.2、数组
- 3.3、对象
- 3.4、流程控制
- 3.5、map和set
- 3.6、iterator
- 4、函数
-
- 4.1、定义函数
- 4.2、变量的作用域
- 4.3、方法
- 5、内部对象
- 5.1、基本语法
- 5.2、JSON
- 5.3、Ajax
- 6、面向对象编程
- 7、操作BOM对象(重点)
- 8、操作DOM对象（重点）
- 9、操作表单（验证）
- 10、jQuery
- > 小技巧
1、什么是 JavaScript
1.1、概述
JavaScript是一门世界上最流行的脚本语言
Java、 JavaScript
10天—
一个合格的后端人员,必须要精通 JavaScript
### 1.2、历史
JavaScript的起源故事
https://blog.csdn.net/kese7952/article/details/79357868
ECMAScript它可以理解为是Javascript的一个标准
最新版本已经到es6版本-
但是大部分浏览器还只停留在支持es5代码上!
开发环境一线上环境,版本不一致
2、快速入门
2.1、引入JavaSciprt
1、 内部标签
<script>
//...
</script>
123
2、外部引入
abs.js
//...
1
test.html
<script src="abc.js"></script>
1
测试代码
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Titletitle>
<script src="js/qj.js">script>
<script type="text/javascript">
script>
head>
<body>
body>
html>
123456789101112131415161718192021222324
2.2、基本语法入门
<head>
<meta charset="UTF-8">
<title>Titletitle>
<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")
}
script>
1234567891011121314151617
浏览器调试必备须知
2.3、数据类型
数值，文本，图形，音频，视频。。。
浮点数问题
对象是大括号，数组是中括号~~
每个属性之间使用逗号隔开，最后一个不需要添加
//Person person = new Person(1,2,3,4,5);
var person = {
name:"qinjiang",
age: 3,
tags: ['js','java','web','...']
}
123456
在浏览器调试
person.name
> "qinjiang"
person.age
> 3
1234
2.4、严格检查格式
<head>
<meta charset="UTF-8">
<title>Titletitle>
<！--
前提：IEDA需要设置支持ES6语法
'use strict'；严格险查模式，预防JavaScript的随意性导致产生的一些问题,必须写在Javascript的第一行！
局演变量建议都使用 let 去定义~
-->
<script>
'use strict' ;
//全局变量
let = 1;
//ES6 let
script>
head>
12345678910111213141516
3、数据类型详解
3.1、字符串
console.log("\x41") ==> a
console.log(msg) ==> ‘你好呀，qinjiang’
3.2、数组
Array可以包含任意的数据类型
var arr = [1,2,3,4,5,6]; //通过下标取值和赋值
arr[0]
arr[0] = 1
123
1、长度
arr.length
1
注意：加入给arr.ength赋值，数组大小就会发生变化-，如果赋值过小，元素就会丢失
2、indexOf，通过元素获得下标索引
arr.indexof(2)
1
12
字符串的“1”和数字 1 是不同的
arr = [0,1,1];
3、slice()截取Array的一部分，返回一个新数组，类似于String中的substring
4、push()，pop()尾部
push：压入到尾部
pop：弹出尾部的一个元素
12
5、unshiift()，shiit()头部
unshift：压入到头部
shift：弹出头部的一个元素
12
常用的方法slice（截取），push（压入），pop（弹出），shift（压入首部），unshift（弹出首部），concat（拼接）
3.3、对象
JavaScript中的所有的键都是字符串，值都是任意对象
3.4、流程控制
if 判断
var age = 3;
if(age>3){ //第一个判断
alert('haha");
}else if(age<5) { //第二个判断
alert("kuwa~");
}else { //否则,
alert("kuwa~");
}
12345678
while循环,避免程序死循环
while(age<100){
age = age + 1;
console.log(age)
}
do{
age = age + 1;
console.log(age)
}while(age<100)
12345678
for循环
for (let i = 0;i< 100;i++){
console.Log(i)
}
123
forEach 循环
var age = [12,3,12,3,12,3,12,31,23,123];
//函数
age. ForEach(function (value) {
console.Log(value)
})
12345
forEach是ES5.1引入的
for…in
//for(var index in object) { }
for(var num in age){
if(age.hasownProperty(num)){
console.log("存在")
console.log(age[num])
}
}
1234567
3.5、map和set
ES6的新特性~
3.6、iterator
ES6的新特性~
使用iterator来迭代Map和Set
4、函数
4.1、定义函数
function(x){…}这是一个匿名函数，但是可以把结果赋值给abs，通过abs就可以调用函数！
方式一和方式二等价
![args[]](http://img.e-com-net.com/image/info8/f504ae44671940ea8525cd392a25819d.jpg)
问题：arguments包含所有的参数，我们有时候想使用多余的参数来进行附加操作，需要排除已有参数~
rest参数只能卸载最后面，必须用…标识（rest是自定义名称）
function aaa(a,b,…like){
console.log(like);
}
4.2、变量的作用域
假设在JavaScript中，函数查找变量从自身函数开始。由“内”向“外”查找。
假设外部存在这个同名的函数变量。则内部函数会屏蔽外部函数的变量。
这个是在JavaScript建立之初就存在的特性，养成规范，所有的变量定义都放在函数的头部，不要乱放，便于代码维护。
JavaScript实际上只有一个全局作用域，任何变量（函数也可以视为变量），假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，报错 RefernceError
规范
我们所有的全局变量都会绑定到我们的windows上。如果不同的js文件。使用了相同的全局变量。冲突 ~ >如果能够减少冲突?
把自己的代码全部放入自己定义的唯一空间名字中,上面。啊降低全局命名冲突的问题.
（jQuery库）
常量const
在ES6之前，怎么定义常量：只有用最全部大写字母命名的变量就是常量，建议不要修改这样的值。
4.3、方法
5、内部对象
5.1、基本语法
5.2、JSON
在JavaScript一切皆为对象，任何js支持的类型都可以用JSON来表示：number，String…
5.3、Ajax
6、面向对象编程
原型：
以前的继承
现在的继承
2、继承
本质：查看对象原型
原型链
7、操作BOM对象(重点)
8、操作DOM对象（重点）
获得DOM节点
这种都是原生代码，往后尽量用jQuery();
删除节点
注意，删除多个节点的时刻，children是在时刻变化的，删除节点的时候一定要注意。
插入节点
获得了某个DOM节点，假设这个DOM节点是空的，通过innerHTML就可以增加一个元素了，但是这个DOM节点已经存在元素了，就会产生覆盖。
效果：
创建一个新的标签，实现插入
9、操作表单（验证）
获取要提交的信息
提交表单，md5密码加密，表单优化（高级玩法 - hidden）
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<script src="https://cdn.bootcss.com/blueimp-md5/2.10.0/js/md5.min.js">script>
head>
<body>
<form action="" method="POST" onsubmit="return aaa()">
用户：<input type="text" id="uname" name="username" placeholder="用户名"/><br/>
密码：<input type="password" id="pname" name="userpassword" placeholder="密码"/><br/>
<input type="hidden" id="md5pwd" name="epassword"/>
<button type="submit">提交button>
form>
body>
<script>
function aaa(){
var u = document.getElementById('uname');
var p = document.getElementById('pname');
var md5pwd = document.getElementById('md5pwd');
md5pwd.value = md5(p.value);
//可以校验判断表单内容，true就是通过提交，false是阻止提交
return true;
}
script>
12345678910111213141516171819202122232425262728
不用按钮提交，一般都用表单级别的提交 ← ← ← 刮刮乐
10、jQuery
获取jQuery - 公式：$(selector).action()
公式：$(选择器).事件(事件函数)
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js">script>
head>
<body>
<a href="" id="test-jquery">点我a>
<script>
//选择器就是css的选择器
$('#test-jquery').click(
function(){
alert('holle，world');
}
)
script>
body>
12345678910111213141516171819
选择器
文档工具站：https://jquery.cuishifeng.cn/
事件
鼠标事件，键盘事件，其他事件
比如获取鼠标坐标：
<head>
<meta charset="UTF-8">
<title>Documenttitle>
<style>
#divMove{
width: 500px;
height: 500px;
border: 1px solid red;
}
style>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js">script>
head>
<body>
mouse: <span id="mouseMove">span>
<div id="divMove">
在这里移动试试：
div>
<script>
// 在网页加载完毕之后，响应事件
$(function(){
$('#divMove').mousemove(function(e){
$('#mouseMove').text('x:'+e.pageX+'y:'+e.pageY)
})
});
script>
body>
123456789101112131415161718192021222324252627
操作DOM
> 小技巧
1、巩固JS
- 看jQuery源码
- 看游戏源码
2、巩固HTML
- CSS —> 扒网站，全部下载下来，修改对应位置的样式，看效果