js的笔记

最新推荐文章于 2024-10-10 23:30:00 发布

m0_73832254

最新推荐文章于 2024-10-10 23:30:00 发布

阅读量37

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_73832254/article/details/131728612

版权

js的引入方式

<body>

// 内部

</script>

</script>

</body>

输入输出语句

// 输入语句

prompt('请输入您的密码：')

// 打印到页面

document.write('你们真是小天才')

// 可以识别标签

document.write('<strong>你们真是小天才</strong>')

// 控制台输出语句

console.log('我现在要在控制台输出')

</script>

变量

// 变量：盒子----存储数据的容器数据本身不是变量

// 变量的声明：

// let 变量名 var 变量名不推荐！！！！

// 变量赋值

// age = prompt('请输入您的年龄：')

// age = 33

// console.log(age)

// 变量的初始化

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

// console.log(uname)

// 同时定义多个变量

// let uname = 'zs', age = 21

// console.log(uname, age)

变量命名规范

// 变量命名规范:1、有效符号（大小写字母、数字、下划线、$）

// 2、关键字、保留字不能用于变量命名

// 3、不以数字开头

// 4、尽量用有意义的变量名

// 5、驼峰命名法 userName（从第二个单词开始单词的第一个字母大写）

常量

// 常量名大写常量无法更改

const PI = 3.14

数据类型

// js是弱数据类型语言只有赋值之后，才知道是什么数据类型

let uname = 21

uname = 'gouxin'

console.log(typeof (uname))

// console.log(typeof (uname))查看数据类型

字符串类型

写法：

let uname1 = 'nnnsns'

console.log(typeof (uname1))

let uname2 = "nnnsns"

console.log(typeof (uname2))

let uname3 = "nnn'gouxin'sns"

console.log(typeof (uname3))

let uname4 = 'nnn"gouxin"sns'

console.log(typeof (uname4))

// 字符串拼接用+

let a = prompt("请输入num1")

let b = prompt("请输入num2")

// alert 警示框

alert(a + b)

// 模板字符串

let uname = prompt("请输入名字：")

let age = prompt("请输入年龄：")

document.write('你叫' + uname + ',今年' + age + '岁了') //不推荐!!!!!

document.write(`<strong>你叫${uname},今年${age}岁了</strong>`)

显示转化

// 将数据转换为数字类型

let a = +prompt('num1')

let b = +prompt('num2')

// 方法2

console.log(Number(a) + Number(b))

console.log(typeof (+a))

// 只引用数字不引用单位

let c = '200.9875px'

console.log(parseInt(c))

console.log(parseFloat(c))

运算符

// = 赋值运算符

// let a = 21

// a += 4 a = a + 4

// a *= 2 a = a * 2

//a -= 3 a = a - 3

// a /= 2 a = a / 2

// alert(a)

// let b = a++ 先赋值，再自增

// alert(b)

// alert(a)

// b = ++a 先自增，再赋值

// alert(b)

// 比较运算符

// > < >= <= == ===

let num1 = 2

let num2 = '2'

alert(num1 == num2)

alert(num1 === num2)

// == （隐式转换）只比较数值，将字符串转换为数字类型后进行比较 === 即比较数值，也比较类型

逻辑运算符

// && 与 ||或 !非

// alert(4 > 3 && 3 < 5) //两真为真，有假则假

// alert(4 < 3 || 3 < 5) //一真则真全假则假

// alert(!true)

单分支语句

let age = 11

// if(条件){

// 执行的代码

// }

if (age < 18) {

document.write('你是小弟弟，不要乱跑')

}

双分支语句

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

if (age <= 18) {

alert('你不要乱跑')

} else {

alert('恭喜你，成年了')

}

多分支语句

let age = +prompt('age：')

if (age < 18) {

alert('你是未成年学习吧')

} else if (age <= 25) {

alert('青春年华')

} else if (age <= 40) {

alert('好汉不提当年勇')

} else {

alert('男人四十一枝花')

}

三元运算符

// 判断条件？条件成立时执行的语句：条件不成立时执行的语句

let a = +prompt('请输入num1：')

let b = +prompt('请输入num2：')

a > b ? alert(`最大值是：${a}`) : alert(`最大值是：${b}`)

数字补零

// alert(2 < '3')

let a = prompt('num')

a >= 10 ? alert(a) : alert(0 + a)

</script>

switch语句

let num = +prompt('请输入今天星期几了：')

switch (num) {

case 1:

alert('星期一')

break

case 2:

alert('星期二了')

break

case 3:

alert('星期三了')

break

case 4:

alert('星期四了')

break

case 5:

alert('星期五了')

break

case 6:

alert('周末了')

break

case 7:

alert('周末了')

break

default:

alert('你是外星人吗')

}

