web前端5

WEB前端

DAY5

• JS引入方式

  • 内部引入：一般自己做项目的时候放在底部，不影响加载顺序又可以和CSS文件进行区分，并且不会影响浏览器渲染。
  • 外部引入：在script标签中使用src引入外部文件

• 输入输出语句

  <script>
      prompt('') 输入语句
      document.write('')  打印到页面
      console.log('')
  

• 变量

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

  • 变量声明：let 变量名

  • 变量赋值：

  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.驼峰命名法

• let和var的区别

  var 可以多次声明同一变量
  

• const常量

• 数据类型

​ js是弱数据类型语言，只有赋值后才

• 基本数据类型----数字类型

<script>
    let a=21
	let b=33
    console.log(a)
	console.log(a+2)
	console.log(a+b)
	console.log(a*b)
	console.log(a/b)
	console.log(a%b)
<script>

• 字符串类型

<script>
	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 "gaoxin" sns'
	console.log(typeof(uname4))

• 字符串拼接用加号+
• 模板字符串

let uname = prompt("请输入名字：")
let age = prompt("请输入年龄：")
document.write('${},${}')

• 布尔类型

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

• 显示转换

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

        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 = 33

        // a += 4 // a = a + 4
        // a *= 2   //a = a * 2     74
        //a -= 3    //a = a - 3
        // a /= 2     //a = a / 2      35.5
        // alert(a)

        // let b = a++  //先赋值，再自增
        // alert(b)
        // alert(a)  //36.5
        // b = ++a   //先自增，再赋值
        // alert(b)

        // 比较运算符  
        // >   <   >=   <=  ==   ===
        let num1 = 2
        let num2 = '2'
        alert(num1 == num2)
        alert(num1 === num2)
        // ==  （隐式转换）只比较数值，将字符串转换为数字类型后进行比较   ===   即比较数值，也比较类型

• 逻辑运算符

<script>
        // &&     ||       !
        //  alert(4 > 3 && 3 < 5)  //两真为真，一假则假
        // alert(4 < 3 || 3 < 5)  //一真则真   全假则假
        // alert(!true)
        alert(!(4 < 3))

    </script>

• 单分支语句

        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 age = +prompt('请输入您的年龄：')
        // if (age <= 18) {
        //     alert('你不要乱跑')
        // } else {
        //     alert('恭喜你，成年了')
        // }

        // 判断条件？条件成立时执行的语句：条件不成立时执行的语句
        age <= 18 ? alert('你不要乱跑') : 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)

• 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 {
            console.log('你是大聪明')
            i--
        } while (i > 11)

• for循环

 for (let i = 1; i <= 10; i++) {
            document.write(`你真是个大聪明<br>`)
        }

• 循环嵌套

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/>`)
        }


        for (let i = 1; i < 6; i++) {
            for (let j = 1; j <= i; j++) {
                document.write(`*`)
            }
            document.write(`<br/>`)
        }

• contine、break

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

• 循环加强

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

• 数组

// let name1 = '俊杰'
        // 有序的数据序列
        //             0         1         2           3       4     5
        let arr = ['gouxin', 'huangzhong', 'jialuo', 'zhadanren', 12, true]
        // 数组的声明方式
        // arr[索引下标]
        alert(arr[5])


        // let arr2 = new Array()


        // 数组遍历
        // 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)

        console.log(arr.join(' **'))
        console.log(arr.reverse())

        console.log(arr.slice(3))

• 二维数组

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   获取数组长度的