web课程笔记--js篇

css补：

盒子阴影：box-shadow ，text-shadow 文字阴影

        div {
            width: 300px;
            height: 300px;
            background-color: pink;
            /* 10px:x轴的偏移量        20：y轴的偏移量    inset:内阴影      30：模糊半径 */
            box-shadow: inset 10px 20px 30px;
        }

        p {
            /* 文字阴影 */
            text-shadow: 10px 10px 2px;
        }

多列显示：colum-count：3；显示的列数，column-gap：30px；显示的间距

        p {
            /* 以几列进行显示 */
            column-count: 3;
            /* 列于列之间的间距的 */
            column-gap: 30px;
        }

媒体查询：根据窗口大小做出相应的改变

      /* @media only screen and (min-width: 320px) and (max-width: 480px) */
        div {
            width: 400px;
            height: 50px;
            background-color: aqua;
        }

        @media screen and (min-width: 900px) {
            div {
                background-color: pink;
                color: rgb(195, 19, 48);
            }
        }

当窗口大小，大于等于900px时背景和字体颜色改变。

js：

js引入方式：写在body的最后一栏：<script src="./06-外部.js"></script>外部引用

或者直接写，同样是写在body的最后

    <script>

        document.write('你好，javascript')

        console.log('aaa')

    </script>

js常用语句：document.write(`我是js的插入语句`)

console.log(`你真6`)//控制台输出语句

alert（`警告，你小子立刻退出`）//警示框

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)

用户名输入案例

    <script>

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

        document.write(uname)

    </script>

用var声明变量的注意事项：

var  不存在块级作用域        可以先使用，后声明（但是仍然没有值）          多次声明同一变量

常量：const

    <script>
        // 常量：存储的数据不能再变化   const  常量名
        const GENDER = 'nv'
        // GENDER = '男'
        console.log(GENDER)
    </script>

数据类型检测方法：typeof（）

        let b = "欢迎你加入js "

        console.log(typeof (b))

输出字符串拼接：

 let uname = 'zs'
        let age = 21


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

模板输出字符串拼接：（`${变量名}`）

   let uname = prompt('请输入用户名：')
        let password = prompt('请输入密码：')
        document.write(`<h1>用户名是:${uname},密码是：${password}</h1>`)


        let a = `gouxin`

数据其他类型：布尔类型，undefined未定义，null空的，NaN not a number

数据类型转换：隐式转换/显式转换

隐式转换，输出结果为23，将a转换为字符串类型

         let a = 2
         let b = '3'
         console.log(a + b)

显示转换：Number（）或者+    转换为number变量

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

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

console.log(num1 + num2)

运算符： +  -  *   /    %取余

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

         let c = b--

c先等于b，b再减1

        自增  自减

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

let c=++b

c=b+1，b=b+1

比较运算符：>  <  >=   <=  ==   ===全等于类型和值都相等

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

逻辑运算符：与 &&两真才真   或 || 一真则真   非！ 相反

选择：

单分支语句：if（判断条件）{执行的代码块}

双分支语句：if（判断条件）{执行代码块1}

                     else{执行代码块2}

多分支语句：if（判断条件1） {执行代码块1}

                         else if（判断条件2）{执行代码块2}

                        else if（判断条件3）{执行代码块3}

                        else{执行代码块4}

三元运算符：判断条件？成立时执行的代码块 ：不成立时执行的代码块

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

switch语句：

switch（）{

case 条件值 ：代码块1；break；//无break会依次向下执行代码

case 条件值 ：代码块2；break；

case 条件值 ：代码块3；break；

....

default：代码块；//default无符合条件时，执行代码

}

循环：

for循环：for（let i=0；条件判断；i++）类似

while循环：while（条件判断）{

执行代码；

i++；//注意不要死循环

}

do...while循环：do{

代码块1；

i++//注意不要死循环

}while（条件判断）

break/continue:break退出循环，continue退出本次循环

嵌套循环：for（）{

         for（）{}

}

可用于二维方阵排列，第一个for代表行，第二个for代表每行的元素

数组：

声明方式：let arr = []；//可直接在[]内添加值