while循环

// while 一定要有终止条件

let i = 10

while (i > 11) {

console.log('你是大聪明')

i--

}

// do while 先循环一次，在判断条件

do {

console.log('你是大聪明')

i--

} while (i > 11)

for循环

for (let i = 1; i <= 10; i++) {

document.write(`你真是个大聪明<br>`)

}

循环嵌套

九九乘法表：

for (let i = 1; i < 10; i++) {

for (let j = 1; j <= i; j++) {

document.write(`<span>${j}*${i}=${i * j}</span>`);

}

document.write(`<br/>`)

}

break和continue

// break:跳出循环

// continue：跳出本次循环

循环加强

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

// for in

// i代表数组下标

for (let i in arr) {

console.log(arr[i])

}

// for of

// k代表内容

for (let k of arr) {

console.log(k)

}

数组

// 有序的数据序列

// 0 1 2 3 4 5

let arr = ['gouxin', 'huangzhong', 'jialuo', 'zhadanren', 12, true]

// 数组的声明方式

// arr[索引下标]

alert(arr[5])

// 数组遍历

for (let i in arr) {

console.log(arr[i])

}

// 数组的操作

// 通过索引下标给对应元素重新赋值

arr[1] = 'guanyu'

console.log(arr instanceof Array)

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

// concat合并数组

arr3 = arr.concat(arr2)

console.log(arr3)

// 增 push 在数组末尾添加

arr.push('姜加')

// unshift 在数组首部添加元素

arr.unshift('jiangjia')

// 在数组末尾删除元素

arr.shift()

// 在数组首部删除元素

arr.pop()

// splice(删除的起始位置，删除的个数)

arr.splice(3, 1)

// splice(删除的起始位置，0,要添加的元素)

arr.splice(3, 0, 'jiangjia')

console.log(arr)

二维数组

let student = [['jiangjia', 31, 'sing'], ['xuchao', 21, 'dance']]

console.log(student[1][0])

// 遍历

