web笔记5

最新推荐文章于 2024-07-12 16:55:56 发布

值得的代码

最新推荐文章于 2024-07-12 16:55:56 发布

阅读量58

点赞数

文章标签：前端笔记 javascript

本文链接：https://blog.csdn.net/m0_75153133/article/details/131748229

版权

1.js入门

<!DOCTYPE htm1>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"content="width=device-width, initial-scale=1.0">
    title>Document</title>
</head>

<body>
    <button>点击我变成粉色</button>
    <script>
        let btn = document.querySelector('button') 
        btn.addEventListener('click'， () => {
            btn.style.backgroundColor = 'pink'
        })
    </script>
</body>

</html>

2.js引入方式

<script>
// 内部
// prompt('请输入您的年龄:)
</script>
<!-- 外部 -->
<script src="./93-外部js.js"</script>

3.输入输出语句

<script>
//输入语句
prompt('请输入您的密码:')
//打印到页面//可以识别标签
document.write('<strong>天才</strong>')
//控制台输出语句//不识别标签
console.log('天才')
</script>

4.变量

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

变量的声明： let 变量名； var 变量名（不用）

<script>
    //prompt('请输入您的年龄：')输入语句
    let age=prompt('请输入您的年龄：')
    console.log('age')
    doucument。write(age)
</script>

变量初始化

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

同时定义多个变量

let uname='张三'，age='21'
console.log(uname，age)

5.变量命名规范

<script>
变量命名规范：
1.有效符号（大小写字母、数字、下划线、$）
2.关键字、保留字不能用于变量命名
3.不以数字开头
4.尽量用有意义的变量名
5.驼峰命名法    userName  
</script>

6.let和var的区别

var：可以次声明同一变量

console.log(age)
var age

7.const常量

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

const PI=3.14
console.log(PI)
//PI常量无法更改

8.数据类型

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

let uname=21
uname='gouxin'
console.log(typeof(uname))

9.基本数据类型—数字类型

let a=20
let b=30
console.log(a)
console.log(a+2)
console.log(a+b)
console.log(a*b)
console.log(a/b)
console.log(a%2)

10.字符串类

两个字符串

let uname1='nnsns'
console.log(typeof(uname1))
let uname2='nnsns'
console.log(typeof(uname2))

let uname3="nn'gouxin'sns"
console.log(typeof(uname3))

let uname4='nn"douxin"sns'
console.log(typeof(uname4))

字符串拼接

let a=+prompt("请输入num1")
let b=+prompt("请输入num2")
//alert 禁示框
console.log(a+b)

模板字符串

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

document.write('你叫' + uname + '，今年' + 'age' + '岁了')
document.write()

11.布尔类型

console.log(typeof(3<5))
//undefinded  声明，未赋值
//null NaN  not a number
console.log(undefined + 1)
console.log(null + 1)

12.显示转换

let a=prompt('num1')
let a=prompt('num2')

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

let c='200px'
console.log(parseint(c))

parseInt

paresFloat

13.运算符

= 赋值运算符

let a = 21(a的默认值)
a = 33
a +=4  //a=a+4  37
a *=2  //a=a*2  74
a /=2  //a=a/2  37
alert(a)  37

let b = a++
alert(b)  37
alert(a)  37
b=++a     先自增，再赋值
alert(b)  38

//比较运算符
let num1 = 2
let num2 = '2'
alert(num1 == num2)  true
alert(num1 === num2) false
//== (隐式转换)只比较数值，将字符

14.逻辑运算符

&&与 ||或！非

alert(4>3 && 3<5)       false
alert(4<3 || 3<5)       true
alert(!true)            false
alert(!(4<3))           false

15.单分支语句

<script>
let age = 11
    //if(条件){
    //  执行的代码
    //}
    if(age<18){
     document.write('你是小弟弟')
    }
</script>

16.双分支语句

<script>
    let age = +prompt('请输入你的年龄：')
    if(age<=18){
    alert('你不要乱跑')
    }
    else{
    alert('成年了')
    }
</script>

17.闰年

