JavaScript基础知识day01

一、认识JS

1.web三大标准:

            结构(html)  骨架

            表现(css)   肉体

            行为(js)    灵魂

2.javascript和java是什么关系？

             没关系

3.JavaScript的特点: 

        弱类型语言

                    java是强类型语言，以声明变量为例，float num = 0.23F; 需要指明数据类型

                    在js中，不需要指定数据类型 var num = 0.121;

        跨平台

                    js语言既可以运行在html文件中，也可以运行在node环境中.....

                    js也可以写服务器

4.JavaScript的组成：

        ECMAScript(核心语法)

        DOM(Document Object Model)档对象模型

        BOM(Brower ...) 浏览器对象模型

二、JS的引入

1.行内式  强烈不推荐---低耦合

<button onclick="alert('确定');">点击一下</button>

     禁止a标签跳转

<a href="javascript:void(0)">百度一下</a>

2.内联式

        js代码写在script标签中，页面中可以有多个script标签 

        执行顺序从上到下依次执行

    <script>
        var name = "张三";
        console.log(num);
        console.log(name);
        console.log("5+6");
        var userlist = [
            {
                name : "张三",
                age : "18",
            },
            {
                name : "李四",
                age : "22",
            },
            {
                name : "王五",
                age : "34",
            }
        ]
        console.log(userlist);
        alert('确认');
    </script>

 3.引入外部js文件   XXXX.js

        外部的css文件通过link标签引入

        外部js文件通过script标签的src属性引入

        script标签中只要存在src属性，标签内部的代码不会被执行

        先引入，在使用

     <script src=""> 
    //  内部的代码不执行
        console.log("121");
     </script>

三、JS的输出

1.输出到控制台

            console.log()     简写log 

            console.dir()     显示详细信息  没有简写

            console.table()   输出表格

            console.clear()   清空控制台

            console.error()   输出错误信息

            console.warn()    输出警告信息

2.输出到页面

                2.1 document.write("")

                    将内容添加到body标签内，不会覆盖之前的内容，会识别html标签

                2.2 innerHTML("")

                    将内容添加到指定标签中，会覆盖之前的内容，会识别html标签

                    标签.innerHTML = ""

                2.3 innnerText("")

                    将内容添加到指定的标签中，会覆盖之前的内容，不会识别html标签

                    标签.innerText = ""

                怎么获取指定的标签：

                document.querySelector("css选择器");

3.弹窗

            3.1 弹框 alert("")   window.alert()

                点击确定返回值是undefined

            3.2 输入框 prompt("")

                点击确定返回值是用户输入的内容，点击取消返回值是null

            3.3 确认框 confirm("")

                点击确定返回值是true  点击取消返回值是false

四、变量声明

            变量：临时存储数据（任意数据源类型）的一个容器

            var 关键字 声明变量（es5）   let和const声明变量方式（es6）

            变量名只能由字母，下划线，$，数字组成

            不能以数字开头,严格区分大小写

            不能是关键字或者保留字

            多个单词使用驼峰式命名法

            可以但尽量不要用中文

        var $_ = 121;
        var knNl = '张';
        var public = "111";
        var name = "张三";//声明一个变量，变量名是name，存储的值是字符串类型
        console.log(name,$_,knNl,10*2,public);

五、数据的类型

1.数据类型：

                1.1基本数据类型 原始数据类型（栈内存）

                    string  number  Boolean  null  undefined

                1.2引用数据类型（堆内存）

                    数组Array 对象Object 函数 Function

