前端三大件--JavaScript详解

Posted 2021-07-05 ꧁༺空༒白༻꧂

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了前端三大件--JavaScript详解相关的知识，希望对你有一定的参考价值。

javascript入门到实战

1、入门

1.1、引入JavaScript

内部标签
```
<script>
    //asasda
</script>
```
外部引入

a.js
```
//asda
```
test.html
```
<script src="a.js"></script>
```

1.2、基本语法

<script>
    const score = 71;
    if (score>60&&score<=70){
        alert("及格");//alert 在网页中弹窗
        console.log("嘿嘿");//控制台输出
    }else if (score>70&&score<=80){
        alert("优秀");
    }else{
        alert("其他");
    }
</script>

跟java的语法及其类似，重点是f12操作调试器

2、数据类型

大体上还是跟Java差不多，就写几个不一样的

跟Java差不多，需要注意的是不分整数和小数
只有null和undefined
- null 空
- undefined 未定义
数组
- 特别注意，数组下标越界：undefined，而不会报下标越界错误
对象
- 对象使用大括号{}
- 数组使用中括号[]

2.1、字符串

转义字符
```
\\'
\\n
\\t
\\u4e2d
\\x41
```

多行字符串编写

let msg='hello  asdad' +
            'asd' +
            'asd' +
            'ad'

模板字符串

let name="kongkong";
let age=9;
let msg='加油，${name}'

字符串长度
```
str.length
```
字符串不可变性

大小写转换

student.toUpperCase()//变成大写
student.toLowerCase()//变成小写

正则表达式

[)
student.substring(1);
student.substring(1,2);//从第下标1截取到2

2.2、数组

定义一个数组
```
let array=[1,2,3,4,5,6]
```
长度
```
array.length
```
通过元素获取下标索引
```
array.indexOf(2)
```
slice()截取数组的一部分
```
array.slice(xx,xx)
```

push(),pop()尾部

push:插入到尾部
pop:弹出尾部元素

unshift(),shift()头部

unshift():插入到头部
shift():弹出头部元素

排序sort()

["A","c","B"]
array.sort()
["A","B","C"]

元素反转reverse

["A","C","B"]
array.reverse()
["B","C","A"]

concat返回一个新的数组

["A","c","B"]
array.concat([1,2,3])
["A","C","B",1,2,3]

join连接字符串
```
["C","B","A"]
array.join('-')
"C-B-A"
```

多维数组

array=[[1,2],[3,4],[2,3]]
array[1][0]
2

2.3、对象

JavaScript中的所有键都是字符串，值是任意对象

对象赋值
```
person.name="kongkong"
```
使用不存在的对象属性，不会报错
```
person.name
```
删除属性
```
delete person.name
```
动态添加
```
person.oo="asdas"
```
判断属性是否在对象中
```
'age' in person
```

2.4、流程控制

if判断
while和do while循环
for循环

forEach循环（遍历每一个元素）

var age=[12,3,463,124,4,11,123]

age.forEach(function(value){
    console.log(value)
})

2.5、Map和Set

Map集

//对于过多的列表，每次取值的解决
//var names=["sa","asd","ads"]
//var score=["12","41","123"]

var map=new Map([['sa',12],['asd',41],['ads',123]]);
var name=map.get('tom');//通过key获取value
map.set('adin',123);//新增和修改
map.delect("tom");//删除

set：无需不重复的集合

set.add(2);//添加
set.delect(1);//删除
console.log(set.has(3));//是否包含

3、函数

函数定义

function()函数

function num(){

}

匿名函数

var a =funtion num(){

}//a()调用

作用域

局部

function b(){
   var x=1;
   ....
}

全局

var x=1;
function c(){
   .....
}

全局对象

var x='xxx';
alert(x);
alert(window.x);

let关键字

function a(){
     for(var i=0;i<100;i++){
           console.log(i);
     }
    console.log(i+1);//可以发现i即使出了整个作用域也可以继续运行
}

解决局部作用域冲突问题

function a(){
     for(let i=0;i<100;i++){
           console.log(i);
     }
    console.log(i+1);//Uncaught ReferenceError:i is not defined
}

const常量

用const定义的常量是不能被改变的，只可以读取

const PI='3.14';
console.log(PI);
PI='123';//TypeError

3.1、方法

定义方法

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

var kong={
    name='kong',
    bithrday:2000,
    //方法
    age:function(){
        var now=new Date().getFullYear();
        return now-this.bithrday;
    }
//属性
kong.name
//方法
kong.age()
}

通过apply方式调用,控制this的指向

function getAge(){
    var now=new Date().getFullYear();
    return now-this.birth;
}

var kong={
    name='kong',
    birth:2000,
    age:getAge
}

var bai={
    name='kong',
    birth:2000,
    age:getAge
}

getAge.apply(kong,[]);//apply控制了this的指向，指向kong

3.2、日期

常用时间调用

    var now=new Date();
        now.getFullyear();//年
        now.getMonth();//月
        now.getDate();//日
        now.getDay();//星期几
        now.getHours();//时
        now.getMinutes();//分
        now.getSeconds();//秒
        
        now.getTime();//时间戳 全国统一的时间
        console.log(new Date(1578106175991))//当前时间
        
        now.toLocaleString()//当地时间字符串
        now.toLocaleString()//当前时间标准格式

3.3、JSON

什么是json
- 简洁和清晰的层次结构使得JSON称为理想对象
- 易于人阅读和编写，同时也易于机器解析
任何js支持的类型，格式：
- 对象用{}
- 数组用[]
- 键值对key:value

JSON字符串和JS 对象的转化

var user={
    name:"kong",
    age:3,
    sex:'男'
}
//对象转化为json字符串
var jsonUser=JSON.stringify(user);

