JavaScript

最新推荐文章于 2022-05-08 20:29:37 发布

埋首沉迷.

最新推荐文章于 2022-05-08 20:29:37 发布

阅读量239

点赞数 2

分类专栏： Web前端文章标签： JS

本文链接：https://blog.csdn.net/weixin_45335208/article/details/102952729

版权

Web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

JavaScript

一、JavaScript基础

1.JavaScript写在哪

在html文件中存放在标签中

外部的 js 文件

<script type='text/javascript' src='...'></script>

Script 标签里

<script>
	alert('Hello World!');	// 常用调试方法
	console.log('Hello World!');
    //在此之中不允许写<\/script>,要转义<\/script>
</script>

<script>标签位置:

hand里面
body结束标签之前（推荐）

2.声明关键字(声明变量)

var a;		//声明变量，以前常用，在ES6之前是唯一的声明方式，存在缺点于不足，变量提升。(不推荐)
let b;		//ES6新出，声明变量方式，非常好用，几乎没有缺点(推荐)
const c;	//ES新出，声明常量，不能修改它的值(推荐)。常量名推荐全大写，比如： const NAME;

可以一次性声明多个变量，用英文逗号分隔，可以在声明的过程中赋值；比如： var a,b,c;或者let x,y,z;
JS严格区分大小写，每一行完整语句后面加分号，变量名不能使用关键字和保留字
变量命名规范：变量采用驼峰命名法： oBox, aList
常量命名规范：常量采用全字母大写加下划线拼接： MAX_NUMBER, FIRST_LINE

3. 获取标签节点

document.getElementById("box");			//返回ID名为box的元素
document.getElementsByClassName("box");	//返回类名叫box的元素的·集合·
document.getElementsByTagName("li");	//返回标签名叫li的元素的·集合·
document.getElementsByName("box");		//返回name名叫box的元素的·集合·

新加

document.querySelector(".box");		//用CSS的选择器选择方式返回满足条件的第一个元素
document.querySelectorAll(".box li");	//用CSS的选择器选择方式返回满足条件的所有的元素集合
document.documentElement;		//返回html元素
document.title；		//返回页面标题
document.body;		//返回body元素
//...等等，不一而足，并且可以用上面的方法选中

注意大小写，理解是否有s，当找不到的时候会返回null，获取的集合通过索引获取单个元素，索引从零开始
其中注意获取标签节点的document，它是文档对象模型DOM，可以替换成任何标签节点

4.外部JS的加载与延迟加载

外部JS的引入方式和link引入外部css相似，但是要用script标签和结束标签

<script type='text/javascript' src='path'></script>

此时JS标签的位置决定了JS代码的加载顺序。浏览器是从上到下依次执行的，当页面读取到script标签的时候，会阻塞进程，立刻请求读取内容，执行代码，所以可能存在页面元素还没有构造的可能。通常情况下JS的代码需要延迟到页面的元素加载完全后执行

方法1：添加defer属性，不阻塞进程，延迟到页面加载完成执行

<script type='text/javascript' src='path' defer></script>

方法2：添加async属性，不阻塞进程，加载完成立即执行(不推荐)

<script type='text/javascript' src='path' async></script>

5.简单事件

(1)事件绑定window.onload

为了解决javascript执行的时候可能页面还没有加载的问题

window.onload = function(){console.log("页面已经加载完了")}；

(2)单击事件.onclick

<body>
    <div>事件</div>
    <script>
        let box = document.querySelector("div");
        box.onclick = function(){
            console.log("单击事件");
        };
    </script>
</body>

(3)双击事件.ondblclick

box.ondblclick = function(){
	console.log("双击事件");
};

(4)鼠标移入事件.onmouseenter

box.onmouseenter = function(){
	box.style.color = "red";
};

(5)鼠标移出事件.onmouseleave

box.onmouseleave = function(){
	box.style.color = "black";
};

(6)下拉框改变事件.onchange

