js基础知识

实习总结第二天

每日一句英语

The secret of success in life is for a man to be ready for his opportunity when it comes. 人生成功的秘诀是当机遇来临时要及时地抓住它。

一、js与java的区别

js	java
js为解释型语言，js运行在浏览器上	java为编译型语言，java运行在jvm上
js为弱类型语言，赋值时才确定变量的类型	java为强类型语言，变量声明的时候已确定类型
js为浏览器端语言，运行在浏览器上	java为服务器端语言，运行在jvm上

##二、js的组成

1. 语法

2. 变量

3. 数据类型

4. 关键字和保留字

5. 操作符

6. 流程控制语句

7. 数组

8. 对象

9. 函数

10. 正则表达式

三、js

1. 变量

   • 声明

     • 常量的声明：const a=1;
     • 变量的声明：let b;

   • 赋值

     • b="hi world";

   • 访问

     • console.log();//打印到控制台中

2. 数据类型

   • js有5中基本数据类型

     • number

       • let a=3;
         let b=3.5;
         let c=011;//八进制
         let d=0x11;//16进制
         let e=1+undefined;//NaN(not a number)
         

     • string(有三种方式创建字符串)

       • let a ="hello world";
         

       • let b ='hello world';
         

       • let c =`hello world`;
         

     • boolean

       • let a=true;
         

       • let c =false;
         

     • undefined

       • let a;
         

     + null
    	
     	+ ``````javascript
   let a=null;
     	  ``````
   
   + java有8中基本数据类型+String
   
     + byte
   

• short

  • int
  • long
    • float
  • double
    • boolean
  • char

• 引用数据类型

  • js中除了基本数据类型其余全是引用数据类型

    • 数组类型

      • 例如let array=[1,3,5];

    • 对象类型

      • 例如let a = {name:"tom",age:12};

    • 函数

      • 例如let foo=function (a,b){let total=a+b;result a+b;}

    • js中如何检测数据类型

      • 通过 typeof数据来检测，例如：var result=typeof a;

  • 操作符

  • 算术运算符

    • +、+=

    • -、-=

    • *、*=

    • %、%=

    • 逻辑运算符

      • &&(同真则真，有假则假)

    • 如果第一个表达式为真，第二个表达式就可以决定整个表达式结果，返回第二个表达式

      • 如果第一个表达式为假，整个表达式结果就已经确定，直接返回第一个表达式，无需判断第二个表达式

    • ||(有真则真，同假才假)

      • 如果第一个表达式为真，整个表达式结果就已经确定，直接返回第一个表达式，无需判断第二个表达式

    • 如果第一个表达式为假，第二个表达式就可以决定整个表达式结果，返回第二个表达式

    • !

  • 比较运算符

    • >或>=

    • <或<=

    • ==或!=

      • 当比较基本数据类型的时候，比较值时，当值类型不同，先转换再比较

      • 当比较引用数据类型的时候，比较引用地址

    • ===或!==

    • 当比较基本数据类型的时候，先比较数据类型，如果数据类型不同直接返回false,否则再进一步比较值

      • 当比较引用数据类型的时候，比较引用地址

    • 三目运算符

      • A=(b>c)?d:e

    • 一元运算符

      • +
      • -

    • 自增

      • ++

    • 自减

      • --

  • 类型转换

  • 流程控制语句

    • 分支语句

      • if

      • if-else

      • if-else if-else

      • switch-case

        let v = 1;
                switch(v){
                  case c1:
                    exp1;
                    break;
                  case c2:
                    exp2;
                    break;
                  ...
                  default:
                    exp;
                    break;
                }
        // v 与 c1对比采用的是 ===, 意味着先比较数据类型在比较值
        //default在最后可以不添加break。但是当default位于其他地方的时候一定要添加break;
        

    • 循环语句

      三要素：初始化条件、结束判定条件、迭代

      • for循环

        for(初始化条件;结束判定条件;迭代){
        循环体；
        }

            
          let result = 0;
                for(var i=1;i<=100;i++){
                  result += i;  // result = reuslt + i;
                }
        

      • while循环

        初始化条件；
        while(结束判定条件){
        循环体；
        迭代；
        }

          let result = 0;
                let i = 1;
                while(i<=100){
                  result += i;
                  i++
                }
        

      • do-while循环

        初始化条件
        do{
        循环体；
        迭代；
        }while(结束判定条件);

        •         let result = 0;
                  let i = 1;
                  do{
                    result += i;
                    i++;
                  } while(i<=100);
          

  • 对象

    • 初始化对象

      使用双大括号作为对象的边界，对象有键值对组成，键值对与键值对之间通过逗号",“分割，属性名与属性值通过冒号”:"分割

      • var obj = {name:"terry",age:12,gender:"male",sayName:function(){}};
        

      • 构造对象

         var obj = new Object();
                obj.name= "terry";
                obj.age = 12;
                obj.gender = "male"
        

      • 对象属性访问

        • 点访问

          obj.name //访问obj对象中的name属性

        • 中括号访问符

          • 中括号解析变量

            let name = "name"
            obj[name]   
            //首先先将name解析为"name"(常量)，然后从obj中获取name属性
            

          • 中括号解析常量

            obj["name"] //直接从obj中获取name属性
            

      • 遍历对象

        for(let k in obj){
            let k=obj[k];//k表示obj中的属性名，每次循环，for循环都会从obj中获取一个属性名赋值为k
        }
        

  • 数组

  • 函数

    方法，js中的函数比java方法更强大一些，它实际上是方法和类的统称

    • 函数的定义

      • 函数声明

        function 函数名(形式参数){

        }

        function foo(a,b){
                  let result = a+b;
                  return result;
                }
        

      • 函数表达式

        var 函数名 = function(形式参数){

        }

          var foo = function(a,b){
                  let result = a+b;
                  return result;
                }
        

    • 函数调用

      • 函数名(实际参数)

        let result=foo(1,3);
        

    • 回调函数

      我调用你的函数，你的函数在执行的时候又返回来调用我的函数

      • 回调函数与普通函数的区别

        回调函数在调用时调用的参数是一个算法，而普通函数在调用时调用的参数是数据

        //普通函数
        var test=function(e){
            console.log(e);
        }
        test("hi");
        //回调函数
        var test=function(e){
            console.log("hi");
        }
        test(function(content){
            console.log(content);
        })
        

四、html基础

1. 块元素
   • 块元素有：div、h1-h6、p、ul>li、dl>dt、dd ol->
   • 独占一行空间，高度由内容决定。可以自定义宽和高
   • 主要用于搭建页面框架
2. 行内元素
   • 行内元素有：span a img i em strong
   • 与其他行内元素共享一行空间，宽高都由内容决定，无法自定义宽和高
   • 主要是在框架内部填充的作用

五、css基础

1. 选择器

   • 类选择器
     • 语法为：.first{}//选中class为first的元素
   • id选择器
     • 语法为:#first{}//选中id为first的元素
   • 标签选择器
     • 语法为:div{}//选中所有的的元素
   • 父子选择器
     • 语法为:.first>div{}//选中class为first的所有div孩子元素
   • 后代选择器
     • 语法为:.first div{}//选中class为first的所有div后代元素

2. 基础布局

   1. 浮动布局

   2. 定位布局

   3. 伸缩盒布局

      • display:flex;//变为伸缩盒元素
        flex-direction:row;//子元素沿着行来排列
        justify-content:space-between;//空白介于中间