web前端——JavaScript-优快云博客

本文链接：https://blog.youkuaiyun.com/Z_zz_Z___/article/details/131989307

js引入方式

body>

document.write('你好，javascript')

console.log('aaa')

</script>

</body>

常用

document.write('我是js插入的语句')

// 控制台输出语句

console.log('你真6')

// alert 警示框

alert('警告，你小子立即退出')

// 输入语句输入框

prompt('请输入您的年龄')

变量

// prompt('请输入您的用户名：')

// 变量：存储数据的容器盒子

// 声明变量 let 变量名

let uname

// 变量赋值

uname = 'gouxin'

// 变量的初始化

let age = 18

console.log(age)

// 改变变量

uname = 'xianyanbao'

console.log(uname)

// 同时声明多个变量

let a = 1, b = 2

console.log(a, b)

var

// var a = 12

// let b = 22

// var 不存在块级作用域可以先使用，后声明多次声明同一变量

// console.log(uname)

// var uname = 'gouxin'

// var uname = 'zs'

// console.log(uname)

// let uname = 'gouxin'

// let uname = 'zs'

</script>

常量

<body>

// 常量：存储的数据不能再变化 const 常量名

const GENDER = 'nv'

// GENDER = '男'

console.log(GENDER)

</script>

</body>

基本数据类型-字符串

body>

// 对于javascript弱数据类型语言，只有进行赋值了，才知道是什么数据类型

// 字符串string类型 ' ' " "

let a

a = 'nihao'

// typeof 检测数据类型的方法

console.log(typeof (a))

let b = "欢迎你加入js "

console.log(typeof (b))

let c = "你是一本参不透的'书'"

// 字符串的拼接 +

let uname = 'zs'

let age = 21

document.write('姓名是：{uname}' + uname + '年龄是：' + age)

</script>

</body>

模板字符串

body>

let uname = prompt('请输入用户名：')

let password = prompt('请输入密码：')

document.write(`<h1>用户名是:${uname},密码是：${password}</h1>`)

let a = `gouxin`

console.log(typeof (a))

</script>

</body>

其他类型

<body>

let num = 1

// 布尔类型 true false

console.log(2 > 3)

// undefined 未定义

console.log(uname)

var uname = 'zs'

// null 空的

// NAN not a number

console.log(undefined + 1) //nan

console.log(null + 1)

</script>

</body>

数据类型转换

body>

// 隐式转换

// let a = 2

// let b = '3'

// console.log(a + b)

// 显式转换 Number(str) +

// let num1 = Number(prompt('请输入数字1：'))

// let num2 = Number(prompt('请输入数字2：'))

// let num1 = +prompt('请输入数字1：')

// let num2 = +prompt('请输入数字2：')

// console.log(num1 + num2)

// parseInt parseFloat 尽可能将字符串转换为数字类型

let c = 3.1415826

let d = '200.22px'

console.log(parseInt(d))

console.log(parseFloat(d))

</script>

</body>

运算符

<body>

let a = 3

let b = 5

// + - * / %

console.log(a + b)

console.log(b - a)

console.log(b * a)

console.log(b / a)

// % 取余

console.log(b % a)

a += 3 //a = a + 3

console.log(a)

a -= 3 //a = a - 3

a *= 3

a /= 3

// 赋值运算符的优先级高于后减减，因此，先赋值，后运算

// let c = b--

// 自增自减

// 前减减的优先级大于赋值运算符，因此，先减减，再赋值

let c = --b

console.log(c)

let d = c++

console.log(d)

console.log(c) //5

let f = ++c

console.log(f)

</script>

</body>

比较运算符

<body>

// let a = 4

// let b = 5

// console.log(a > b)

// console.log(a >= b)

// console.log(a < b)

// console.log(a <= b)

// console.log(a = b) = 赋值运算符

console.log(3 == '3') // == :等于只判断值有隐式转换，把字符串转换为数字类型

console.log(3 === '3') //===:全等判断值、数字类型是否都一致

</script>

</body>

// && :两真才真，一假则假

console.log(3 > 2 && 2 > 4)

// 或 || : 一真则真，两假才假

console.log(3 > 2 || 2 > 4)

// 非！取反

console.log(!(3 > 2))

</script>

</body>

单分支语句

<body>

let age = +prompt('请输入你的年龄：')

// if(判断条件){

// 执行代码块

// }

if (age > 18) {
alert('欢迎光临，你成年了~')

}

</script>

</body>

双分支语句

body>

let age = +prompt('请输入您的年龄')

// if (条件语句1) {

// 执行代码块1

// } else {

// 执行代码块2

// }

if (age > 18) {
alert('你成年了思密达~')

}

else {
alert('小屁孩，边儿去~')

}

</script>

</body>

多分支语句

<body>