<body>
    <select name="abbr">
        <option value="bj">北京</option>
        <option value="ts">唐山</option>
    </select>
    <script>
        let a = document.querySelector("select");
        a.onchange = function(){
            console.log("内容变化了")
        };
    </script>
</body>

(7)窗口改变事件window.onresize

window.onresize = function(){
	console.log("窗口变化了")
};

6.JS修改样式

(1)单个样式修改

<body>
    <div class="box">样式修改</div>
    <script>
        let box = document.querySelector(".box");
        box.style.color="red";
        box.style.backgroundColor="yellow";
        
        let a = "color";
        let b = "red";
        box.style[a]=b;		//与上一种效果相同 
    </script>
</body>

注意第二种写法要用驼峰命名法：带减号连字符的注意去掉减号连字符，第二个单词以及后面的单词首字母大写

(2)多个样式修改

<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
    <style>
        .box{
            width:100px;
            height:50px;
            background:yellow;
        }
    </style>
</head>
<body>
    <div class="box">样式修改</div>
    <script>
        let box = document.querySelector(".box");
        box.style.cssText = "width:50px; background:red;";
        box.style.cssText = "background:green;";
    </script>
</body>

注意多次修改时，只会保留最后那次的修改，前面做的修改不保留，上例并没有改变宽度

7.JS显示方案

（1）修改/获取标签内的内容innerHTML

innerHTML: 支持标签

innerText: 不支持标签

可支持读取和修改

let box = document.getElementById("box");
console.log(box.innerHTML);		//读取
box.innerHTML = box.innerHTML + 1;		//修改

(2)警告框输出window.alert()

window.alert("12345");

(3)写入浏览器控制台console.log()

console.log("12345");

8.属性操作

(1)合法属性

<script>
        // 获取元素
        var box = document.querySelector(".box");
        // js操作标签属性（增删改查）
        // 合法属性
        // 增
        // box.className = "box";
        // 删
        // box.removeAttribute("class");
        // 改
        // box.className="test";
        // 查（获取）
        // console.log(box.className)
</script>

(2)自定义属性

<script>
        // 获取元素
        var box = document.querySelector(".box");
        // js操作标签属性（增删改查）
        // 自定义属性
        // 增
        box.setAttribute("hh", "ww");
        // 改
        box.setAttribute("hh", "tt");
        // 查(判断）
        console.log(box.hasAttribute("hh"));
        // 删
        box.removeAttribute("hh");
    </script>

(3)获取value值

let key = document.getElementById("box").value;

二、数据类型

1.数值(Number)

整数和小数

特殊的数：NaN（not a number，不是一个数）,当我们计算或者操作失误的时候，报错之外的解决方案，返回NaN，比如0/0

2.字符串(string)

字符串拼接

let str1 = "你";
let str2 = "好";
let str3 = str1 + str2;//"你好"
let str4 = "你"+str2;
let str5 = "你"+"好";