//json字符串转为对象
var obj=JSON.parse('{"name":"kong","age":"2"}')

4、面向对象编程

类：模板
对象：具体的实例

var user={
    name:"kong",
    age:3,
    sex:'男'
}

var zhiye={
    name:"员工"
};

//原型对象
zhiye.__proto__=user;

class继承

//Es6的新特性
//定义一个学生类
class student{
    constructor(name){
        this.name=name;
    }
    hello(){
        alert('hello')
    }
}

class littleStudent extends student{
    constructor(name,score){
        this.name=name;
        this.score=score;
    }
    speak(){
        alert('小学生')
    }
}

var xiaoming=new student("xiaoming");
var xiaohong=new student("xiaohong");

5、操作BOM对象（重点）

BOM：浏览器对象模型

window 浏览器窗口

window.alert
ƒ alert() { [native code] }
window.alert(1)
undefined
window.innerHeight
787
window.innerWidth
167

Navigator 封装浏览器信息

Navigator.length
0
Navigator.name
"Navigator"
Navigator.caller
null

screen 屏幕尺寸

screen.width
1536
screen.height
864

location 当前页面的URL信息

hash: ""
host: "www.baidu.com"
hostname: "www.baidu.com"
href: "https://www.baidu.com/s?ie=UTF-8&wd=jkh&tn=88093251_22_hao_pg"
origin: "https://www.baidu.com"
pathname: "/s"
port: ""
protocol: "https:"

cookie

document.cookie

history 服务器的历史记录

history.back()//后退
history.forword()//前进

document 获取文本

document.title()

6、操作DOM对象

核心
- 更新：更新Dom节点
- 遍历dom节点：得到Dom节点
- 删除：删除一个Dom节点
- 添加：添加一个新的节点

获得dom节点

var h1=document.getElementsByTagName('h1');
        var p2=document.getElementById('p1');
        var kk=document.getElementsByClassName('kk');
        var father = document.getElementById('father');
        
        var child=father.children;//获取所有father下的子节点
        father.firstChild
        father.lastChild

更新dom节点

<div id="id1">

</div>

<script>
    var id1=document.getElementById('id')
</script>

操作文本

id1.innerText=‘456’ 修改文本的值
id1.innerHTML=‘
asa
’ 解析HTML

操作JS

id1.style.color='yellow';
id1.style.fontSize='20px';
id1.style.padding='2em'

删除节点

删除多个节点的时候，children一直在变化，也就是说删除了一个节点，下一个节点会依次顶替上一个节点

<div id="father">
    <h1>2</h1>
    <p id="p1">3</p>
    <p class="p2">4</p>
</div>
<script>
    var self=document.getElementById('p1');
    var father=p1.parentElement;
    father.removeChild(self)
    
    //假设先删除了第一条语句执行第三条语句的时候它就会报错，因为在第一条语句执行完毕后，第三条语句的存放位置会相应发生改变
    father.removeChild(father.children[0])
    father.removeChild(father.children[1])
    father.removeChild(father.children[2])
</script>

创建节点

<script>
    var newP=document.createElement('p');//创建一个P节点
    newP.id='newP';
    newP.innerText='hellword';
//创建一个标签节点
    var myscript=document.createElement('script');
    myscript.setAttribute('type','text/javascript');
     var mystyle=document.createElement('style');
    myscript.setAttribute('type','text/css');
    mystyle.innerHTML='body{backgroud-color:chartreuse;}'//设置标签内容
    document。getElementByTagName('head')[0].appendChild(mystyle)
</script>

插入节点(insertBefore)

var ee=document.getElementById('ee');
var js=document.getElementById('js');
var list=document.getElementById('list');
//要包含的节点，insertBefore(newNode,targetNode)
list.insertBefore(js,ee);

7、表单

文本框 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="man" id="boy">男
        <input type="radio" name="sex" value="woman" id="girl">女
    </p>
</form>
<script>
    var text=document.getElementById('username');
    var boy=document.getElementById('boy');
    var girl=document.getElementById('girl');

    //得到输入框的值
    text.value
    //修改输入框的值
    text.value='123'
    
    boy.checked;
    girl.checked=true;
</script>

md5加密

<form action="https://www.baidu.com/" method="post" onsubmit="return a()">
    <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 a() {
        alert(1);
        var name=document.getElementById('username');
        var pwd=document.getElementById('input-password');
        var md5pwd = document.getElementById('md5-password');

        md5pwd.value=md5(pwd.value);

        return true;
    }

</script>

8、jQuery

语法：$(selector).action()

    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
</head>
<body>
<a href="" id="test-jquery">点我</a>

<script>
    //选择器就是css
    $('#test-jquery').click(function () {
        alert('hello,world')
    })
</script>

选择器

$('p').click();
$('#id').click();
$('.class').click();

9、总结

1、重点是要多参考jquery中文文档学习

2、学好了可以去参考一下做一些小游戏

以上是关于前端三大件--JavaScript详解的主要内容，如果未能解决你的问题，请参考以下文章

前端三大件--JavaScript详解

8分钟为你详解ReactAngularVue三大前端技术

前端三大件之HTML篇

详解前端异步编程的六种方案

大前端驱动下MapGIS敏捷开发赋能行业

10个JavaScript代码片段，使你更加容易前端开发。

前端三大件--JavaScript详解

javascript入门到实战

1、入门

1.1、引入JavaScript

1.2、基本语法

2、数据类型

2.1、字符串

2.2、数组

2.3、对象

2.4、流程控制

2.5、Map和Set

3、函数

3.1、方法

3.2、日期

3.3、JSON

4、面向对象编程

5、操作BOM对象（重点）

6、操作DOM对象

asa

7、表单

8、jQuery

9、总结