for (let i in student) {

for (let j in student[i]) {

console.log(student[i][j])

}

// student.length 获取数组长度的

函数

function 函数名( ) {

语句

}

function sayHi() {

console.log('hello,function!')

}

// 函数必须进行调用，才会执行

sayHi()

// 函数要有返回值，一定要添加return关键字，否则返回值为undefined

function getSum() {

// console.log(a + b)

// return a + b

// arguments 接收所有实参，并保存到arguements数组里

console.log(arguments)

let sum = 0

console.log(age)

for (let i in arguments) {

sum += arguments[i]

}

return sum

}

let e = getSum(3, 4, 3, 4, 65, 7, 44, 5, 6, 7, 5)

console.log(e)

匿名函数

function () {

console.log('jiangjia')

}

setInterval(function () {

console.log('你真傻')

}, 1000)

函数表达式

let a = function getSum() {

console.log('jiangjia')

}

a()

立即执行函数

(function () { console.log('liqingyu') })()

// (function () { console.log('jiangjia') }()) 不推荐！！！

值传递

let a = 10

let b = 20

function change(x, y) {

x = 30;

y = 50;

}

change(a, b);

alert(a + "--" + b)

引用传递

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

// 引用传递传地址，发生改变

function change2(a) {

a.push(1000)

}

change2(arr)

alert(arr)

默认值函数

在最后大写

function getCir(r, PI = 3.14) {

return PI * r * r

}

let a = getCir(3)

console.log(a)

箭头函数

setInterval(function () {

console.log('i love you')

}, 1000)

箭头函数写法：

setInterval(() => {

console.log('i hate you')

}, 1000)

递归

求n的阶乘

function jiecheng(n) {

if (n === 1) {

return 1

} else {

return n * jiecheng(n - 1)

}

let a = jiecheng(9)

alert(a)

数组遍历

let arr = ['a', 2, 3, 4, 5, 6]

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

console.log(arr[i])

}

求数组长度：arr.length

字符串的常见方法

let str = new String()

let str = '你是who'

// 折掉

console.log(str.split('w'))

// 折留

console.log(str.substring(2, 4))

// 以什么开头

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

console.log(str.endsWith('你'))

// 有包含什么没有

console.log(str.includes('w'))

对象

// 对象：无序的数据集合

let obj = {

uname: 'zhangfei',

age: 21,

gender: 'nan'

}

console.log(obj)

// 查找对象元素

console.log(obj.uname)

console.log(obj['age'])

// 改：对象.属性名

obj.uname = 'GGBond'

// 增加对象.新属性名

obj.sing = function () {

console.log('sing~')

}

// 删除对象.属性名

delete obj.gender

console.log(obj)

对象遍历

let obj = {

uname: 'zhangfei',

age: 21,

gender: 'nan'

}

for (let k in obj) {

console.log(k)

console.log(obj[k])

}

数组对象

let arrObj =

[

{

uname: 'zs',

age: 21

{

uname: 'jiangjia',

age: 33

{

uname: 'lisi',

age: 12

}

]

console.log(arrObj)

// arrObj[1]['uname'] 数组对象遍历

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

for (let k in arrObj[i]) {

console.log(arrObj[i][k])

}

Math内置对象

// Math.ceil向上取整

console.log(Math.ceil(3.1415))

// Math.floor向下取整

console.log(Math.floor(3.1415))

// Math.abs 绝对值

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

// pow 求幂次方

console.log(Math.pow(3.12, 10))

// 开平方根

console.log(Math.sqrt(9))

// 随机数左闭右开默认0-1

// 取0-10的整数

console.log(Math.floor(Math.random() * 11))

// 取m-n的整数

let random = Math.floor(Math.random() * (m - n + 1)) + n

console.log(random)

日期内置对象

// 获取时间

let date = new Date()

alert(date)

// 获取年

let year = date.getFullYear()

// 获取月

let month = date.getMonth() + 1

// 获取日

let day = date.getDate()

// 获取时

let hh = date.getHours()

// 获取分

let mm = date.getMinutes()

// 获取秒

let ss = date.getSeconds()

document.write(`${year}年-${month}月-${day}日 ${hh}:${mm}:${ss}`)

// 获取星期

let gg = date.getDay()

alert(gg)

获取元素的方法

// 1、通过css选择器获取 ('字符串') :狂（嘎嘎）推荐

const li2 = document.querySelector('.two')

console.log(li2)

const li = document.querySelector('li')

console.log(li)

// document.querySelectorAll将所有匹配的元素全部获取到，并存放到伪数组

const lis = document.querySelectorAll('li')

console.log(lis)

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

console.log(lis[i])

}

const li3 = document.querySelector('ul li:nth-child(3)')

console.log(li3)

// 其他

console.log(document.getElementsByTagName('div'))

console.log(document.getElementById('four'))

console.log(document.getElementsByClassName('two'))

修改元素的内容

// 1、获取元素

const box1 = document.querySelector('.one')

const box2 = document.querySelector('.two')

console.log(box1)

console.log(box2)

// 2、操作

box1.innerText = `<h1>jiangjia</h1>`

box2.innerHTML = `<h1>chensongjie</h1>`

修改元素属性

// 1、获取元素

const ipt = document.querySelector('input')

// 改元素属性对象.属性=值

ipt.type = "password"

ipt.placeholder = "请输入用户名"

ipt.readOnly = false

修改元素样式

<style>

.box1 {

width: 300px;

height: 300px;

background-color: rgb(207, 39, 67);

font-size: 50px;

}

</style>

// 1、获取元素

const box2 = document.querySelector('.box2')

const div = document.querySelector('.box1')

// 2、通过style修改样式

div.style.width = '500px'

div.style.fontSize = '16px'

div.style.backgroundColor = 'pink'

// 3、通过添加类名 calssName会将原来的类名删除掉，不建议使用

// box2.className = 'box1'

// classlist.add（'类名'）追加

box2.classList.add('box1')

// box2.classList.remove('box1') 移除

box2.classList.toggle('box1') //切换：有则删除，没有则添加

</script>

定时器

// setTimeout\setInterval 两种定时器

// setTimeout :某段代码或者函数在多久后执行

// setTimeout(code||function,time(ms))

// 返回值是一个整数，代表定时器编码

let timer = setTimeout('console.log("我是一秒之后执行的代码")', 1000)

console.log(timer)

let timer2 = setTimeout('console.log("我是4秒之后执行的代码")', 4000)

console.log(timer2)

// 传的是函数名

let timer3 = setTimeout(

fn, 3000)

function fn() {

console.log('6666666')

}

// setTimeout(函数或一段代码，延迟时间，实参……)

let timer4 = setTimeout(function (a, b) {

console.log(a + b)

}, 2000, 1, 4)

let obj = {

uname: 'gouxin',

a: 3,

b: 4,

sum: function () {

console.log(this)

console.log(this.a)

}

obj.sum()

setTimeout(obj.sum, 1000)

// 定时器的第一个参数如果是对象方法，this不再指向对象，指向全局环境

setTimeout(function () { obj.sum() }, 1000)

let a = setTimeout(obj.sum.bind(obj), 1000)

clearTimeout(a)

// setInterval 间隔一段时间，将代码或者函数执行一次

let timer = setInterval(' console.log(\'6666666\')', 1000)

clearInterval(timer)

let timer2 = setInterval(function (a, b) {

console.log(a + b)

}, 1000, 2, 3)

clearInterval(timer2)

m0_73832254

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