ES6模板字符串：利用 `和${}进行组合拼接字符串

let name = `志昊`;
let age = 18;
let words = `我的名字是${name},今年${age}岁~,虚岁${age+1}`;

3.布尔值(boolean)

true和false

4.未定义(Undefined)

这种数据类型只有一个值是undefined，当申明变量的时候没有初始化，它的值会被默认赋值为undefined

5.空(Null)

null类型只有一个值是null，null的含义是空对象，当我们定义变量准备用于保存对象，最好将变量初始化为null，这样在未赋值的情况下检测变量类型就为"object"，从而保证了类型的统一

let obj = null;
typeof obj;//"object" 指未被赋值的初始化对象
//此时obj如果变成了其他对象也能保证变量保存的数据类型的统一

6.对象(Object)

JS中的对象是：一个由多个属性构成的属性集合。

属性间没有先后顺序,以逗号分隔

属性由两部分构成：属性名:属性值，

属性名可以是任意字符串，包括空字符串

var yinshi = {name:"志昊",age:18,"":"空字符",18:"cm"};
console.log(yinshi);		//{name:"志昊",age:18}
console.log(yinshi.age);	//可以直接通过.的方式获取对象值
console.log(yinshi."");		//报错，语法错误
console.log(yinshi[""]);	//"空字符"
console.log(yinshi.18);		//报错，语法错误
console.log(yinshi[18]);	//"cm"

推荐使用[]形式获取属性值，用.会产生意想不到的错误或者不利于维护

三、运算符

1.算术运算符

算术运算符有：+ 、- 、 * 、 / 、 %、++、–

加法有两个含义：拼接或者加

3 - true;	// 3-1=2
3 - false;	// 3-0=3
3 - null;	// 3-0=3
"3" + 3;	// "33"
3 - undefined;	// NaN
a = 5;
a++;	//先返回值，后加一
++a;	//先加一，后返回值

2.赋值运算符

赋值运算符有： = 、+=、-=、 *=、/=、

3.比较运算符

比较运算符有: >、>=、<、<=、、=

===：全等，数值和数据类型均需要相同

4.逻辑运算符

逻辑运算符有：&&（与）、||（或）、! （非）

0 undefined null NaN false “”，这些结果为false，其余为true

一切数据类型都可以求逻辑非，结果将强制转换成布尔型数据

5.类型转换

数值布尔字符串对象 null undefined都可以强制类型转换，但是转换目标一般是数值，布尔，字符串

转字符串:

任何类型变量转字符串可以简单理解为将变量值加上引号

底层是对变量使用toString方法

在不理解的情况下在控制台打出(""+变量)测试

({}).toString();//加括号是因为区分对象与代码块，此代码与下一行值一样
""+{};//"[object Object]"
""+null;//"null"
""+undefined;//"undefined"
""+[1,23,3];//"1,23,3"去中括号
""+123123;//"123123"
""+NaN;//"NaN"
“”+false;//“false”

转布尔型：

Boolean()传入变量

0 NaN “” null undefined 直接转换成false，其余先转换成字符串再转布尔，其余都是真，这是判断的基准
```
Boolean({});//true
!!{};//等价上，true
```
转数值

Number()传入变量

null和""和false会转成0，true会转成1，“Infinity"和”-Infinity"会转换成Infinity和-Infinity，

其余都是调用toString()如果是数值形式，就转数值，不然就是NaN
```
Number("123");//123
+123;//同上等价，强制转数值或者-
```

四、控制流程

1.if-else if-else

let name = "dx";
if(name == "zzh"){
    console.log("hello zzh!");
}else if(name == "dx"){
    console.log("hello dx!");
}else{
	console.log("who are you!");
}

2.三目运算

name = "zzh";
if(name == "zzh"){
	console.log("hello zzh!");
}
// 优化
if(name == "zzh")console.log("hello zzh!");

name = "zzh";
if(name == "zzh"){
	console.log("hello zzh!");
}else{
	console.log("who are you!");
}
// 优化
name == "zzh"?console.log("hello zzh!"):console.log("who are you!");

3.switch

let sex = "man"
switch (sex){	//对sex判断
    case "man":	//如果不满足就寻找下一个case
    	console.log("左转");
    	break;	//后续的case不需要进行判断了
    case "woman":
    	console.log("右转");
    	break;
    default:	//以上都不满足的执行
    	console.log("回转");
}

4.for

for(let i = 0; i < 10; i++){
	console.log(`我是第${i}次执行的`);
}

5.for+点击事件

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
    <script>
        let btn = document.querySelectorAll("li");
        for(let i=0;i<btn.length;i++){
            btn[i].onclick = function(){
                console.log(i);
            };
        }
    </script>
</body>

6.while

// 先判断，在执行
let a = 0;
while(a<5){
	console.log(a);
	a++;
}

7.do-while

// 先执行，后判断
let a = 0;
do{
	console.log(a);
	a++;
}while(a<5)

五、字符串、数组方法

1.字符串方法

let str = "hello world!";
// length 包含空格
	console.log(str.length);    //12
//字符串可读不可写
	console.log(str[6]);    //w
	str[5]="6";
	console.log(str[6]);    //w
//大写
	console.log(str.toUpperCase()); //HELLO WORLD!
//小写
	console.log(str.toLowerCase()); //hello world!
//索引
/*第一个参数是想要查找的字符或者字符串，第二个可选参数是表示开始查找的下标
        查找成功返回第一个索引，否则返回-1*/
	console.log(str.indexOf("e"));  //1
	console.log(str.indexOf("e",1));    //1
	console.log(str.indexOf("e",3));    //-1
//切割：split
	console.log(str.split(" "));    //["hello", "world!"]
//切片：substring、slice
//substring：包前不包后,比较数值大小，小的在前面，负数变为0
	console.log(str.substring(1, 3));   //el
	console.log(str.substring(-2, 3));   //hel
	console.log(str.substring(3, -2));   //hel
	console.log(str.substring(1));   //ello world!
//slice：包前不包后，同python
	console.log(str.slice(1, 3));   //el
	console.log(str.slice(-2, 3));   //无
	console.log(str.slice(3, -2));   //lo worl
	console.log(str.slice(1));   //ello world!

2.数组方法

// 数组的创建
    let a = [];
    let b = new Array();
// 数组的操作方法
    let abc = [1,2,3];
// 数组长度
    console.log(abc.length);//3
// 数组可读和可写
    console.log(abc[0]);
// 添加
    abc[3]=4;   // 中间添加
    abc.push("a", "b"); // 末尾添加
    abc.unshift("c"); // 开头添加
    console.log(abc);
// 移除
    x = abc.pop();  // 末尾移除
    console.log(x);
    y = abc.shift();    // 开头移除
    console.log(y);
// 截取 splice
    console.log(abc);   // [1, 2, 3, 4, "a"]
// 传一个参数n，表示数组从0开始截取n位
    //abc.splice(2);
    //console.log(abc);   //[1, 2]
// 传两个参数x,y，表示数组从x下标开始删除y位
    //abc.splice(2,2);
    //console.log(abc);   //[1, 2, "a"]
// 传三个参数a,b,c（替换）,表示从a下标开始删除b位，并在删除位置添加c，c可以为多个
    //abc.splice(2,2,"f","g");
    //console.log(abc);   //[1, 2, "f", "g", "a"]
// 排序：sort() reverse() 通过ASCII码排序
    let num=[-1,0,-3,5];
    console.log(num.sort());    //[-1, -3, 0, 5]
    console.log(num.reverse());     //[5, 0, -3, -1]
// 数学排序
    num.sort(function(x,y){
        return x-y;
    });
    console.log(num);   //[-3, -1, 0, 5]
    num.sort(function(x,y){
        return y-x;
    });
    console.log(num);   //[5, 0, -1, -3]
// 拼接
    console.log(num.join("+")); //5+0+-1+-3

六、数学对象、定时器、日期对象

1.Math对象

圆周率π和自然常数e

Math.PI;//3.1415926...
//计算面积，概率都会用到
Math.E;//2.71828182...
//计算指数对数都会用到

算术平方根Math.sqrt

Math.sqrt(2)*Math.sqrt(2);//2.0000000000000004约等于2

指数Math.pow
```
Math.pow(2,3);//8(2的3次方)
```

取整方法

//floor和ceil和round和trunc（向下取整，向上取整，四舍五入，删除小数部分）
console.log(Math.floor(123.6)); // 123
console.log(Math.ceil(123.1)); 	// 124
console.log(Math.round(123.6)); // 124
console.log(Math.trunc(123.6)); // 123

随机数Math.random（返回大于0小于1的随机数）

console.log(Math.random()); 	// 0-1
console.log(Math.random()*10); 	// 0-10

随机数取整

console.log(Math.round(Math.random()*10));
console.log(parseInt(Math.random()*10));

自行封装的随机数

let myRandom=(Math.random()*(5-3)+3);
//let myRandom=(Math.random()*(n-m)+m);

正弦：Math.sin
```
Math.sin(Math.PI/6);//0.49999999999999994约等于0.5
```
此角度(0,Math.PI/2)形成直角三角形对边除以斜边的值
余弦：Math.cos
```
Math.cos(Math.PI/3);//0.5000000000000001约等于0.5
```
此角度(0,Math.PI/2)形成直角三角形邻边比斜边的值
正切：Math.tan
```
Math.tan(Math.PI/4);//0.9999999999999999约等于0.5
```
此角度(0,Math.PI/2)形成直角三角形对边比邻的边的值

2.定时器

延时器

function f(x,y){
	console.log(x+y);
}
// setTimeout(函数，延时时间，函数参数)，延时时间过后在执行函数
time1=setTimeout(f,1000,1,2);   // 3
// 清除定时器
clearTimeout(time1);

定时器

function f(x,y){
	console.log(x+y);
}
// setInterval(函数，延时时间，函数参数)，每隔一段延时时间执行一次函数
time2=setInterval(f,1000,2,3);    // 5
// 清除定时器
clearInterval(time2);

3.日期对象

获取时间

// 获取时间对象
var time = new Date();
// 当前的时间
console.log(time);
// 时间戳
console.log(time.getTime());
console.log(time.valueOf());
// 年月日时分秒,月份和星期都是从0开始计算
var year = time.getFullYear();
var month = time.getMonth()+1;
var date = time.getDate();
var hour = time.getHours();
var min = time.getMinutes();
var sec = time.getSeconds();
// 打印
console.log(year+"年"+month+"月"+date+"日"+hour+"时"+min+"分"+sec+"秒");
// 页面显示
document.body.innerText=year+"年"+month+"月"+date+"日"+hour+"时"+min+"分"+sec+"秒";

设置时间：将前面的get换成set传入参数就可以了，注意参数的范围与类型
倒计时的实现

通过定时器将获取日期时间，然后计算界限。
1. 刷新获取当前时间
2. 推算倒计时结束之后是多少时间(目标时间)
3. 然后定时器获取时间与目标时间比较，如果当前时间大于目标时间则执行回调函数，并结束定时器

七、函数

1.函数

将一系列代码或者操作行为打包到一起形成的东西就是函数，一块有特定功能得代码

function f(){}
console.log(foo）// ƒ f(){}

代码中function是申明函数的关键字，f就是函数的名字，指代的就是这个函数

2.分类

具名函数：有函数名得函数，能通过函数直接找打函数
匿名函数：没有写函数名得函数，通常直接写出来不行，无法调用，除非赋值给变量或者触发执行或者立即执行

function f(){}// 具名函数
document.onclick = function(){};// 匿名函数

3.函数调用

函数后面添加括号执行

匿名函数执行需要将匿名函数用()包裹

function f(){console.log("f执行了")}
f()		// 函数调用，执行，在控制台打印。函数执行默认返回undefined，同赋值操作
function(){console.log("匿名函数错误执行方法")}()	// 此时会报错
// 需要将匿名函数用()包裹
(function(){console.log("匿名函数正确执行方式，也叫IIFE")})();

4.函数参数

function f(a, b){
    console.log(a, b);
}
f(1,2);		// 1 2

5.return

function f(a, b){
    return a+b;
}
f(1,2);		// 3

埋首沉迷.

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript

JavaScript一、JavaScript基础1.JavaScript写在哪在html文件中存放在标签中外部的 js 文件<script type='text/javascript' src='...'></script>Script 标签里<script> alert('Hello World!'); // 常用调试方法 cons...
复制链接

扫一扫

专栏目录