认识前端设计JavaScript

1.基础知识

JS
JavaScript 是一种具有面向对象能力的、解释型的程序设计语言。

使用方式:
    JS需要和HTML一起使用才有效果，我们可以通过直接或间接的方式将JS代码嵌入在HTML页面中。
    行内JS : 写在标签内部的js代码
    内部JS : 定义在script标签内部的js代码
    外部JS : 单独的js文件，在HTML中通过script标签引入

测试js中的调试:
   1.alert() 弹出框
   2.document.write("你好啊,中国队必胜!!!");
      内部可以识别html语法结构
      当原页面中的内容加载完毕之后触发document.write,会覆盖原页面
   3. console.log() 控制台输出打印 -> 推荐
      console.info()
      console.error()
      console.warn()

<script>
    alert("哈哈");
    alert("呵呵");
    alert("嘿嘿");

    document.write("<h1>标题</h1>");

    console.log("日志输出")
    console.info("信息输出");
    console.error("错误输出");
    console.warn("警告输出");
    /*空语句*/
    ;;
</script>
<button onclick="document.write('你好啊,中国队必胜!!!');">按钮点击</button>

2.变量

变量:   存储单个数据|表达式
js是一个弱类型语言
java是强类型语言

  定义:
      声明的同时赋值
          var 变量名 = 赋值;

      先声明后赋值
          var 变量名;
          变量名 = 赋值;

    注意:
      js中变量的数据类型有值决定
      js中的变量不赋值存在默认值 undefined未定义
      变量的作用域提升: 只提升变量的声明,不提升变量的赋值
      变量的定义可以省略var的声明,不能发生作用域的提升

<script>
    /*
    *   var i = undefined;
    *   var username = undefined;
    * */
    console.log(username);
    //console.log(w);

    //声明的同时赋值
    var i = 1;

    i = "";

    //先声明后赋值
    var username;
    username = "zhangsan";

    //同时定义多个变量
    var x=1,y=2,z=false;
    console.log(x,y,z);

    var b;
    console.log(b);

    w = 1;
    console.log("w = " + w);

</script>

3.数据类型

数据类型:
    简单|基础数据类型
        1.String 字符串  ->黑色
            一对''|""表示字符串
            包含0~n个字符
            通过转义字符进行转义

        2.Number 数值型
            整数  小数
            NaN not a number 不是一个数字
                1)直接赋值NaN
                2)当运算无法得到一个正确结果

        3.Boolean 布尔型
            true | false
            常常用于对条件判定结果类型

        4.Undefined 未定义
            1) 直接赋值undefined
            2) 声明变量未赋值默认undefined

        5.Null 空
            1) 直接赋值null
            2) 获取不到元素

           Null 与  Undefined之间的区别:
            1.undefined : 存在,但是没有值
            2.null : 元素不存在

        6.Function 函数型
            function 函数名(参数列表){
                函数体;
            }
            通过函数的调用使用

    复杂|复合数据类型
        对象类型
        {} 表示对象
        有键值对组合而成
        {
            key:value,
            key:value,
            键值对
        }
        两个键值对之间使用,分隔,最后一个键值对的后面不加,
        KEY与VALUE之间使用:分隔
        key : 如果符合命名规范可以直接定义,不符合命名规范.需要前后加引号
        value : 可以为任意类型

<script>
    var str1 = "abc";
    var str2 = 'it\'s';
    var str3 = '123';
    console.log(str1,str2,str3);

    var num1 = 123;
    var num2 = NaN;
    var num3 = 5/'A';
    var num4 = 1.234;
    console.log(num1,num2,num3,num4);

    var n1 = null;

    //函数
    function fun(){
   
        console.log("这是一个函数");
    }

    //fun();

    //对象
    var obj = {
   };  /*空对象*/
    var obj2 = {
   
        name : 'zhangsan',
        age : 18,
        "girl friend" : null,
        son : {
   
            name : 'haha'
        }
    };
    console.log(obj);
    console.log(obj2);
    console.log(obj2.name);
</script>

4.typeof运算符

typeof : 运算符 帮助判断数据的类型
    返回一个字符串形式的小写的数据类型
    Number  ->   number
    String  ->   string
    Null  -> object
    Undefined -> undefined
    Boolean -> boolean
    Function    -> function
    Object -> object
 语法:
    typeof(数据)
    typeof 数据