let score = +prompt('请输入你的成绩：')

// if (条件1) {

// 代码块1

// }

// else if (条件2) {

// 代码块2

// }

// else if (条件三) {

// 代码块3

// } else {

// }

if (score <= 60) {
alert('脑子呢？？')

} else if (score <= 80) {
alert('还不错，继续努力就及格了')

}

else if (score <= 120) {
alert('再接再厉，牛的')

} else {
alert('你已经是大神了，慕白你')

}

</script>

</body>

三元运算符

body>

// 判断条件 ? 成立时执行的代码 : 不成立时执行的代码

// 三元运算符双分支的简写

// if (3 > 5) {

// alert('这个世界疯了')

// } else {

// alert('你是不是个der')

// }

3 < 5 ? alert('这个世界疯了') : alert('你是不是个der')

</script>

</body>

switch语句

body>

let week = prompt('请输入今天星期几了')

switch (week) {
case "1":

alert('今天星期一，猴子穿大衣~')

break

case "2":

alert('今天星期二，猴子有点二')

break

case "3":

alert("今天星期三，猴子去爬山")

break

case "4":

alert("今天星期四，猴子要找事")

break

case "5":

alert("今天星期五，猴子打老虎")

break

case "6":

case "7":

alert("今天周末，休假")

break

default://无符合条件时，执行的代码

alert("你是猴子派来的救兵吧~~~")

break

}

</script>

</body>

for循环

<body>

// console.log('我爱你')

for (let i = 0; i < 100; i++) {
console.log('我爱你')

}

</script>

</body>

while循环

<body>

let i = 1

while (i <= 10) {
console.log(i)

i++

}

