前端JavaScript基础

javascript

1.数据类型

1.1 字符串

1.转义字符

\n
\t
\u4e2d    \u#### Unicode字符
\x41       Ascll字符

2.多行字符串编写

  var msg = `hello
        xiao
        ha
        `

3.模板字符串

let name= "xiao";
let age = 12;
let msg = `你好，${name}`
console.log(msg)

4.字符串长度

str.length

5.大小写转换

toUpperCase()
toLowerCase()

6.student.indexOf(“t”)

7.subString

console.log(student.substring(1)) //从第一个字符串截取到最后一个字符串
student.substring(1,3)

1.2 数组

Array可以包含任意的数组类型

var arr = [1,2,3,4,5]
arr.length //数组长度
arr[1]

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

1.indexOf，通过元素获得下标索引

arr.indexOf(1)
0

2.slice() 截取Array的一部分，返回一个数组，类似与String中的subString

3.push(),pop() 尾部

arr.push("a")  //添加到数组尾部
arr.pop		   //弹出尾部一个元素

4.unshift(),shift() 头部

unshift()   //添加到数组头部
shift()     //弹出头部一个元素

5.数组排序

arr.sort()
[1, 2, 3, 4, 5]

6.元素反转

arr.reverse()
[5, 4, 3, 2, 1]

7.concat()

[5, 4, 3, 2, 1]
arr.concat("a")
[5, 4, 3, 2, 1, "a"]
arr
[5, 4, 3, 2, 1]

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

8.连接符join

arr.join("-")
"5-4-3-2-1"

9.多维数组

arr = [[1,2],[3,4]]
[3, 4]

1.3对象

若干个键值对

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

var person = {
    name: "xiao",
    age: 3,
    email: "1534847647@qq.com",
    score: 12
}  

js中对象，{…}表示一个对象，键值对描述属性 xxx: xxx,多个属性之气那使用逗号隔开，最后一个属性不加逗号！

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

1. 对象赋值

person.name = "xiao"
"xiao"

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

person.haha
undefined

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

delete person.name
true

4. 动态的添加，直接给新的属性添加值

person.hah = "haah"
"haah"

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

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

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

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

1.4流程控制

1. if判断

var age = 3
if (age >3 ){
   alert("haha")
   }else {
	alert("wawa")
}

2. while循环，避免程序死循环

   var age = 3;
while (age< 100){
    age = age+1;
    console.log(age)
}

do{
    age = age+1;
    console.log(age)
}while (age< 100)

3. for 循环

for (var i = 0; i < 100; i++) {
    console.log(i)
}

4. forEach循环

var age = [12,2,3,4,5,6]
age.forEach(function (value) {
    console.log(value)
})

1.5 Map和Set

Map:

var map = new Map([["tom",100],["rose",50],["jack",60]])
var name = map.get("tom")  //通过key获得value
console.log(name)		
map.set("json",50)		//添加
map.delete("tom")		//删除

Set:无序不重合的集合

set.add(2)
set.delete(1) 
console.log(set.has(3))  //是否包含这个元素

1.6 iterator

遍历数组

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

遍历map

var map = new Map([["tom",100],["rose",50],["jack",60]])
for (let x of map){
    console.log(x)
}	

遍历set

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

2.函数

2.1 定义函数

定义方式一

绝对值函数

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

一旦执行到return代表函数结束，返回结果!
如果没有执行return，函数执行完也会返回结果，结果就是undefined

定义方式二

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

调用函数

cb(-5)  //5

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

2.2 变量的作用域

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

假设在函数体中声明，则函数体外不可使用

function jj() {
    var x = 1;
    x= x+1;
}

规范：所有的变量定义都放在函数的头部，不要乱放，以便代码维护

全局函数

 var x = 1;
function f() {
    console.log(x)
}
f();
console.log(x)

全局对象window

var x = "xx";
alert(x);
alert(window.x)  //	默认所有的全局变量，都会默认绑定在window对象下

2.3 方法

定义方法

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

var xiao = {
    name: 'haha',
    birth: 2000,
    age: function () {
        var now = new Date().getFullYear();
        return now - this.birth;
    }
}
console.log(xiao.age())
console.log(xiao.name)

拆开

function getAge() {
    var now = new Date().getFullYear();
    return now - this.birth;
}
var xiao = {
    name: 'haha',
    birth: 2000,
    age: getAge
}
console.log(xiao.age())
console.log(xiao.name)

this无法指向的，是默认指向调用它的那个函数

apply

在js中可以控制this指向

function getAge() {
    var now = new Date().getFullYear();
    return now - this.birth;
}
var xiao = {
    name: 'haha',
    birth: 2000,
    age: getAge
}
getAge.apply(xiao,[])

3.内部对象

标准对象

typeof "123"
"string"
typeof 13
"number"
typeof true
"boolean"
typeof NaN
"number"
typeof []
"object"
typeof {}
"object"
typeof Math.abs
"function"
typeof undefined
"undefined"

3.1 Date

使用

var  now = new Date();
    now.getFullYear();
    now.getMonth(); //月 0-11
    now.getDate(); //日
    now.getDay();  //星期几
    now.getHours();
    now.getMinutes();
    now.getSeconds();

	now.getTime();  //时间戳  从1970 1.1 00:00:00开始
    console.log(new Date(1601261232902)); //时间戳转化为现在时间

转换

now = new Date(1601261232902)
Mon Sep 28 2020 10:47:12 GMT+0800 (中国标准时间)
now.toLocaleString() //获取本地时间
"2020/9/28 上午10:47:12"

3.2 JSON

