JavaScript笔记

Serendipity.912

已于 2024-06-24 00:40:41 修改

阅读量1.6k

点赞数 43

文章标签： javascript 笔记

于 2024-03-22 17:00:07 首次发布

本文链接：https://blog.csdn.net/2302_80951569/article/details/136944452

版权

一.基本使用

1.输入输出语句

01.alert[输出语句]

--alert用于在浏览器中弹出警告窗

alert("不是库蜜禁止访问")

-- console.log用于控制台输出信息

console.log("小伙子")

-- document.write用于在网页中输出内容

document.write("WSC 30"

02.[输入语句]

-- prompt在网页中弹出一个输入框

prompt("请输入你的银行卡密码")

-- confirm在网页中弹出一个确认框

confirm("你真的是库蜜吗")

2、引入方式

01.内行式

botton 按钮

οnclick="window.alert('文本')" 点击事件弹窗

02. 嵌入式

03. 外链式

二.基本语法

1.变量

01.变量的声明与赋值

1- 先声明后赋值

(1)声明变量

var boy;

var girl;

console.log(boy); //undefined(未定义的)

console.log(girl);

(2)为变量赋值

boy = "jack";

girl = "lily";

console.log(boy);//jack

console.log(girl);//lily

2-声明的同时并赋值

var myAge = 16;

var myHeight =188;

console.log(myAge);

console.log(myHeight);

02.let声明变量

---let是ES6引入的关键字，用来替代var关键字---

---(ES6指的是2015年推出的ECMAScrip语法)---

var boyFriend = "蔡徐坤"

var boyFriend = "吴亦凡"

var boyFriend = "李易峰"

console.log(boyFriend);

let girlFriend = "罗志祥"

girlFriend = "马嘉祺"

---let不能相同名字，俺可以修改，也可以用花括号

console.log(girlFriend);

{let girlFriend = "范丞丞"}

03.const声明变量

--- let和var的变量可以改变

--- const的变量不能改变是常量，必须要在声明时候赋值

const a = 3.14

a = 3.15

console.log(a);---这里不会报错单运行是会报错

--- 正确写法

const a = 3.14

console.log(a);

04.变量声明区别

(1)初始化要求不同

使用var和let声明变量时可以先不初始化，

而使用const声明变量时必须初始化。

(2)重复声明不同

使用var和let声明的变量可以多次被修改,

其值只与最近一次赋值一致，而使用const声明的变量,

在整个运行过程中不能修改初值

(3)对块级作用域的支持不同

使用一对花括号括起来的代码称为一个代码块所谓块级作用域，

就是指变量起作用的范围是当前代码块，离开当前代码块，变量就失效了。

使用var声明的变量支持全局作用域，使用let和const声明的变量支持块级作用域。

2.数据类型

01.数据类型分析

简单数据类型储存在栈内存中

复杂数据类型的内容储存在堆内存中，地址储存在栈内存中

02.基本数据类型

(1) Boolean--布尔类型

let flag1 = true;

let flag2 = false;

True False TRUE FALSE都是错误的

console.log(flag1);

let flag3 = "true"

console.log(flag

(2)numbr-数字型

let age = 18;

let date = "0306";

console.log(age)

console.log(date)

console.log(Number.MAX_VALUE)//最大值

console.log(Number.MAX_VALUE*2)//无穷大 Infinity

var a = 3-"b"

console.log(a);//NaN (Not a Number) NaN也属于数字类型

isNaN判断是否是一个非数字

如果是数字类型则为false

如果是非数字类型则为true

console.log(isNaN(a));//true

console.log(isNaN(111));//false

console.log(isNaN("abc"));//true

console.log(isNaN(Infinity));//false

console.log(isNaN("false"));//true

(3) string-字符串

let demo1 = "字符串"

let demo2 = '字符串'

let demo3 = `字符串`

let demo4 = "'字符串'"

console.log(demo1)

console.log(demo2)

console.log(demo3)

console.log(demo4)

console.log("111\'222")

(4) undefined-未定义型

表面声明变量还未赋值

let grade=undefined;

console.log(grade);//undefined

(5) null-空

var a =null;

console.log(a);//空

03.数据类型检测

-----isNAN 检测是否是一个非数字

-----typeof()

-----布尔类型的true，会在运算中变为1，false会变成0

---------加号是连接作用

04.数据类型转换

(1)将数据类型转换为布尔类型 Boolean()

------字符串和数字类型都会转换为布尔类型的true

-------空字符串转换为布尔类型为false，空格字符串转换为true

-------数字0转为布尔类型false

--------NaN转为布尔类型false

-------- underfind转为布尔类型false

------- null转为布尔类型false

(2)将数据转化为字符串类型 String() toString()

(3)将数据转换为数字类型 Nymber()

3.运算符

01.算数运算符

let a=10;

let b=20;

（1）加法

console.log(a+b);

（2）减法

let c=b-a;

console.log(c);

（3）乘法

console.log(c*b);

（4）除法

b = b/a;

console.log(b);

（5）取模运算取余数

console.log(26%5);

（6）幂运算

console.log(2**10);

02.字符串运算&隐式转换

（1）隐式转换：

当两个数据类型不同时，JS会按照既定的规则进行转换

（2）字符串运算符：

加号遇到字符串做拼接使用

03.赋值运算符

let a = 10;

let b = 20;

let c=a+b;

加等于/加并赋值

a+=b;//a=a+b

console.log(a);//30

console.log(b);//20

a-=b;//a=a-b;

console.log(a);//10

console.log(b);//20

a*=b;

a/=b;

a%=b;

a**=b;

这些都是一样的模式

04.比较运算符

（1） != 不等于

console.log(4!=5);//true

console.log(4!=4);//false

（2）== 等于差不多相等

console.log(4=="4");//true

（3）===全等于

console.log(4==="4");//false

（4）!==不全等于

05.逻辑运算符

&& 逻辑与运算符一假则假

|| 逻辑或运算符一真则真

06.三元运算符

条件表达式？表达式1：表达式2

如果条件表达式的值为true，则返回表达式1的执行结果

如果条件表达式的值为false，则返回表达式2的执行结果，

varage = prompt("请输入你的年龄")

console.log(age);

varres = age >= 18?"你已经是一名优秀的成年人啦":"你还是个宝宝"

document.write(res)

07.运算符优先级

//一元运算符>比较运算符>逻辑运算符（逻辑与>逻辑或）>赋值运算符

4.流程控制

01.选择结构

if造句

（1）if(条件表达式){代码}

（3）if....else语句（双分支）

if(条件表达式){代码1}else{代码2}

（3）if..else lf...else语句(多分支)

if(条件表达式1){

条件表达式1的结果

}else if(条件表达式2) {

条件表达式2的结果

}else if(条件表达式3) {

条件表达式3的结果

} else{出去123之后的结果}

02.循环结构

1.for语句
for(初始化变量;条件表达式;操作表达式){

循环体

}

for(var i=0; i<=100 ;i++){

console.log(1);

}

2.while语句
while(条件表达式){循环体}

var i=1;

while(i<=100){

console.log(i);

i++

}

3.do...while语句
do{循环体}while(表达式)

while语句先判断条件表达式的值，再判断条件表达式的值再执行循环体

do...while语句会无条件进行1次循环体，然后再判断条件表达式的值

再根据判断的值是否进行循环

let sum =1;

do{

console.log(sum);

sum++

} while(sum<=100)

03.跳转语句

1.break语句
for(var i=1;i<=5;i++){

console.log(吃);

break;

}

console.log();

break语句立即跳出整个循环，循环结束语句

2.continue
for(var n=1;n<=5;n++){

if(i==3){

console.log();

continue;

}

} console.log("吃")

continue语句用来立即跳出本次循环，也就是跳过continue语句后面的代码

继续下一次循环

04.循环嵌套

var n = prompt('输入金字塔的行数');

for (var i = 1; i <= n; i++) {

for (var k = 1; k <= n - i; k++) {

document.write(" ");

}

for (var j = 1; j <= 2 * i - 1; j++) {

document.write("❤");

}

document.write("<br/>");

}

var n = prompt("你想要造多少层金字塔?")

// 如果输入不是数字，就转化为NaNA

//确保用户输入的是纯数字

n = Number(n) && parseInt(n)

// console.log(Number(null));//0

// console.log(parseInt(null));//NaN

// console.log(parseInt("123.a"));//123

//console.log(Number("123.a"));//NaN

//逻辑与符号必须均满足Number和parseInt的效果

//如果有一方不满足，n的结果就是NaN

//那么isNaN(n)的值就为true。

if (isNaN(n)) {

1819

alert("请输入一个数字")

}

var str = ""

// 循环行数

for (var i = 1; i <= n; i++) {

// 循环空格

var black = n - i

for (var k = 0; k < black; k++) {

Str += " "

}

// 循环爱心

var star = i * 2 - 1

for (var j = 0; j < star; j++) {

str += "♥"

str += "\n"

}

console.log(str);

}

\n"是换行的转义符

六.数组

1.初始数组

数组是一种复杂数据类型

用于讲一组数组集合在一起

通过一个变量就可以访问一组数据

数组之间用逗号隔开

数组中的"索引/下标"，是从0开始计算的

//声明数组

let c =["ok","yes","no"]

//打印数组

console.log(c2);

//打印数组长度

console.log(class02.length);//3

//打印数组中下标为1的元素

console.log(c[0]);//ok

console.log(c[1]);//yes

//数组可以是任意类型的元素，字符串、数字、数据

let a=[1,2,3]

let b=['string',NaN,null,underfined]

2.创建数组

1.以new Array()的方式创建数组
var arr=new Array();

console.log(arr);// Array(0)

var arr=new Array(5);

console.log(arr);// empty(5)

var arr=new Array("aaa","bbb","ccc");

console.log(arr);

2.使用数组字面量创建数组
var mood=['sad',,,,,,'happy']

console.log(mood.length);//7

3.数组的基本操作

1.获取元素长度
数组名.length

2.修改数组长度
数组名.length=number

var arr = [0, 1, 2, 3, 4];

console.log(arr.length);

arr.length = 5;

console.log(arr);[0, 1, 2, 3, 4, empty]

arr.length = 3;

console.log(arr);//[0,1,2]

3.添加数组长度
arr[4] = 3;

console.log(arr);//[0,1,2,empty.3]

4.修改数组元素

arr[0] = 1;

console.log(arr);//[1,1,2,empty.3]

5.删除数组元素
//delete 数组名[index]删除数组中的某个元素值

delete arr[3];

console.log(arr);//[1,empty,2,empty.3]

6.遍历数组
let arr1 = [10, 20, 30, 40, 50, 60]

var sum = 0;

for (var i = 0; i < arr1.length; i++) {

sum += arr1[i]

//arr[0] 10 sum+10=0+10=10

//arr[1] 20 sum+20=10+20=30

//arr[2] 30 sum+30=30+30=60

}

console.log(sum);//210

let sorce = [97, 65, 43, 99, 60, 58, 36, 72, 85, 77]

var max = 0

var min = 100

for (var i = 0; i < score.length; i++) {

if (max < score[i]) {

max = score[i]

}

if (score[i] < min) {

min = scorel[i]

}

console.log(max);

console.log(min);

7.新增数组元素
//push在数组后添加元素

let arr3 =[1,2,3,4]

arr3.push=(5)

console.log(arr3);//[1,2,3,4,5]

//unshift在数组前添加元素

arr3.unshift(-2,-1,0)

console.log(arr3);//[-2,-1,0,1,2，3,4，5，6]

var arr4=[0,-5,19,50,2,7,10,11,-6,8,2]

var arr5=[]

for(let i=0; i<arr4.length;n++){

console.log(arr[i]);

if(arr4[i]>10){

arr5.push(arr4[i])

}

console.log(arr5);

4.二维数组

// 二维数组指的是数组元素的值是一个一维数组

var arr = [80, 100, 75]

var arr1 = [

[80, 100, 75],

[90, 67, 66],

[99, 87, 85]

]

//访问二维数组

console.log(arr1[0]);//[80,100,75]

console.log(arr1[0][0]);//80

//遍历二维数组arr1

for(let i = 0; i < arr1.length; i++) {

console.log(arr1[i]);

for (let j = 0; j < arr1.length; j++) {

console.log(arr1[i][j]);

}

//二维数组倒置

var arr1 = [

[1, 2, 3], [4, 5, 6], [7, 8, 9],]

var arr2 = []

// 遍历原数组的行

for (var i = 0; i < arr1[0].length; i++) {

//根据原数组的行，设置新数组的列

arr2[i] = [];

// 遍历原数组的列

for (var j = 0; j < arr1.length; j++) {

//j是原数组的列 i是数组的行!

// 颠倒位置

arr2[i][j] = arr1[j][i]

}

console.log(arr2);

5.数组迭代方法

1.map数组遍历器
let arr=[23,32,70,101,107]

let res=[]

for (let a=0; a<arr.length;a++){

res[a] =arr[a]+1

}

console.log(res);

//map:利用某种规则映射得到一个新数组

//map（）中需要传入一个回调函数作为参数

//在回调函数中定义需要map数组遍历方法做什么事情

//arr.map（（元素，下标）=>（return新元素）

let res1=arr.map(function (value,index){

//回调函数中一定要return

return value +1 //让每个元素+1

})

console.log(res1);

let res2=arr.map(function (value,index){

return value *2

})

console.log(res2);

2.filter数组过滤器
let arr = [-10, 0, 10, 20, 30]

let res = []

for (let i = 0; i < arr.length; i++) {

if (arr[i] > 10) {

res.push(arr[i])

}

console.log(res);

//filter：用于筛选数组中满足条件的元素，返回筛选后的新数组

//arr.filter（（value,index)=>(筛选条件))

//filter形成的新数组的长度！==原数组长度

//回调函数执行次数 == 数组长度

let res2 = arr.filter((value, index) => {

return value > 10

})

console.log(res2);

let arr1=[-40,35,9,26,0,99,77]

let res3 = arr1.filter((value, index) => {

return value%2==0

})

console.log(res3);

3.forEach数组遍历
forEach也是用于遍历数组

数组.forEach(function（vaule,index,arr){算法})

回调函数的执行次数=原数组长度

forEach没有返回值,不需要return

let arr = [1, 2, 3, 4, 5, 6]

let sum = 0;

for (let i = 0; i < arr.length; i++) {

sum += arr[i]

}

console.log(sum);

let sum1 = 0

// arr.forEach(function(value){

// sum1+=value

// })

arr.forEach(value => sum1 += value)

console.log(sum1);

4.some
Some用于判断数组元素是否符合条件

回调函数的执行次数! ==原数组长度

some函数返回一个布尔值

只要有一个元素符合函数体的判断条件，就返回true

如果没有一个元素符合函数体的判断条件，则返回fase

let year=[2001,2002,2003,2005]

let arr2 = year.some((item, index) => {

return item %4==0 &&item%100!=0

})

console.log(arr2);

5.every
some和every通历函数后返回的都是一个布尔类型的值，

如果有元素满足条件，some的值为true

当全部元素满足条件，every的值为true

let arr = [1, 2, 3, 4, 5, 6]

let res =arr.every(function (item){

return item>0

})

console.log(res);

let res1 =arr.every( (item) =>item>0

)

console.log(res1);

6.findindex
findindex用于返回第一个符合元素的下标

var arr = [9, 4, 0, -1, 3, -2, 7]

var index= arr.findIndex(function(b){

return b>0

})

console.log(index);

7.reduce
var arr = [66, 44, 33, 22]

var a = 0;

var b = 0;

for (let i = 0; i < arr.length; i++) {

a += arr[i]

}

b = a / arr.length

console.log(b);

var sum = arr.reduce( (sum, value) => {

return sum += value

})

var avg = sum / arr.length

console.log(sum);

console.log(avg);

console.log(index);

七.函数

1.初识函数

1. 函数的定义
函数用于封装完成一段特定功能的代码

相当于将一条或多条语句组成的代码块包裹起来

用户在使用时只需要关心参数和返回值，就能完成特定功能，而不用了解具体的实现

2.函数格式

function name(params){

}

function值这是一个函数语句

name是函数名

params是函数参数

{}内函数的具体功能

3. 函数的返回值
函数的返回值是指函数在调用后获得的数据

在定义函数时，可以为函数指定一个返回值，函数的返回值可以是任意类型的数据

在Js中使用return语句得到返回值并退出函数

{return 表达式}

2.函数内外变量的作用域

1.全局变量
在函数体外声明的变量或者在函数体内省略var关键字声明的变量

var a = 10

function demo() {

console.log(a);//a为全局变量，在函数体内可以被访问

}

demo()

console.log(a);//a为全局变量，在函数体外也可以被访问

2.局部变量
在函数体内利用var关键字声明的变量

function demo1(params) {

var b = 10 //b是var关键字声明的变量，为局部变量

console.log(b);//函数内部定义的局部变量b，可以在函数内部被访问

3. 块级变量
在es6标准中，新增的let关键字声明的变量为块级变量

一个花括号{}为一个块级

if (true) {

// let sex = 男;//let声明的变量sex为块级变量

console.log(sex);//块级变量sex可以在()内部被访问

}

//consoLe.log（sex）;//块级变量sex不可以在外部被访问

for (leti = 0; i < 5; i++) {

console.Log("循环内部" + i);

}

console.log("循环外部" + i);// i is not defind

4.js三种作用域
全局作用域：被全局变量所拥有：在{}外声明的变量

局部作用：被局部变量所拥有：在函数内定义的变量

块级作用域：被块级变量所拥有：在分支语句或者循环大括号中定义的变量

5.变量提升
//通过var声明的变量，在申明并赋值语句之前就可以被访问到

console.log(d);//undefined

var d = 20;

//因为变量提升，所以67-68行代码的执行效果，其实是71-73行。

var d;

console.log(d)

var d = 20;

3.函数进阶

1.封装函数
var fn = function sum(num1, num2) {

//在函数内部封装了一个打印语包

//调用此函数，就会执行打印语句

console.log(num1 + num2)

}

//sum(1.2)//3

fn(1, 2)//3

function sum(num1, num2) {

//在数内部求的一个和

//并将求得的和返回出去

//让函数外部可以拿到

return num1 + num2

}

console.log(sum(1, 2));

var fn = function sum(num1, num2) {

return num1 + num2

}

console.log(fn(1, 2));

2.匿名函数
var fn1 = function (num1, num2) {

return num1 + num2

}

console.log(fn1(1, 2));

3.前头函数
删除function关键字

在参数和函数体中间放上"=>"

var fn2 = function (num1, num2) {

console.log(num1 + num2);

}

fn2(1, 2)

//当函数体只有一句话时，可以省略大括号

var fn3 = (numl, num2) => console.log(num1 + num2);

fn3(1, 2)

//当函数只有一句代码并且函数的执行结果就是函数的返回值

//可以省略函数的大括号和return关键字

var fn4 = (numl, num2) => num1 + num2

console.log(fn4(1,2));

//当参数只有1个时，可以省略函数外部的小括号

var fn5 = numl => num1 + num2

console.log(fn5(12));

4.回调函数
//函数fn作为参数传递给参数cal

//然后在函数cal中调用函数fn

//此时，fn就是回调函数

function cal(numl, num2, fn) {

return fn(numl, num2)

}

console.log(cal(10, 20, function (a, b) {

return a + b

}));//17

console.log(cal(10, 20, function (a, b) {

return a * b

}));//200

console.log(cal(10, 20, function (a, b) {

return a % b

}));

//在cal函数中设置了回调函数后

//可以根据调用时传递的不同的函数参数（相加函数、相乘函数

//去实现不同的功能

//实现了函数的定制化

5.定时器函数

//setInterval()

//Interval:间隔，间隙

//“时间间隔“一到，代码就会热行一次

//setInterval(function,time)

// setInterval(function () {

// console.log("该上课了");

// }, 5000)

//setTimeout()

// 用来指某个函数或某段代码在多少毫秒以后执行

//setTimeout(function,time)

// setTimeout(function(){

// console.log("抢票");

// },3000)

//定时器函数属于异步代码。

//setTimeout指定的代码，必须等同步代码执行完毕后执行

// console.log(1);

// setInterval(function () {

// console.log(2);

// }, 0)

// console.log(3);

console.log("A");

setTimeout(function(){

console.log("B");

},20)

console.log("C");

setTimeout(function(){

console.log("D");

},0)

6.函数嵌套与作用域链
// 函数嵌套

var i = 10;

function fn1() {

var i = 20;

function fn2() {

function fn3() {

console.log(i);

}

fn3()

}

fn2()

}

fn1()

// 变量访问规则：就近原则

// 当在一个作用域中访问变量时，首先看当前作用域有没有声明

// 如果有则访问，没有则往上级作用域查找

// 直到达到顶端作用域没有时，程序报错

7.闭包函数
闭包的作用：解决变量污染问题，让变量被函数保护起来

// let count = 0;

// setInterval(function () {

// console.log(count++);

// }, 1000)

// 在这段代码中，count是一个很常用的变量名。

// 为了避免和其他位置的代码起冲突，可以使用一个函数将上面的代码包裹起来

function fn(){

let count = 0;

setIntervai(function(){

console.log(count++);

},1000);

}

//内部函数setInterval访问外部函数 fn定义的局部变量count

function fn(){

let count = 0;

function add() {

console.log(count++);

}

setIntervai(add, count)

}

// 内部函数add访问外部函数fn定义的局部变量count。

8.递归函数
递归函数是一个函数间接或直接的调用自身

// function func(){

// console.log(1);

// func()

// }

//需求:设置一个函数getSum()

//如果传入进去的是n

//return sum=n+(n-1)+(n-2)+..+ 1

//n=5

//sum = 5+4+3+2+1=15

// 循环写法

function getSum(n) {

var sum = 0

for (var i = 0; i <= n; i++) {

sum += i

}

console.log(sum);

}

getSum(5)

// 循环写法二

function getSum2(n) {

var sum = 0;

for (var n; n >= 0; n--) {

sum += n;

}

console.log(sum);

}

getSum(5)

//递归写法

function getSum3(n) {

//当n=1时

if (n == 1) {

return 1;

}

// 当前数组+比自己小1的数字

return n + getSum3(n - 1)

}

console.log(getSum3(5));

// 需求:设置一个函数，求阶乘(循环写法)

//传入一个n，返回n*(n-1)*(n-2)*...*1

function fn(n) {

var mulSum = 1;

for (var i = 1; i <= n; i++) {

//假设n=3;i=1 i=2 i=3

mulSum *= i

}

return mulSum

}

console.log(fn(4));//4*3*2*1=24

// 需求:设置一个函数，求阶乘(递归写法)

//传入一个n，返回n*(n-1)*(n-2)*...*1

function fn1(n) {

var mulsum = 1;

//设置终点

if (n === 1) {

return 1

}

return n * fn1(n - 1)

}

//n=4; 4*fn1(3); 4*3*fn1(2); 4*3*2*fn1(1); 4*3*2*1=24

console.log(fn1(4));

//斐波那契数列（每一项等于前两项之和）

// 求斐波那契数列(循环写法)

function getValue(n) {

var arr = [1, 1]

for (var i = 2; i < n; i++) {

//某一个数等于它前面两个数之和

//比如下标i = 6（下标为6）的数8 = 5（下标为5）+3(下标为4)

//i是下标，arr[i]对应的是数组值

arr[i] = arr[i - 1] + arr[i - 2]

}

console.log(arr);

return arr[arr.length-1]

}

console.log(getValue(10));

// 求斐波那契数列(递归写法)

function getValue(n) {

//设置终点

if(n===1 || n===2){

return 1

}

//未到终点

return getValue(n-1) + getValue(n-2)

}

console.log(getValue(10));

//n=4(需要知道在数组中第4个数是多少)

//getValue(4)=getValue(3)+getValue(2)

//getValue(4)=getValue(2)+getValue(1)+1

//getValue(4)=1+1+1

八.对象

1.介绍对象

1.对象（obiect）是什么
对象是一种复杂数据类型

（复杂数据类型的内容存储在堆内存中，地址存储在栈内存中

2.对象作用
以键值对的形式存储多个数据

3.对象
let obj = {

name: "张三",

age: 30,

sex: "男",

gfs: ["小花”“小美”，“小爱"],

sayHi: function () {

console.log("瓦达西见一个爱一个")

}

console.log(obj);//(name:'张三'，age:30，sex：'男'}

console.log(obj.name);//'张三'

console.log(obj.age);//30

console.log(obj.sex);//'男

console.log(obj.gfs);//['小花'，'小美'，'小爱']

console.log(obj.sayHi);

console.log(obj.sayHi());

4.对象新增
obj.bf = "李四"

console.log(obj);

5.对象修改
obj.bf = "王五"

console.log(obj);

6.对象删除
delete obj.age

console.log(obj);

7.对象通历
//遍历数组：for(let i=0; i < arr.length;i++){}

//遍历对象：for-in循环：for(let key in 对象名) {对象名[key]}

let score={

math:99,

history:80,

geology:70,

english:60

}

for (let key in score ){

console.log(key);// 打印属性名

console.log(score[key]);// 打印属性值

}

2.Math对象

// 1.内置对象:由JS作者提前编写好的对象，里面存储了一些属性方法，直接使用即可，

//2：Math数学对象、Date日期对象

//计算一个边长为5的圆的周长

const pi = 3.14

const r = 5

const C = 2 * pi * r

console.log(C);

//a.员周率：Math.Pi

console.log(Math.PI);

const c = 2 * Math.pI * r

console.log(c);

//b.绝对值：Math.abs()

console.log(Math.abs(-3.5));//3.5

//c.找最大/最小值：Math.ax/Math.min()

console.log(Math.max(1, 9, 5, 6, 3, 4, 6, 2));//9

console.log(Math.min(1, 9, 5, 6, 3, 4, 6, 2));//1

//d.幕运算：Math.pow（x，y）求x的y次方

console.log(Math.pow(2, 10));//1024

//e.四舍五入: Math.round()

console.log(Math.round(3.5));//4

console.log(Math.round(3.2));//3

console.log(Math.round(-3.5));//-3

console.log(Math.round(3.6));//-4

//f.向上取整：Math.ceil()

console.log(Math.ceil(3.1));//4

console.log(Math.ceil(-3.1));//-3

//g.向下取整：Math.floor()

console.log(Math.floor(-1.8))//-2

//h.生成0-1之间的随机小数：Math.random()

console.log(Math.random());

//生成一个0-100之间的随机整数

console.log(100*Math.random());

3.Date对象

时间戳：从1970年1月1日零时零分零秒到现在的毫秒数

//人以下三种写法都会得到时间戳

console.log(Date.now());

console.log(+new Date);

console.log(new Date().getTime());

1.获取年份
console.log(new Date().getFullYear());

console.log(new Date().getMonth());//范围0-11

console.log(new Date().getDate());//范围1-31

console.log(new Date().getDay());//范围0-6，星期天是0

console.log(new Date().getHours());

console.log(new Date().getMinutes());

let a = new Date().getFullYear();

let b = new Date().getMonth();

let c = new Date().getDate();

let d = new Date().getDay();

document.write("今天是" + a + "年" + b + "月" + c + "日")

2.设置年份
date.setFullYear(1998)

date.setMonth(8)

date.setDate(1)

3.获取年份
var year = date.getFullYear()

var month = date.getMonth()

var day = date.getDate()

4.打印年份
console.log(year);

console.log(month);

console.log(day);

4.Array对象

1.push(element) 在数组末尾添加一个元素
var course = ["web", "java"]

course.push("JavaScript")

console.log(course);//['web','java','JavaScript']

2.unshift(element)在数组开头添加一个元素
course.unshift("计算机基础")

console.log(course);//[计算机基础，'web','java',javaScript]

3.pop()删除数组中最后一个元素
course.pop()

console.log(course);//[计算机基础'，‘web'，'java']

4.shift（）删除数组第一个元素
course.shift()

console.log(course);//['web','java']

5.splice(start, deletCount)
arr.splice(3, 2)//从下标为3的数(4)开始，删掉后面两个数字

console.log(arr);//[1,2,3,6,7]

6.splice(start,deleteCount,item1,item2,item3)
arr.splice(4, 0, 999, 888, 777)//从下标为4的数字（6）开始，往后面满加一些元素

console.log(arr);//[1,2,3,6,999,888,777,7]

7.reverse():颠倒数组中元素的索引
var arr1 = [1, 2, 3, 4, 5, 6, 7]

arr1.reverse();

console.log(arr1);//[7,6,5,4,3,2,1]

5.String对象

1. 创建字符串对象

var str = new String("apple")

console.log(str);//{"apple"

2.数组类型检测

console.log(typeof (str));//object

var str1 = "banana"

console.log(typeof (str1));//string

3.根据字符串返回索引

// indexOf() 返回在字符串中首次出现的索引，没有则返回-1

// lastIndexOf() 返回在字符串中最后一次出现的索引，没有则返回-1

var str = "helloworld"

console.log(str.indexOf("o"));//4

console.log(str.lastIndexOf("o"));//6

// 根据索引返回字符串

// chatAt

console.log(str.charAt(7));//"r"

4.字符串截取

// slice (start)

console.log(str.slice(5));//"world"

// slice (start,end)//从start的下标截取到end的下标

console.log(str.slice(1, 4));//"ell"

console.log(str);//helloworld //截取不会改变原数组

5.字符串连接

// concat()

var str1 = "hello"

var str2 = ",world"

str1.concat(str2)

console.log(str1.concat(str2));//hello,world

6.大小写转换

//toUpperCase() 转化为大写

//toLowerCase() 转化为小写

console.log(str1.toUpperCase());//HELLO

console.log("HELLO".toLowerCase());//hello

7.替换

// replace(str1,str2) 将str2替换str1

console.log(str)//helloworld

console.log(str.replace("world", "js"));//hellojs

8.字符串分隔(将字符串转化为数组)

// split(分隔符)

console.log(str.split(""));//['h', 'e', 'l', 'l', 'o', 'w', 'o', 'r', 'l', 'd']

console.log(str.split());//['helloworld']

console.log(str.split("o"));// ['hell', 'w', 'rld']

九.DOM（上）

1.获取元素案例1-隔行变色

HTML 部分

<button id="btn">点我呀，给你点颜色看看</button>

<ul>

<li>给你点黄色看看</li>

<li>给你点绿色看看</li>

<li>给你点黄色看看</li>

<li>给你点绿色看看</li>

<li>给你点黄色看看</li>

</ul>

JS 部分

1.获取元素

let btn = document.getElementById("btn")

console.log(btn);

let liList = document.getElementsByTagName("li")

console.log(liList);

//document.getElementByID（"id属性值"）根据ID属性获取元素

//document.getElementByTagName（"标签名"）根据标签名获取元素

2.注册事件

btn.onclick = function () {

3.事件处理

//3.1遍历liList数组

for (let i = 0; i < liList.length; i++) {

//当遍历的i是偶数时

if (i % 2 == 0) {

console.log("黄色");

liList[i].style.backgroundColor = "yellow"

//当遍历的i是奇数时

} else {

console.log("绿色");

liList[i].style.backgroundColor = "green"

}

// 元素对象，事件属性 = 事件处理函数

// element.onlick(单击事件)=function(){}

// 元素样式操作

// Element.style.样式属性值="样式属性值"

// backgroundColor 设置元素的背景颜色

</script>

2.获取元素案例2-微博评论框

<head>

<title>Document</title>

<style>

.count {

color: red;

}

</style>

</head>

<body>

</div>

// 1.获取元素

let area = document.querySelector("#area")

let count = document.querySelector(".count")

console.log(area);

console.log(count);

//根据CSS选择器获取元素

//document.querySelector（"#id名"）通过id选择器获取元素对象

//document.queryselector（".类名"）通过class类选择器获取元素对象

//2.注册事件

//元素对象.事件属性=事件处理函数

// element.oninput(输入事件)=function(){}

area.oninput = function () {

//area.value.length//在输入框内输入的内容的长度

console.log(area.value.length);

count.innerHTML = area.value.length

}

// 设置内容

// element.innerHTML ="HTML内容'

3.获取元素案例3-开关灯

<body>

//1.获取按钮

//document.getElementByID（"id属性值"）根据ID属性获取元素

let btn = document.getElementById("btn")

//2.注册事件

//元素对象.事件属性=事件处理函数

// element.oninput(输入事件)=function(){}

btn.onclick = function () {

// body标签具有唯一性，可以直接通过点语法获取

document.body：获取文档中的body元素

let body = document.body

if (this.value == "关灯") {

body.style.backgroundColor = "black"

this.value = "开灯"

} else {

body.style.backgroundColor = "white"

this.value = "关灯"

}

// 元素样式操作

// element.style.样式属性名 =“样式属性值'

// backgroundColor 设置元素的背景颜色

</script>

4.元素内容操作案例1-真香

我王境泽就是饿死,死外边,从这里跳下去,也不会吃你们一点东西

</div>

function changeText(){

// var text= document.getElementById("text")

// console.log(text);

document.getElementById("text").innerHTML ="真香"

}

</script>

5.元素内容操作案例2-显示实时时间

<style>

p {

font-size: 50px;

text-align: center;

}

span {

font-weight: bolder;

color: blue;

}</style>

<body>

//这个函数对时间进行处理，如果的得到时间是一个个位数

//就进行一个十位数的补零操作

function time(t) {

if (t < 10)

t = "0" + t

return t

}

function a() {

//通过内置对象获取当前时间

let arr = new Date();

console.log(arr);

let arr3 = arr.getHours() + ":" + arr.getMinutes() + ":" + arr.getSeconds()

console.log(arr3);

let arr2 = time(arr.getHours()) + ":" + time(arr.getMinutes()) + ":" + time(arr.getSeconds());

console.log(arr2);

document.getElementById("clock").innerHTML = arr2

}

//定时器函数

//每隔1秒执行一a函数

setInterval(a, 1000)

</script>

6.元素样式操作案例1-改变盒子大小

<style>

.box{

width: 100px;

height: 100px;

background-color: pink;

margin: 50px auto;

}

</style>

</head>

<body>

let box=document.getElementById("box")

var i=0;

box.οnclick=function(){

++i

if(i%2){

this.style.width = '500px';

this.style.height = '500px';

this.innerHTML="大"

}else{

this.style.width = '100px';

this.style.height = '100px';

this.innerHTML="小"

}

</script>

7.元素样式操作案例2-单击按钮改变颜色

<body>

var btns =document.getElementsByTagName("button")

console.log(btns);

for (var i=0; i<btns.length;i++){

btns[i].οnclick=changeColor

}

function changeColor(){

for (var j=0;j<btns.length;j++){

if(btns[j]==this){

console.log(this);

this.style.backgroundColor="pink"

}else{

btns[j].style.backgroundColor="grey"

}

</script>

</body>

8.元素样式操作案例3-一闪一闪亮晶晶

</div>

let star = document.querySelector("#star")

// onmouseover 鼠标移入事件

star.onmouseover = function () {

// display =“none" 元素被隐藏

star.style.display = "none"

}

// onmouseout 鼠标移出事件

star.onmouseout = function () {

star.style.display = "block"

}

</script>

9..元素样式操作案例4-我方了

var box=document.getElementsByClassName("box")

//获取所有标签名为btn的元素，得到一个数组

var btn=document.getElementsByClassName("btn")

console.log(box);

console.log(btn);

//btn数组中，第0个元素是“我圆了“按钮

btn[0].οnclick=function(){

console.log(box[0].classList);//div盒子的类名是box

// element.classList.add("类名")添加类名

box[0].classList.add("changeBox")

console.log(box[0].classList);//div盒子的类名是box和changeBox

}

btn[1].οnclick= function(){

//element.classList.remove（"类名"）移除类名

box[0].classList.remove("changeBox")

}

</script>

10.元素样式操作案例5-标签栏切换效果的副本

<body>

</div>

</div>

//1获取元素

//1.1获取所有的标签元素

let tabs = document.getElementsByClassName("tab-head-div")

console.log(tabs);

//1.2获取所有的内容元素

let divs = document.getElementsByClassName("tab-body-div")

console.log(divs);

//2.1遍历标签数组元素对象

for (let i = 0; i < tabs.length; ++i) {

//2.2为每一个标签元素设置事件

//onmouseover鼠标移入事件

tabs[i].onmouseover = function () {

//this指向鼠示移入的标签元素

//console.log(i);

//2.3编辑内容数组元素对象

for (let j = 0; j < divs.length; ++j) {

console.log(i);

console.log(j);

//3.1如果正在点击第一个标签元素

if (tabs[j]==this) {

//3.2就给相应的数组添加current类名

//给标签添加current类名，元素增加白色背景

tabs[j].classList.add("current")

//给内容栏添加current类名，元素被显示

divs[j].classList.add("current")

}else{

tabs[j].classList.remove("current")

divs[j].classList.remove("current")

}

</script>

</body>

11.元素属性操作案例1-我哭了我装了

//1.获取图片

let pic = document.getElementById("pic")

//2.设置事件

pic.onmouseover = function () {

this.src = "./我装的.jpg"

}

pic.onmouseout = function () {

this.src = "./我哭了.jpg"

}

</script>

12.元素属性操作案例2-404

<body>

///1.获取元素

let input = document.querySelector("input")

let btn = document.querySelector("button")

//.2.注册事件

btn.onclick = function (){

input.value = "禁止访问"

btn.disabled=true

}

</script>

</body>

13.元素属性操作案例3-显示和隐藏密码

</div>

//1.获取元素

let pwd = document.getElementById("pwd")

let eye = document.getElementById("eye")

//2.注册事件

eye.onclick = function () {

if (pwd.type = -"text"){

console.log(111);

pws.type = "password"

eye.src="./close.jpg"

}else{

pwd.type = "text"

eye.src = "./open.png"

}

//3.完成事件处理函数

</script>

14.元素属性操作案例4-隔行变色plus

<body>

<ul>

<li>给你黄色看看</li>

<li>给你绿色看看</li>

<li>给你黄色看看</li>

<li>给你绿色看看</li>

<li>给你黄色看看</li>

<li>给你绿色看看</li>

<li>给你黄色看看</li>

<li>给你绿色看看</li>

</ul>

let liList = document.querySelectorAll("li")

console.log(liList);

for (let i = 0; i < liList.length; i++) {

liList[i].style.backgroundColor = i % 2 == 0 ? "yellow" : "green"

//onmouseenter鼠标移入事件

liList[i].onmouseenter = function () {

this.setAttribute("bgc", this.style.backgroundColor)

console.log(this.getAttribute("bgc"));

//element.setAttribute("属性","值"）设置属性

//element.getAttribute("属性","值") 获取属性

this.style.backgroundColor="red"

}

//onmouseleave鼠标移出事件

liList[i].οnmοuseleave=function(){

//取出自定义属性的值赋值给背景颜色

this.style.backgroundColor=this.getAttribute("bgc")

}

</script>

</body>

十.DOM (下）

1.节点操作案例1-删除水平线

JS部分

<title>删除水平线——删除节点</title>

</head>

<body>

<h1>JavaScript程序设计</h1>

<hr />

<h2>什么是JavaScript</h2>

<p>JavaScript是一门基于对象和事件驱动的嵌入式脚本语言</p>

<hr />

<h2>第一部分 JavaScript概述</h2>

<p>JavaScript的发展历史</p>

function delhr() {

let hrs = document.querySelectorAll("hr")

for (let i = 0; i < hrs.length; i++) {

var hr = hrs[i]

//node.parentNode获取父节点

console.log(hr.parentNode);

//node.previoussibling获取上一个兄弟节点

console.log(hr.previousSibling);

//node.previousElementsibling获取上一个兄弟节点元素

console.log(hr.previousElementSibling);

//node.previousSibling获取下个兄弟节点

console.log(hr.nextSibling);

//node.previousElementsibling获取下一个兄弟节点元素

console.log(hr.nextElementSibling);

//移除节点

//node.removeChild(child)

//node表示父节点，child表示node中需要被移除的字节点

hr.parentNode.removeChild(hr)

}

</script>

</body>

2.节点操作案例2-简易留言板

CSS部分

* {

margin: 0;

padding: 0;

}

body {

padding: 10px;

}

div {

border: 3px solid seagreen;

width: 700px;

}

h1 {

text-align: center;

color: yellowgreen;

}

ul {

margin-top: 50px;

width: 500px;

height: 200px;

border: seagreen 3px dashed;

margin: 30px auto;

list-style: none;

}

li {

width: 400px;

padding: 5px;

background-color: #eee;

font-size: 14px;

margin: 15px auto;

}

li a {

float: right;

}

textarea {

width: 400px;

height: 50px;

border: 3px solid seagreen;

outline: none;

resize: none;

display: block;

margin: 20px auto 5px;

}

.sub {

display: block;

background-color: seagreen;

color: seashell;

width: 200px;

height: 30px;

margin: 10px auto;

}

.remove {

float: right;

}

JS部分

<body>

let btn = document.querySelector(".sub")

let text = document.querySelector("textarea")

let ul = document.querySelector("ul")

btn.onclick = function () {

if (text.value == "") {

alert("你没有输入任何内容")

return false

} else {

//创建节点

//document.createElement（"标签名

var li = document.createElement("li")

li.innerHTML = text.value

//5.实现删除功能

//5.1 创建删除按钮节点

let button = document.createElement("button")

//5.2 添加节点

// appendChild() 将一个节点添加到父节点的所有子节点的末尾

li.appendChild(button)

//5.3为按钮增加文字

button.innerHTML = "删除"

//5.4 为按钮设置类名，从而增加右浮动的样式

button.className = "remove"

//5.5实现按钮的删除功能

button.onclick = function () {

//点击钮，整个li项被删除

//node,removeChild(child)

//node表示父节点，child表示node中需要被移除的子节点

ul.removeChild(this.parentNode)

}

// 3.2漆加节点

// insertBefore（）将一个节点添加到父节点的指定节点的前面

// 第一个参数要添加的节点

// 第二个参数父节点中的指定的子节点

ul.insertBefore(li, ul.children[0])

//4.将文本框内容清空

text.value = ""

}

</script>

</body>

3.常用事件案例-输入内容不能为空

<style>

.box{

display: flex;

flex-direction: column;

}

.input{

width: 100px;

}

button{

width: 100px;

margin-top: 5px;

}

</style>

<body>

用户名:<input type="text" id="user" class="input">

密码:<input type="password" id="pwd" class="input">

</div>

//onfocus当获得焦点时触发

//onblur当失去焦点时触发

document.getElementById("user").οnblur=blur

document.getElementById("pwd").οnblur=blur

function blur(){

if(this.value===""){

alert("请注意：输入的内容不能为空")

}

</script>

</body>

4.常用事件案例2-下拉菜单

CSS部分

* {

margin: 0;

padding: 0;

}

li {

list-style-type: none;

}

a {

text-decoration: none;

font-size: 14px;

}

.nav {

margin: 50px;

}

.nav>li {

position: relative;

float: left;

width: 80px;

height: 41px;

text-align: center;

border: 1px solid black;

}

.nav li a {

display: block;

width: 100%;

height: 100%;

line-height: 41px;

color: #333;

}

.nav>li>a:hover {

background-color: #eee;

}

.nav ul {

display: none;

position: absolute;

top: 41px;

left: 0;

width: 100%;

border-left: 1px solid #FECC5B;

border-right: 1px solid #FECC5B;

}

.nav ul li {

border-bottom: 1px solid #FECC5B;

}

.nav ul li a:hover {

background-color: #FFF5DA;

}

JS部分

</head>

<body>

<li>

</ul>

</li>

<li>

</ul>

</li>

<li>

</ul>

</li>

<li>

</ul>

</li>

let a = document.getElementsByTagName("a")

let ul = document.getElementsByTagName("ul")

for (var i = 0; i < a.length; i++) {

a[i].onmouseover = function () {

let arr = this.parentNode.getElementsByTagName("ul")

arr[0].style.display = "block"

}

a[i].onmouseout = function () {

let arr1 = this.parentNode.getElementsByTagName("ul")

arr1[0].style.display = "none"

}

</script>

</nav>

</body>
————————————————

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

原文链接：https://blog.csdn.net/J5028/article/details/136962206

Serendipity.912

关注

43
点赞
踩
11

收藏

觉得还不错? 一键收藏
1
评论
JavaScript笔记

表面声明变量还未赋值。
复制链接

扫一扫

JavaScript笔记

一.基本使用

1.输入输出语句

01.alert[输出语句]

02.[输入语句]

2、引入方式

01.内行式

02. 嵌入式

03. 外链式

二.基本语法

1.变量

01.变量的声明与赋值

1- 先声明后赋值

(1)声明变量

(2)为变量赋值

02.let声明变量

03.const声明变量

04.变量声明区别

(1)初始化要求不同

(2)重复声明不同

(3)对块级作用域的支持不同

2.数据类型

01.数据类型分析

02.基本数据类型

(1) Boolean--布尔类型

(2)numbr-数字型

(3) string-字符串

(4) undefined-未定义型

(5) null-空

03.数据类型检测

04.数据类型转换

(1)将数据类型转换为布尔类型 Boolean()

(2)将数据转化为字符串类型 String() toString()

(3)将数据转换为数字类型 Nymber()

3.运算符

01.算数运算符

（1）加法

（2）减法

（3）乘法

（4）除法

（5）取模运算 取余数

（6）幂运算

02.字符串运算&隐式转换

（1）隐式转换：

（2）字符串运算符：

03.赋值运算符

04.比较运算符

（1） != 不等于

（2）== 等于差不多相等

（3）===全等于

（4）!==不全等于

05.逻辑运算符

06.三元运算符

07.运算符优先级

4.流程控制

01.选择结构

02.循环结构

03.跳转语句

04.循环嵌套

六.数组

1.初始数组

2.创建数组

3.数组的基本操作

4.二维数组

5.数组迭代方法

七.函数

1.初识函数

2.函数内外变量的作用域

3.函数进阶

八.对象

1.介绍对象

2.Math对象

3.Date对象

4.Array对象

5.String对象

九.DOM（上）

1.获取元素案例1-隔行变色

2.获取元素案例2-微博评论框

3.获取元素案例3-开关灯

4.元素内容操作案例1-真香

（5）取模运算取余数