while (true) {
let n = prompt('你爱我吗？')

if (n === "爱") {
break

}

alert(true === 1)

</script>

</body>

do.....while循环

<body>

// let i = 11

// while (i <= 10) {

// console.log(i)

// i++

// }

let j = 11

do {
console.log(j)

j++

} while (j <= 10)

</script>

</body>

循环嵌套

<body>

for (let i = 1; i < 8; i++) {
console.log(`今天是第${i}天`);

for (let j = 1; j <= 10; j++) {
console.log(`这是我送的第${j}朵花`)

}

for (let i = 1; i <= 5; i++) {
for (let j = 1; j <= i; j++) {
document.write(`<span>*</span>`)

}

document.write(`<br/>`)

}

</script>

</body>

数组

<body>

//存储多个数据的容器-数组

// 声明方式： [] 数组存在数组下标，从0开始

let arr = ['gouxin', 'liuxingyun', 'xainyanbao', 'wangwu']

console.log(arr)

// 查找数组名[数组下标]

console.log(arr[1])

</script>

</body>

循环加强

<body>

// for in for of

let arr = [1, 2, 3, 4, 5, 6, 7, 'gouxin', true]

// for (let i in arr) {

// // console.log(i)

// console.log(arr[i])

// }

for (let k of arr) {
console.log(k)

}

</script>

</body>

数组

<body>

let arr = ['gouxin', 'zs', 'ls', 'wmz', 1, 2, 3]

arr[1] = '显眼包'

console.log(arr[1])

// let arr2 = new Array()

// 常用的数组操作

// push() 向数组末尾添加一个或多个元素的

// arr.push(100, 22, 33, 'gouxinsimida')

// console.log(arr)

// unshift()

arr.unshift(101, 102, 110, 120)

console.log(arr)

// pop()删除并返回数组的最后一个元素

let b = arr.pop()

console.log(arr)

console.log(b)

// shift()删除并返回数组的第一个元素

let c = arr.shift()

console.log(arr)

console.log(c)

// [102, 110, 120, 'gouxin', '显眼包', 'ls', 'wmz', 1, 2]

// splice() 删除元素两个参数的时候，第一个参数代表要删除的元素的位置，第二个参数代表要删除几个

arr.splice(2, 3)

console.log(arr) //[102, 110, 'ls', 'wmz', 1, 2]

// splice()添加元素：第二个参数为0

arr.splice(2, 0, 'gouxin', 'lixi', 1, 2, 3)

console.log(arr)

// concat() 连接两个或者多个数组的，并返回结果

let arr1 = ['10086', '10010']

let arr2 = ['1314', '4488']

let arr3 = arr1.concat(arr2)

console.log(arr3)

console.log(arr1)

// join() 把数组中所有的元素放在一个字符串里边，元素通过指定的分隔符进行拼接

let str = arr1.join('#')

// console.log(typeof (str))

console.log(str)

// reverse() 颠倒数组中元素的顺序原来的数组改变

let newArr = [22, 3, 12, 44, 33, 123]

let n = newArr.reverse()

console.log(n)

console.log(newArr)//[123, 33, 44, 12, 3, 22]

// sort()对数组的元素进行排序按照utf码进行排序

let f = newArr.sort()

console.log(f)

console.log(newArr.length)

for (let i = 0; i < newArr.length; i++) {
console.log(arr[i])

}

</script>

</body>

函数

<body>

// 函数：完成特定功能的代码块精简代码、提高复用率

// alert()

// console.log()

// parseInt()

// getSum(2, 3)

// 函数的声明方式 function 函数名(){代码块}

function sayHi() {
console.log('你好，function')

}

// 函数声明完成后，必须进行调用才能执行

// 调用函数名()

sayHi()

</script>

</body>

函数传参

<body>

// 函数小括号里用于接受实参的叫做形参

function sayHi(msg) {
console.log(`用户说:${msg}`)

}

// 函数调用时，传进去的参数，叫做实参

sayHi('今天天气真好，狂风暴雨')

// 求和函数

function getSum(a, b) {
console.log(a + b)

}

getSum(2, 3)

</script>

</body>

函数返回值

body>

let arr = [11, 22, 12, 33, 4, 34]

function getSum(arr) {
let sum = 0

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

}

// console.log(sum)

// 返回值：return

return sum

// console.log('111')

}

// 函数没有返回值，默认返回undefined return 结束函数的作用，之后的代码不会再执行

let a = getSum(arr)

document.write(a)

</script>

</body>

值传递和引用传递

<body>

// 将自身的值传进函数

let a = 11

let b = 22

function change(x, y) {
x = 21

y = 33

}

change(a, b)

console.log(a, b)

// 数组：引用数据类型，将自己的地址传递给函数

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

function change2(arr) {
arr.push(100)

}

change2(arr)

console.log(arr

</script>

</body>

默认值参数

<body>

// 默认值参数:在形参的最后

function area(r, PI = 3.14) {
return PI * r * r

}

let a = area(2)

console.log(a)

</script>

</body>

匿名函数

body>

//具名函数匿名函数：没有名字的函数

// say()

// function say() {

// console.log('good')

// }

// 1、函数表达式

// let fn = function () { console.log("你好") }

// fn()

// 普通的具名函数，可以在声明前去使用，而函数表达式，只能先声明，后使用

// 2、立即执行函数

// let num=1

// let num=2

// (function () {

// let num = 1

// console.log(num)

// }())

(function () {
console.log('121212')

})()

</script>

</body>

作用域

<body>

let a = 1

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

}

for (let i = 7; i < 10; i++) {
console.log(i)

}

// console.log(i)

//作用域：一段代码中所用到的名字不是一直有效且可用的，而限制这个名字可用范围的就是这个名字的作用域

// 减少名字冲突不同作用域之间相互不影响

// 全局作用域局部作用域：函数内部声明的变量

// script里边，函数外边声明的变量

//全局变量：script里边，函数外边声明的变量局部变量：函数内声明的变量(外部不能访问)

// 函数的形参也可以理解为局部变量

function say() {
let num = 33

console.log(a)

}

say()

console.log(num)

</script>

</body>

递归

<body>

// 递归：把一个问题，尽可能的拆分成小问题，知道不能拆分

// 9!

// 9*8!

// 9*8*7!

// 9*8*7*6*5*4*3*2*1!

function jiecheng(n) {
if (n === 1) {
return 1

}

return n * jiecheng(n - 1)

}

let a = jiecheng(9)

console.log(a)

</script>

</body>

闭包

<body>

function outer() {
let money = 100

function inner() {
console.log(money)

}

return inner

}

let a = outer()

a()

console.log(money)

</script>

</body>

对象

body>

// let arr = [190, 184, 19]

// 对象：无序的数据集合(无下标)

let obj = {
uname: 'gouxin',

age: 21,

gender: 'nv',

sing: function () {
console.log('我要唱歌了，请保护你的耳朵')

}

// 声明方法： let 对象名={} let 对象名=new Object()

// 对象：属性和方法属性：信息或者特征方法：行为或者动作打电话、玩游戏……

// 查：对象名.属性名

console.log(obj.age)

console.log(obj.uname)

// 查找2.0 对象名['属性名']

console.log(obj['gender'])

// 增对象.新属性=属性值

obj.like = '王者荣耀'

// 改

obj.uname = 'zs'

// 删

delete obj.gender

console.log(obj)

// 对象方法怎末去调用对象名.方法名()

obj.sing()

</script>

</body>

对象遍历

<body>

let obj = {
uname: 'gouxin',

age: 21,

gender: 'nv',

sing: function () {
console.log('我要唱歌了，请保护你的耳朵')

}

for (let k in obj) {
// console.log(typeof (k))

console.log(obj[k])

}

</script>

</body>

Math模块

<body>

console.dir(Math)

// console.log(Math)

console.log(Math.E)

console.log(Math.PI)

// ceil()向上取整

console.log(Math.ceil(3.1415))

// floor()向下取整

console.log(Math.floor(3.1415))

// abs取绝对值

console.log(Math.abs(-3.1415))

// pow

console.log(Math.pow(2, 3))

console.log(Math.random()) //[0,1)之间的随机数

let arr = ['zs', 'ls', 'ww', 'gouxin', 'heidashuai']

let random = Math.floor(Math.random() * 5)

document.write(arr[random])

</script>

</body>

时间模块

<body>

// new关键字，就是在实例化

// console.log(date)

let date = new Date()

console.dir(date)

function getTime() {
let y = date.getFullYear()

let m = date.getMonth() + 1

let d = date.getDate(

let hh = date.getHours()

let mm = date.getMinutes()

let ss = date.getSeconds()

let week = date.getDay()

// 补零：

m = m < 10 ? '0' + m : m

d = d < 10 ? '0' + d : d

hh = hh < 10 ? '0' + hh : hh

mm = mm < 10 ? '0' + mm : mm

ss = ss < 10 ? '0' + ss : ss

return `${y}年-${m}月-${d}日 ${hh}:${mm}:${ss} 星期${week}`

}

let a = getTime()

console.log(a)

</script>

</body>

字符串对象

body>

let str = new String()

str = 'nihao,huanyingjiaru web'

console.log(typeof (str))

// length 属性

console.log(str.length)

// split()将字符串分隔为数组并返回

let a = str.split('a')

console.log(a)

// endsWith startsWith

str.startsWith('nihao')

console.log(str.startsWith('dcnd'))

// indexOf 字符串中是否包含某字符

str.indexOf('gouxin')

console.log(str.indexOf('gouxin'))

// match 匹配字符串，支持正则

let c = str.match(/a/g)

console.log(c)

// replace 查找、替换，支持正则匹配

let f = str.replace('huanying', 'jujueni')

console.log(f)

</script>

</body>

构造函数

<body>

// let str=new String()

// let obj = {

// uname: 'linjunjie',

// age: 31,

// sing: function () {

// console.log('我要唱歌了')

// }

// let obj2 = {

// uname: 'zhnagjei',

// age: 33,

// sing: function () {

// console.log('我要唱歌了')

// }

// 构造函数的基本格式一个模板

function Obj(uname, age) {
this.uname = uname,

this.age = age,

this.sing = function () {
console.log('我要唱歌了')

}

// 实例化对象

let str = ''

// let str = new String()

// let arr = new Array()

let obj1 = new Obj('zhangjie', 21)

console.log(obj1)

obj1.sing = function () {
console.log('sing')

}

obj1.sing()

let obj2 = new Obj('linjunjie', 33)

console.log(obj2)

obj2.sing()

</script>

</body>

原型对象

body>

function Obj(uname, age) {
this.uname = uname,

this.age = age

}

// Obj.prototype.sing = function () {

// console.log('我要唱歌了')

// }

Obj.prototype = {
// 原型对象中的constructor被覆盖丢失。重新指回去：constructor：Obj，

constructor: Obj,

sing: function () {
console.log('我要唱歌了')

dance: function () {
console.log('我要跳舞')

}

console.dir(Obj)

let obj1 = new Obj('zs', 18)

obj1.sing()

console.log(obj1.__proto__ === Obj.prototype)

let obj2 = new Obj('ls', 22)

obj2.sing()

// 对象：都具有prototype的属性，即都有原型对象，而原型对象本身又是对象

// javascript里：万物皆对象

// let arr1=[]

// let arr = new Array()

// console.log(arr)

</script>

</body>

获取元素

<body>

<ul>

</ul>

// 1、通过css选择器获取 document.querySelector只获取满足条件的第一个元素对象（倾情推荐）

// document.querySelector('css选择器')

const btn = document.querySelector('button')

// console.log(typeof (btn))

console.dir(btn)

const li = document.querySelector('ul li')

console.log(li)

// document.querySelectorAll将所有的满足条件的元素对象获取并保存至伪数组

const lis = document.querySelectorAll('ul li')

console.log(lis)

// 2、class名

let box = document.getElementsByClassName('box')

console.log(box)

// 3、标签名

let input = document.getElementsByTagName('input')

console.log(input)

// 4、id

// document.getElementById(''

</script>

</body>

修改dom元素内容

<body>

<div>我是一个盒子</div>

// 1、获取元素

let div = document.querySelector('div')

// 2、修改元素内容

// 1、innerText() 无法识别标签

div.innerText = `<h1>我被修改过</h1>`

// 2、innerHtml() 可以识别标签（热烈推荐）

div.innerHTML = '<h1>我又又又被改了</h1>'

</script>

</body>