在js中一切皆对象，任何js支持的格式都能用JSON表示

格式：

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

JSON字符串 和js对象转换

var user = {
    name: "潇",
    age: 15,
    sex: "男"
        }
var jsonUser = JSON.stringify(user) // 对象转换为jSON字符串 {"name":"潇","age":15,"sex":"男"}
var obj = JSON.parse('{"name":"潇","age":15,"sex":"男"}')

4.面向对象编程

定义一个类，属性，方法

class Student{
    constructor(name) {
        this.name= name;
    }
    hello(){
        alert("hello")
    }
}
var xiaoming= new Student("xiaoming");

class Student{
            constructor(name) {
                this.name= name;
            }
            hello(){
                alert("hello")
            }
        }
        class XiaoStudent extends Student{
            constructor(name,grade) {
                super(name);
                this.grade= grade
            }
            myGrade(){
                alert("小学生")
            }
        }
        var xiaoming= new Student("xiaoming");
        var xiaohong = new XiaoStudent("xiaohong");

5.操作BOM对象

BOM：浏览器对象模型

window

window代表浏览器窗口

window.innerWidth
1366
window.innerHeight
352
window.alert(1)
undefined

Navigator

Navigator,封装浏览器的信息

navigator.appVersion
"5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.135 Safari/537.36"
navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.135 Safari/537.36"
navigator.platform
"Win32"

screen

代表屏幕尺寸

screen.width
1366
screen.height
768

location

location代表当前页面的url信息

host: "www.baidu.com"
href: "https://www.baidu.com/"
protocol: "https:"
reload: ƒ reload() //刷新网页
location.assign('https://www.bilibili.com/')

document

document 代表当前页面 HTML DOM树

document.title
"百度一下，你就知道"
document.title="xiao"
"xiao"

获取具体的文档树节点

<div id="app">

    </div>

<script>
    var div= document.getElementById("app")
</script>

获取cookie

document.cookie
"Hm_lvt_b393d153aeb26b46e9431fabaf0f6190=1594627028,1594691111,1594705641"

history

代表浏览器的历史记录

document.forward() //前进
document.back()  //后退

6.操作DOM对象（重点）

DOM：文档对象模型

核心

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

​ 更新:更新Dom节点

​ 遍历dom节点:得到Dom节点

​ 删除:删除一个Dom节点

​ 添加:添加一个新的节点

要操作一个Dom节点，就必须要先获得这个Dom节点

获取DOM节点

<div id="father">
    <h1></h1>
    <div class="a1">a1</div>
    <div id="a2">a2</div>
</div>
<script>
    var h1 = document.getElementsByTagName('h1');
    var a1 = document.getElementsByClassName('a1')
    var a2 = document.getElementById('a2');
    var father = document.getElementById('father')

    var childrens = father.children;  //获取父节点以下的所有节点
</script>

更新节点

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

操作文本

id1.innerText='haha'  //修改文本的值
id1.innerHTML='<H1>SS</H1>' //可以解析html文本标签

操作js

id1.style.color = "red"

删除节点

<div id="father">
    <h1></h1>
    <div class="a1">a1</div>
    <div id="a2">a2</div>
</div>
<script>
    var self = document.getElementById('a2');
    var father = a1.parentElment;
    father.removeChild(self)

    //删除是一个动态的过程
    father.removeChild(father.children[0])
</script>

插入节点

获得某个节点，假设这个DOM节点是空的，我们通过innerHTML就可以增加一个元素，但是这个DOM节点已经存在元素，就不能这个干，会产生覆盖

追加

<p id="js">javascript</p>
<div id="list">
    <div id="se">javase</div>
    <div id="ee">javaee</div>
    <div id="me">javame</div>
</div>

<script>
    var js = document.getElementById('js')
    var list = document.getElementById('list')
    list.append(js)  //追加元素到后面
</script>

效果

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5cM9hlOC-1675044638943)(C:\Users\user\AppData\Roaming\Typora\typora-user-images\image-20200929093108129.png)]

创建一个新标签，实现插入

var js = document.getElementById('js');
var list = document.getElementById('list');

//通过js创建一个新标签
var newP = document.createElement('p');//创建一个p标签
newP.id= 'newP';
newP.innerText= 'hello'
//创建一个节点标签（通过这个属性，可以创建任意值）
var myScript = document.createElement('script')
myScript.setAttribute('type','text/javascript')

7.操作表单（验证）

表单的目的获取信息

获取要提交的信息

<form action="post">
    <p>
        <span>用户</span><input type="text" id="input">
    </p>
    <p>
        <span>性别</span>
        男<input type="radio" value="man" name="sex" id="boy">
        女<input type="radio" value="woman" name="sex" id="girl">
    </p>
</form>
<script>
    var input_text= document.getElementById('input');
    var boy_radio= document.getElementById('boy');
    var girl_radio= document.getElementById('girl');

    input_text.value //得到输入框的值
    input_text.value = '123' //修改输入框的值

    //对于单选框，多选框登固定的值，boy_radio.value只能获取到当前值;
    boy_radio.checked; //查看返回结果，是否为true，如果为true，则被选中
    girl_radio.checked = true;

</script>

提交表单

<form action="#" method="post">
    <p>
        <input type="text" id="username" name="username">
    </p>
    <p>
        <input type="password" id="password" name="password">
    </p>
    <!--绑定点击事件οnclick=""-->
    <button type="submit" onclick="a()">提交</button>
</form>
<script>
    function a() {
        var un = document.getElementById('username');
        var pwd = document.getElementById('password');
        console.log(un.value)
        console.log(pwd.value)
    }
</script>