前端day8-js01：js的引入，基础，流程控制，for，while，break，continue，函数

1. css样式初始化的原因：浏览器兼容问题
2. 选择器优先级问题
3. Css样式特性：继承 层叠 无序
4. 盒模型的组成：content
5. 显示与隐藏的方式
6. 页面布局的常用方式：margin  padding   float   定位     flex布局
7. 清除浮动：父元素overflow  双伪元素选择器   添加额外的空元素

Css常见面试题

JS组成：

基础语法ECMAScript    页面对象模型dom 浏览器对象模型bom

JavaScript | MDNhttps://developer.mozilla.org/zh-CN/docs/Web/JavaScript

 <!-- js的引入

    1.内部写法 在body中添加 script标签 -->

    <a href="javascript:alert('Hello world');">啦啦啦</a>


    <!-- js脚本作为body的最后一个元素 -->

    <script>

        //单行注释

        /* 多行注释*/

        alert("啦啦啦");

    </script>

    <!-- 2.引入外部的js文件 src指定文件路径 -->

    <script src="./01test.js"></script>

    <!-- 3.类似于行内样式 不常用 代码可读性差 -->

    <div onclick="alert('Hello world')">啦啦啦</div>

//声明变量

        //变量的作用：用来存储数据

        //let const es6提出的

        //var variable可变的 a变量名

        var a;

        //变量名命名规则：

        //     1. 语义化

        //     2. 不能以特殊字符开头（ 除$, _） 数字开头

        //     3. 不能使用关键字

        //     4.小驼峰命名法 phoneNum（编程中的命名规则）

        //变量的赋值   =赋值运算符 从右向左

        //声明的赋值变量的初始化

        var b = 20;

        //控制台输出 查看变量的值 非常重要的调试手段

        //console控制台 log日志

        // "a"   'a'字符串

        console.log('a=', a);

        console.log(a);

        console.log(b);

        //同时声明多个变量

        var x, y, z;

        var q = 1,

            w = 2,

            e = 3;

        //打印一个没有定义的变量 程序报错  

        //未捕获的 引用错误 r没有被定义

        // Uncaught ReferenceError: r is not defined

        console.log('a=', r);

        // js中的数据类型

        //1.值类型（基本数据类型）

        //number数字   string字符串 bool布尔值 null空 undefined未定义 NaN not a number

        //2.引用类型（对象类型）  Array数组 object对象 function方法（函数）

        //数字运算符 +  -  *  /  %取余  范围：[0,n)

