WEB front-end notes 4

JS import method

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

input output statement

		// 输入语句
        prompt('请输入您的密码：')
        // 打印到页面
        document.write('你们真是小天才')
        // 可以识别标签
        document.write('<strong>你们真是小天才</strong>')
        // 控制台输出语句
        console.log('我现在要在控制台输出')

variable

// 变量：盒子----存储数据的容器           数据本身不是变量
        //  变量的声明：
        // let 变量名           var  变量名
        // let age
        // //    变量赋值
        // age = prompt('请输入您的年龄：')

        // age = 33
        // console.log(age)


        // 变量的初始化
        // let uname = prompt('请输入您的用户名：')
        // console.log(uname)


        // 同时定义多个变量
        // let uname = 'zs', age = 21
        // console.log(uname, age)

        let age = prompt('请输入年龄：')
        document.write(age)

Variable naming convention

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

const constant

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

type of data

 // js是弱数据类型语言    只有赋值之后，才知道是什么数据类型
        let uname = 21
        uname = 'gouxin'
        console.log(typeof (uname))

basic data type

//数字类型
let a = 21.21312
        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)
        console.log(a % 2)

//字符串类型
// 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>`)

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

display conversion

 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))

operator

// =  赋值运算符
        // 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)
        // ==  （隐式转换）只比较数值，将字符串转换为数字类型后进行比较   ===   即比较数值，也比较类型

Logical Operators

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

single branch statement

let age = 11
        // if(条件){
    
    
        //     执行的代码
        // }
        if (age < 18) {
    
    
            document.write('你是小弟弟，不要乱跑')
        }

double branch statement

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

multi-branch statement

let age = +prompt('age：')
        if (age < 18) {
    
    
            alert('你是未成年 学习吧')
        } else if (age <= 25) {
    
    
            alert('青春年华')
        } else if (age <= 40) {
    
    
            alert('好汉不提当年勇')
        } else {
    
    
            alert('男人四十一枝花')
        }

ternary operator

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

        // 判断条件？条件成立时执行的语句：条件不成立时执行的语句
        age <= 18 ? alert('你不要乱跑') : alert('恭喜你，成年了')

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 loop

 // while   一定要有终止条件
        let i = 10
        // while (i > 11) {
    
    
        //     console.log('你是大聪明')
        //     i--
        // }


        do {
    
    
            console.log('你是大聪明')
            i--
        } while (i > 11)

for loop

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

loop nesting

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

continue、break

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

Cyclic reinforcement

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

array

// 有序的数据序列
        //             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))

Two-dimensional array

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 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
        }

recursion

function jiecheng(n) {
    
    
            if (n === 1) {
    
    
                return 1
            } else {
    
    
                return n * jiecheng(n - 1)
            }
        }

array traversal

let arr = ['a', 2, 3, 4, 5, 6]
        for (let i = 0; i < arr.length; i++) {
    
    
            console.log(arr[i])
        }

Common Methods for Strings

 let str = new String()
        // let str = '你是who'
        console.log(str.split('w'))  //以w为基准分离字符串
        console.log(str.substring(2, 4))	//从第几个字符串开始往后多少个是什么
        console.log(str.startsWith('你'))	//判断是否从‘你’开始
        console.log(str.endsWith('你'))		//判断是否从'你'结束
        console.log(str.includes('w'))		//是否包含‘w’

object

 // 对象：无序的数据集合
        let obj = {
    
    
            uname: 'zhangfei',
            age: 21,
            gender: 'nan'
        }
        // 查找对象元素
        console.log(obj.uname)
        console.log(obj['age'])

Addition, deletion, modification and query of objects

let obj = {
    
    
            uname: 'zhangfei',
            age: 21,
            gender: 'nan'
        }
        // obj.uname
        // obj['age']

        // 改：对象.属性名
        obj.uname = 'GGBond'

        // 增加  对象.新属性名
        obj.sing = function () {
    
    
            console.log('sing~')
        }
        // delete 对象.属性名
        delete obj.gender
        console.log(obj)

object traversal

let obj = {
    
    
            uname: 'zhangfei',
            age: 21,
            gender: 'nan'
        }
        for (let k in obj) {
    
    
            console.log(k)
            console.log(obj[k])
        }

array object

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 function built-in object

console.log(Math.E)
        console.log(Math.PI)
        // 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))

        // 随机数  
        // console.log(Math.floor(Math.random() * 11) + 2)
        let random = Math.floor(Math.random() * (10 - 2 + 1)) + 2
        console.log(random)

date function built-in object

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()


        let gg = date.getDay()
        alert(gg)

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




        let a = 3.234364
        alert(a.toFixed(4))

dom function

1.获取元素的方法
// 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'))

2.修改元素的方法
<div class="one">我是一个即将被更改的盒子</div>
    <div class="two">我是一个即将被更改的盒子</div>
    <script>
        // 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>`

3.随机点名案例
let arr = ['赵云', '黄忠', '关羽', '张飞', '马超', '刘备', '曹操']
        // 1、获取元素
        const box = document.querySelector('div')
        // 2、获取随机数   n-0    m---arr.length-1 
        let random = Math.floor(Math.random() * arr.length)
        // 3、改内容
        box.innerHTML = `${
    
    arr[random]}`

4.修改元素属性
<img src="../images/1.webp" alt="刘德华" title="刘德华">
    <input type="text" placeholder="wedjed" readonly>
    <button disabled>同意该协议</button>
    <script>
        // 1、获取元素
        const img = document.querySelector('img')
        const ipt = document.querySelector('input')
        const btn = document.querySelector('button')
        // 改元素属性   对象.属性=值
        img.src = "../images/2.webp"
        img.title = "我是个大帅哥"

        ipt.type = "password"
        ipt.placeholder = "请输入用户名"
        ipt.readOnly = false
        btn.disabled = false
 
 5.修改元素样式属性
 // 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')        //切换：有则删除，没有则添加

timer

// setTimeout\setInterval   定时器
        // setTimeout  :某段代码或者函数在多久后执行
        // setTimeout(code||function,time(ms))
        // 返回值是一个整数，代表定时器编码
        // let timer = setTimeout('console.log("我是一秒之后执行的代码")', 4000)
        // console.log(timer)
        // let timer2 = setTimeout('console.log("我是4秒之后执行的代码")', 1000)
        // 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)