<script>
    let year = +prompt('请输入年份')
    if
    
    }
</script>

18.多分支语句

<script>
    let age = +prompt('age:')
    if(age<18){
        alert('你是未成年')
    }
    else if(18<=18<25){
        alert('青春年华')
    }
    else{
        alert('好汉不提当年勇')
    }
</script>

19.三元运算符

<script>
//判断条件  ？：条件成立时执行的语句  :条件不成立时执行的语句
age = ？
</script>

20.求最大值

<script>
        let a = prompt('num')
        a >= 10 ? alert(a):alert(0+a)
</script>

21.switch语句

<script>
        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('星期八')
        }
</script>

22.while语句

一定要有终止条件

<script>
        let i = 10
        while(i>0){
            console.log(抽象)
            i--
        }
</script>

   do{
     consolo.log('你是')
     i--
   }while(i>11)

23.for循环

<script>
        for(let i = 1; i<= 10; i++){
           console.log('你是')
        }
</script>

24.循环嵌套

<script>
        for(let i = 1; i<8; i++){
            console.log(`今天是第${i}`)
            for(let j=1; j<11; j++){
                console.log(`这是今天第${j}朵玫瑰`)
            }
        }
        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/>`)
        }
        
        
        
        
</script>

25.continue和break

break:跳出循环

continue：跳出本次循环

<body>
    <script>
        for (let i = 1; i < 100; i++) {
            if (i === 50) {
                // break
                continue
            }
            console.log(i)
        }
        // break:跳出循环
        // continue：跳出本次循环
    </script>
</body>

26.循环加强

arr 数组名

for in 遍历数组 i 代表索引下标

for of遍历数组 k 代表数组元素

<script>
        let arr=[1,2,3,4,5,6]
        //for  in
        for (let i in arr){
            console.log(arr[i])
        }
        //for  of
        for (let k of arr){
            console.log(k)
        }
</script>

27.数组

<script>
        //有序的数据序列
        let arr=['gouxin','jialuo','12','true']
        
        //arr[索引下标]
        alert(arr[3])
        //let arr2=new Array

        //数组遍历
        for(let i in arr){
            console.log(arr[i])
        }
        
        //数组的操作
        //通过索引下标给对应元素重新赋值
        arr[1]='关羽'
        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('加')
        arr.shift()
        arr.poo()
        sonsole.log(arr)

        //splice(删除的起始位置，删除的个数)
        arr.splice(3,1)
        //splice(删除的起始位置，0，要添加的元素)
        arr.splice(3,0,'加')
        console.log(arr)

        console.log(arr.join('**'))
        console.log(arr.reverse())
        
        console.log(arr.slice(3))
</script>

28.二维数组

<body>                               0                      1
    <script>                0        1     2        0       1      2
        let student = [['jiangjia', 31, 'sing'], ['xuchao', 21, 'dance']]

        // console.log(student[1][0])-----1指[],0指xuchao
        for (let i in student) {------------二维数组遍历
            for (let j in student[i]) {
                console.log(student[i][j])
            }
        }

        // student.length   获取数组长度的
    </script>
</body>555

作业

for循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        span {
            display: inline-block;
            margin: 15px;
        }
    </style>
</head>
<body>
    <script>
        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/>`)
        }
    </script>
</body>
</html>

while循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <script> 
    let i = 1; 
    while (i <= 9) { 
        let j = 1; 
        while (j <= i) {
            document.write(j+ '*' +i + '=' + j*i + '    ');
            j += 1; 
            }
            document.write("<br>")
            i += 1;
            }
    </script>
</body>
</html>

值得的代码

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
web笔记5

变量的声明： let 变量名；var 变量名（不用）js是弱数据类型语言只有赋值之后，才知道是什么数据类型。变量：盒子----存储数据的容器数据本身不是变量。&&与 ||或！for in 遍历数组 i 代表索引下标。for of遍历数组 k 代表数组元素。常量名大小写常量无法更改。continue：跳出本次循环。var：可以次声明同一变量。break:跳出循环。
复制链接

扫一扫