//++ -- += -= *= /=

        let num = 10; //num=num+1

        //2**4=2的4次方

        //++在前 先自增再运算

        //++在后 先运算再自增


        //比较运算符

        //> < >=  <=  == !==   ===恒等 数值相同 类型相同


        //逻辑运算符

        //&&全真为真   ||全假为假     !取反

        console.clear();




        //字符串的拼接

        var fn = "zhang";

        var ln = "san";

        var fullName = fn + ln;

        console.log(111 + 222 + "3333")

            //* -  /  都会将字符串隐式转换 为数字进行运算


        //作业：其他数据类型

        //  null空 undefined未定义 NaN


        //流程控制

        //判断语句

        // 如果否则 有且只能执行一个   （表达式） 只有当表达式成立时 执行{逻辑}

        // if () {} else {}

        // if () {} else if {} else if {} else if {}

        //有且只能执行一个

        //多个if 根据条件 确认执行哪个

        // if () {}

        // if () {}

        // if () {}

        // 一定不要忘记添加break:打断 终断

        switch (key) {

            case 1:

                break;

            default:

                console.log("默认 缺省...如果以上条件都不满足 则执行default")

                break;

        }

        //bool变量 常用于判断中 !

        //三目运算符   条件? 值1: 值2;

        // 条件满足取值1

        // 反之 取值2

        var x = 10;

        var y = 1;



         // 循环  解决重复性的业务逻辑的
        // var i = 0 ; 初始值
        //  i < 10  ; 循环条件
        // i++;  控制循环跳出条件
        // 1.基本使用
        for (var i = 0; i < 10; i++) {
            console.log("i = ", i)
        }

        // 2.条件是都可以改变的
        for (var i = 10; i > 1; i -= 2) {
            console.log("===============")
        }

        var j = 0;
        for (; j < 10;) {
            j++;
            console.log("j = ", j);
        }
        // 使用循环时 一定要注意  不要出现死循环
        // for(var i = 0; i < 10 ;i--){
        //     console.log("i = ",i)
        // }

        // 1.计算1-100 的和
        var sum = 0;
        for (var i = 1; i < 101; i++) {
            sum += i;
        }

        console.log("sum = ", sum);

        // 2.计算 1- 100 偶数的合

        var even = 0;
        var odd = 0;
        for (var i = 1; i < 101; i++) {
            if (i % 2 === 0) {
                even += i;
            }
            else {
                odd += i;
            }
        }
        console.log("sum1 = ", even);

        // 3.计算 10!的值
        // 1*2*......*10
        var sum2 = 1;
        for (var i = 1; i < 11; i++) {
            sum2 *= i; // 1!  
            // 2!
            // 3!

            //    sum2 = sum2 * i
        }
        // 3628800
        console.log("sum2 == ", sum2);

        // 4.计算 1! + 2! +3！ + .....+10!;

        var sum3 = 1;
        var result = 0;

        for (var i = 1; i < 11; i++) {
            sum3 *= i;
            result += sum3;
        }
        console.log("result == ", result);


        // 双层for循环
        for(var i = 0;i < 5;i++){
            console.log("11111");
            for(var j = 0;j < 5;j++){
                console.log("222222");
            }
        }
        // 1 2 2 2 2 2 1 2  2 2 2 2 1 2 2 2 2 2 1
        
        var num = prompt("请输入一个数");
        console.log("num = ",num)

 // break 打断  continue 继续
        // for(var i = 0;i < 5;i++){
        //     console.log(123);
        //     if(i === 2){
        //         // break;// 终止循环的执行 终止的是所在层级的for循环
        //         continue;// 终止本次  继续下一次
        //     }

        //     console.log("aaaaaaa");
        // }
        

        // // 添加标识  用于循环的跳出
        // suibianxie:
        // for(var i = 0;i < 3;i ++){
        //     console.log(111111);
        //     for(var j = 1;j < 5;j++){

        //         console.log(222222222222);

        //         if(j === 2){
        //             break suibianxie;
        //         }
        //     }
        // }
        
        // while 当....时候 
        // var num = 10;
        // while(num > 1){
        //     num--;
        //     console.log("业务逻辑");
        // }
        
        // 无论条件是否成立 都会先执行do中逻辑
        var num = 10;
        do {
            num--;
            console.log("hhhahhh ")
        } while (num>1);

函数

 // 1. 无参数 无返回
        // 方法  函数
        // 对一个功能逻辑的封装
        // function 功能  关键字 
        // 关键字  方法名 (参数列表) {方法体}

        function findGirlFriend() {

            console.log("找呀找呀找朋友 找到一个女朋友");
        }
        // 调用函数 
        findGirlFriend();

        // 可以多次调用 根据业务需求
        findGirlFriend();
        findGirlFriend();

        // 2.有参数的 
        // hour 形式参数  壳子 用来存数据
        // 传递的为 数字类型
        function playgame(hour) {
            console.log("打了" + hour + "小时的游戏");
        }

        //  调用时 () 中的值 为实参
        playgame(10);

        playgame(1);

        // 传递的是字符串类型
        function qiming(name) {
            console.log("起的名字是： ",name);
        }

        qiming("齐天大圣");

        // 定义方法可以指定任意类型的参数 

        // 3.方法的参数可以有多个  多个参数可以是任意类型 
        function sendData(uname,psw){
            if(uname === "admin" && psw == 123){
                console.log("成功");
            }
            else{
                console.log("失败");
            }
        }
        // 参数是有顺序的
        sendData("admin",123);

        sendData("admin",1234);

        // 4.无参数 有返回值
        // 带有返回值的方法必须要添加关键字 return 
        function getMoney() {
            // todosomething ....
            console.log("无意义的代码 11111");

            return 100;
            // return 之后的代码不再执行
            console.log("无意义的代码");

        }

        // 对于有返回值的方法 一般需要接收返回值  参与业务逻辑的运算
        var money = getMoney();
        console.log("money = ",money);

        // 5.有参数 有返回值
        function sum(a,b) {
            return a+b;
        }

       var result = sum(10,10);
       var result1 = sum(100,10);