2.检测数据类型   typeof操作符

                语法：typeof xxx 或者 typeof(xxx)

            1.字符串 string

            用引号(""/''/`)引起来的数据

        // 字符串 + XXX：  +表示拼接符

 // es5 引引加加

console.log('名字是' + nam + '，地址是' + address + '，专业是' + major);

 // es6 `${变量名}`

console.log(`名字是${nam}，地址是${address}，专业是${major}`);

// es5需要换行，需要转义   \n表示换行

console.log("hell\n223");

// es6会保存代码的格式

console.log(`awd
        
            da  122`);

1.2 数值类型 number  

                整数  小数  Infinity（无穷大） NaN(不是一个数)

                涉及到NaN的操作返回值是NaN，NaN与自身不相等 

小数精度丢失问题：

        将小数转化为整数运算

        toFixed（n） n表示保留n位小数  默认是0  返回的string类型

 在运算的时候，会将其他数据类型转换为数值类型在进行计算

                将其他数据类型转化为数值类型的方法  

                Number（xxx）      

        console.log(Number(''));//空字符串 0
        console.log(Number(' '));//非空字符串 0
        console.log(Number('123'));//123
        console.log(Number('12x3'));//NaN
        console.log(Number(true));//1
        console.log(Number(false));//0
        console.log(Number(null));//0
        console.log(Number(undefined));//NaN

paresInt（） 返回整数部分 ，前导有0会忽略,第一个字符是非数字返回NaN

返回值是整数或者NaN

        console.log(parseInt("012.223ac"));//12
        console.log(parseInt("as2.223ac"));//NaN
        console.log(parseInt("Infinity"));//NaN
        console.log(parseInt(true));//NaN
        console.log(parseInt(null));//NaN

parseFloat（） 前导有0会忽略,第一个字符是非数字返回NaN

返回值是整数或者NaN 或者Infinity或者-Infinity

        console.log(parseFloat("012.223ac"));//12.223
        console.log(parseInt("Infinity"));//Infinity

        isNaN(XXX) 判断数值是不是NaN

        XXX是NaN的结果为true  不是为falese

        console.log(isNaN(NaN));//true
        console.log(isNaN("NaN"));//true
        console.log(isNaN(""));//false
        console.log(isNaN(Infinity));//false
        console.log(isNaN(undefined));//true

 1.3 布尔类型 boolean

            真 true   数值1

            假 false  数值0

 1.4null和undefined

            null表示一个空值，

            undefined未定义，声明变量没有赋值，浏览器给变量附一个空值，

            这个空值叫做undefined

            =   赋值，优先级最低，将等号右边的数据赋值给左边

            ==  判断符号两边的值是否相等，只判断值不判断类型，返回值是布尔类型

            === 判断等号两边的值和数据类型是否全等，及判断值又判断数据类型

         var nul = null;
         var a ;
         console.log(nul,a);//null  undefined
         console.log(typeof nul,typeof a );//object  undefined

         console.log(null == undefined);//值是相等的，都表示空值，null是自己赋值
         console.log(null === undefined);//值是相等的，数据类型不等

六、数据类型相互转换

1.转换为string

1.1加个空字符串

        console.log(100+'');//'100'
        console.log(true+'');//'true'
        console.log(null+'');//'null'

1.2XXXX.toString()   null和undefined没有toString（）方法，调用会报错

        console.log((1000).toString());
        console.log(true.toString());

1.3String(XXXX)    null和undefined可以使用

2.转化为布尔类型

            数据类型                      true                     false

            string                        非空字符               空字符

            number                    非0非NaN             0 和NaN

            null                                 /                           null

            undefined                      /                       undefined

            引用数据类型        引用数据类型                  /

        console.log(Boolean(''));//空字符串false
        console.log(Boolean(' '));//非空字符串true
        console.log(Boolean(0));//false
        console.log(Boolean(NaN));//false
        console.log(Boolean(11));//false
        console.log(Boolean(null));//false
        console.log(Boolean(undefined));//false
        console.log(Boolean([]));//true

3.隐式转化  将其他类型转换为数值类型   + - * / %

 console.log(+'123');//number 123

 七、运算符

1.一元操作符：针对一个变量

                一元加   num++   ++num

                一元减   num--   --num

2.三目运算符：   表达式？语句1：语句2

         语句1为表达式真执行的语句   语句2为表达式假执行的语句

3.比较运算符：返回值是布尔值

                >    <    <=    >=    ==    !=    ===    !==

            两个都为数值直接进行比较

            数值和字符串进行比较，将字符串转换为数值类型在比较

            布尔值和数值进行比较，将布尔值转换为数值

            null和undefined进行比较，null==undefined为true

            引用类型比较，先调用valueof()方法获取原始值(一般为它本身)，在调用toString()方法

            字符比较，比较的是ASCII码，字符一次比较，相等则比较下一个