JavaScript

JS

1. js导入方式

1.1 内部标签

<script>
</script>

1.2 外部引用

a.js

alert("hello js");

<script src="a.js">
        
</script>

2. 基本语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        //1. 定义变量
        var num = 1;
        //var name = "小红";
        //2. 条件控制
        if (2 > 1){
            alert("true");
        }
    </script>

</head>
<body>

</body>
</html>

3. 数据类型

Number:不区分小数和整数
NaN:不是一个数字
Infinity:无穷大
String:字符串
Boolean:布尔值
逻辑运算符:&& || !
比较运算符：==：类型不一致值一致，为true

====：绝对等于，类型一样，值一样

NaN与所有数值都不相等，包括自己

var arr = [1,2,3,"1",null,true];

new person = {
     name:"小红",
     age:20,
     tags:["sleep","reading"];
}
person.tags[0]//取值

4. 字符串

正常字符串使用' '或者" "
若要输出引号需转义字符\
使用`（tab上面）可以多行字符串编写

<script>
	'use strict';//使用严格查模式
    let name = "quinn";
	let age = 20;
    let msg = `您好,${name},${age//模版字符串
    console.log(msg);
</script>

var name = "quinn"
console.log(name.length);//获取字符串长度
console.log(name.toUpperCase());//小写转换为大写
console.log(name.toLowerCase());//大写转换为小写
debugger eval code:1:1
console.log(name.indexOf('n')) //获取指定字符串内容在字符串中首次出现的位置索引
console.log(name.substring(1,3)) //截取字符串1-2

5. 数组

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

var arr = [1,2,3,4];
console.log(arr);//打印数组
arr.length = 10;//给length赋值，数组长度会发生改变，赋值过大没有元素的为null，赋值过小会丢失元素
console.log(arr);
console.log(arr.indexOf(2));//3
indexOf(1);//0 通过元素获取下标

arr.slice(2);//3,4,...

push() && pop()

arr.push('a','b','c',5,6,7);//压入到尾部
>Array(10) [ 1, 2, 3, 4, "a", "b", "c", 5, 6, 7 ]
arr.pop();-->弹出尾部元素
>Array(9) [ 1, 2, 3, 4, "a", "b", "c", 5, 6 ]

unshift() && shift()

arr.unshift('q','e')-->头部压入
>Array(11) [ "q", "e", 1, 2, 3, 4, "a", "b", "c", 5, … ]
arr.shift() -->弹出头部
>Array(10) [ "e", 1, 2, 3, 4, "a", "b", "c", 5, 6 ]

sort()

>Array(7) [ 4, 7, 2, 3, 9, 5, 10 ]
arr.sort()-->排序
>Array(7) [ 10, 2, 3, 4, 5, 7, 9 ]

reverse()

>Array(7) [ 10, 2, 3, 4, 5, 7, 9 ]
arr.reverse()
>Array(7) [ 9, 7, 5, 4, 3, 2, 10 ]

concat()

>Array(7) [ 9, 7, 5, 4, 3, 2, 10 ]
arr.concat(['a','b'])-->并未改变数组，返回一个新的数组
>Array(9) [ 9, 7, 5, 4, 3, 2, 10, "a", "b" ]

join()

arr.join('-')-->分隔符
>"9-7-5-4-3-2-10"

多维数组

arr = [[1,2],[3,4],["5","6"]];
>Array(3) [ (2) […], (2) […], (2) […] ]
arr[1][1]
>4

6. 对象

js中所有的键都是字符串，值为任意对象
使用一个不存在的属性不会报错（undefined）

var person = {
    name:"quinn",
    age:23,
    score:0
}

赋值

person.name = "小红"

动态删除属性

delete person.name
>true
person
>Object { age: 23, score: 0 }

动态添加属性

person.email="123456@qq.com"
>"123456@qq.com"
person
>Object { age: 23, score: 0, email: "123456@qq.com" }

判断属性值是否在对象中

'age' in person
>true
'toString' in person//继承
>true

判断属性是否是自身拥有的

person.hasOwnProperty('toString')
>false
person.hasOwnProperty('age')
>true

7. 流程控制

if...else

var age = 10;
if (age >=18){
	console.log("你已经成年了");
}else {
	console.log("你还没有成年");
}

while

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

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

forEach

var age = [12,3,14,5,8,3,7];
   age.forEach(function (value) {
   console.log(value);
})

for...in

var age = [12,3,14,5,8,3,7];
for (var num in age){
	console.log(age[num]);
}

8. Map && Set

ES6新特性

var  map = new Map([['Tom',100],['Mary',90],['Jack',88]]);
var score = map.get('Tom');//get value by key
console.log(score);
//map.set('admin',88);-->新增和修改
//map.delete('tom');-->删除

Set:无序不重复集合

var  set = new Set([3,1,2,4,2,1,3]);
console.log(set);
//set.add(6);-->add
//set.delete(2);-->delete
//set.has(3);-->是否包含某个元素

9. iterator

ES6新特性
遍历数组

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

遍历Map

var  map = new Map([['Tom',100],['Mary',90],['Jack',88]]);
for (let x of map) {
    console.log(x)
}

遍历Set

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

10. 函数

10.1 函数的定义

function functionName(arg0,arg1,...,argn){
	statements
}

有参，无返回值

function sayHi(name,msg){
    alert("Hi"+name+","+msg);
}

sayHi("Jack","How are you");

有参，有返回值

function sum(num1,num2){
    return num1+num2;
}
var result = sum(1,2);

一个函数可以包含多个return语句

11. 复制变量值

var num1 = 10;
var num2 = num1;//num2是num1的副本，互不干扰

var obj1 = new Object();
var obj2 = obj1;
obj1.name = "Jack";
alert(obj2.name);//Jack

如果从一个变量向另一个变量复制基本类型的值，会在变量对象上创建一个新值，然后把该值赋值到为新变量分配的位置上
如果从一个变量向另一个变量复制引用类型的值，同样会把该值赋值到为新变量分配的位置上，不同的是，这个值实际上是一个指针，复制操作接收后，两个变量引用的是同一个对象。

12. BOM

BOM是浏览器模型，把浏览器当做一个对象看‘
BOM的顶级对象是window
BOM浏览器厂商在各自浏览器上定义的，兼容性较差
学习的是浏览器窗口交互的一些对象

12.1 window

alert("Warning");
confirm("Are you sure?");
prompt("What's you name?","Jack");

alert()

警告对话框

confirm()

确认对话框

prompt()

提示框

12.2 location

 window.location("http://www.quinn.com");
 alert(location.href);

href()

返回当前加载页面完整url

12.3 navigator

userAgent()

返回有客户机发送给服务器的user-agent头部的值

12.4 history

back()

后退

forward()

前进

go(a)

a = 1:前进一个页面 a = -1:后退一个页面

13. DOM

文档对象模型，把文档当做一个对象来看
顶级对象是document
主要学习的是操作页面元素
是W3C标准

13.1 标准模型

document:整个文档对象
element:元素对象
attribute:属性对象
text:文本对象
comment:注释对象

13.2 获取元素

根据ID获取

<div id=“time”>2023</div>
var timer = document.getElementById('time');

根据标签名获取

得到的是集合

<ul>
    <li>Java</li>
    <li>Java</li>
    <li>Java</li>
</ul>

var lis = document.getElementByTagName('li');

根据name属性获取

返回Element对象数组

根据class属性

返回Element对象数组

document.getElementByClassName('类名');

document.querySelector

根据指定选择器返回第一个元素对象

var firstBox = document.querySelector('.box');//#id

document.querySelectorAll

返回指定选择器所有元素对象
返回集合

var lists = document.querySelectorAll(.box)

获取body元素

document.body;

获取html元素

document.html;

14. 事件监听

通过html标签中的事件属性进行绑定

<input type="button" onclick='on()'>

function on(){
	alert("click...");
}

通过DOM元素属性绑定

<input type="button" id="btn">

document.getElementById("btn"){
	alert("click....");
}

posted @ 2023-08-19 19:52 Morita-desin 阅读(12) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

Quinn

JavaScript

JS

1. js导入方式

1.1 内部标签

1.2 外部引用

2. 基本语法

3. 数据类型

4. 字符串

5. 数组

6. 对象

7. 流程控制

8. Map && Set

9. iterator

10. 函数

10.1 函数的定义

11. 复制变量值

12. BOM

12.1 window

12.2 location

12.3 navigator

12.4 history

13. DOM

13.1 标准模型

13.2 获取元素

14. 事件监听

公告