javascript基础(一)

一.js的使用方式:

1.方式一:js的内部方式

   1>注释(与java注释语法基本相同,没有文档注释)

        ①单行注释 

            语法://单行注释的内容;

        ②多行注释

            语法:/*多行注释的内容*/

    2>在浏览器中打印内容,类似Java中的输出语句(System.out.println("想要打印的内容");),此部分用户可以看见

        语法:document.write("想要在浏览器总打印的内容");

    3>在浏览器控制打印内容;

        语法:console.log("想要在控制台中显示的内容");

    4>在浏览器中弹出提示框

        语法:window.alert("想要弹出提示框里的内容");

        由于window对象是浏览器中的顶级对象,故可以省略不写,则window.alert("想要弹出提示框里的内容");可以简写为:

        alert("想要弹出提示框里的内容");

2.方式二:js的外部方式

    1>我们需要在js文件夹中单独创建后缀为.js的文件,在其中书写我们所需要的js代码,当我们当前的html文件需要使用时,我们直接将该js文件打入即可!

    2>在js文件中书写js代码直接书写即可,注意排版;

    3>导入外部js文件的语法:

        <script src="外部js文件路径"></script>

        注意:一定要写结束标签,否则会对后续代码产生不良影响;

二.javascript中的变量以及基本数据类型

1.js中的基本数据类型

    1>无论是小数还是整数,都是number类型,---->js引擎会将其自动提升为Number对象类型;

    2>无论是字符串还是字符,都是string类型,---->js引擎会将其自动提升为String对象类型;

    3>boolean类型---->js引擎会将其自动提升为Boolean对象类型;

    4>object类型(创建一个对象)---->js引擎会将其自动提升为Object对象类型; 注意:在js中Object对象代表所有js对象的模板;

    5>undefined类型:未定义类型(这种类型没有意义),因为没有赋值!

    

2.定义变量的注意事项

    1>在js中定义变量,使用var来定义,var可以省略不写(初学者建议写上,便于区分);

    2>由于javascript是弱类型语言,它的结构语法不严谨!因而可以重复一个变量,后面的变量值会覆盖前面的变量值;

    3>查看js变量的数据类型是通过变量的值来确定的,使用函数typeof(想要查看的变量的变量名);

    4>var可以接收任意数据类型!

三.js中的运算符

1.算术运算符

  符号:+正，-负，+加，-减，*乘，/除，%取模（取余），（前）++，（后）++，（前）--，（后）--;

2.赋值运算符

符号：“=” ，“+=”，“-=”，“*=”，“/=","%="

3.比较运算符

符号:==，>,<,>=,<=,!=,

4.逻辑运算符

符号：逻辑与--->&;逻辑或---->|; 短路与---> &&;短路或--->|| 

5.三元运算符

格式:（条件表达式）？表达式1：表达式2;

    条件表达式输出结果为true，则输出为表达式1的结果。

    条件表达式输出结果为false，则输出结果为表达式2的结果。

6.注意事项:

    1)java中int类型变量相除默认取整,js是不会的 ;

    2)js是弱类型语言,语法结构不严谨!true,false在运算的时候都有自己的默认值,true是1,false是0; 在实际开发中,不会这样去做的,boolean类型值常常用于逻辑判断;

    3)其余运算符的运算规则基本和java中相同;

四.js流程控制语句

1.顺序结构:js代码从上而下依次加载代码;

2.选择结构:

  1) if-else结构

    ① 基本结构:

          语法:  if(条件表达式){

                    执行代码块;

                }

    ② 二选一结构

        语法:if(条件表达式){

                    执行代码块1;

                }else{

                    执行代码块2;

                }

③n选一结构

          语法:if(条件表达式1){

                    执行代码块1;

                }else if(条件表达式2){

                    执行代码块2;

                }else if(条件表达式3){

                    执行代码块3;

                }....

                }else{

                    执行代码块n;

                }

2)switch-case结构

                switch(表达式){

                    case 可以是常量1/也可以是变量1:

                    执行语句1;

                    break;

                    case 可以是常量2/也可以是变量2:

                    执行语句2;

                    break;

                    ...

                    default:

                    执行语句n;

                    break;

                    

                }

3.循环结构

循环结构四要素

循环结构的四要素

①初始化部分；

②循环条件部分；--boolean类型

③循环体部分；

④迭代部分；

1)for循环结构

    格式:for(①;②;④){

                ③;

            }

    执行顺序:①-->②-->③-->④-->②-->③-->④-->②-->③-->④-->....-->②--false-->执行其他语句

2)while循环结构

    格式:①

            while(②){

                ③;

                ④;

            }

  执行顺序:①-->②-->③-->④-->②-->③-->④-->②-->③-->④-->....-->②--false-->执行其他语句

3)do-while循环结构

    格式:①

            do{

                ③;

                ④;    

            }while(②);

执行顺序:  执行顺序:①-->③-->④-->②-->③-->④-->②-->③-->④-->....-->②--false-->执行其他语句;

注意:

        1)js中switch-case结构中,case后可以是变量也可以是常量;

        2)实际开发中,if里面一个表达式为true或者false,但是由于javascript是弱类型语言,则有以下几种情况:

            ①如果if里面是一个非零的整数则代表条件成立;

            ②如果if里面是一个非空字符,也表示条件成立;

            ③如果if里面是非null的对象,也表示条件成立;

        3)do-while仍然还是会"强制"执行一次;

        4)其他流程语句的应用和java类似;

五.js事件变成三要素

1.事件源---就是html标签的单击,双击....;

2.编写 事件监听器---就是编写一个函数 function 函数名称(){}

3.绑定事件监听器---就是在事件源上加上onxxx属性="函数名称()"

六.在建设中如何创建一个数组

1.方式一: var 数组对象名称 = new Array();不指定数组长度;

2.方式二:var 数组对象名称 = new Array(长度);指定数组长度;

3.方式三: arrayObj = new Array([element0[, element1[, ...[, elementN]]]])

                简写格式:var 数组对象名称 = [元素1,元素2,元素3.....];

注意:1)在js中素组可以存储任何类型的数据,实际开发中还是遵循数据类型一致;

        2)在js中数组的长度会根据数组对象的增大,长度也很会增大

七.for-in类似增强for循环;

1.应用场景:

    1)遍历数组

    2)遍历对象属性

2.语法格式:

    far(var 变量名 in 数组或者对象名){

        使用变量名;

    }

八.js中的函数定义以及调用

1.方式一:

         1)语法格式:

                function 函数名称(形参列表){

                        函数体;(类似方法体,业务逻辑)

                        直接输出结果:document.write(输出函数体输出力的结果,类似于Java中的输出语句System.out.println());

                }

        2)调用:

            单独调用

            格式:函数名称(实参列表)

2.方式二:

        1)语法格式:

                  function 函数名称(形参列表){

                        函数体;(业务逻辑)

                        return 结果;

                }

        2)调用:

            赋值调用

            格式 var 最终结果变量 = 函数名称(实参列表);

            document.write(最终结果变量);

3.定义函数的注意事项:

    1)js是弱类型语言,定义函数的时候,参数名称不能携带var;

    2)js定义的时候,没有返回值类型,但是函数可以写单return语句,代表函数结束;

    3)js中没有函数重载的概念,如果函数名相同,后面定义的函数将会将前面定义的函数覆盖掉;

    4)实参列表<形参列表;函数依然会被调用,不过只是"NaN",有一个形参未赋值;

        实参列表>形参列表;将实参列表的值赋值给形参列表,多余的实参列表直接忽略不计;

    5)隐藏一个数组名称 :arguments,作用:将实参绑定给形参;

九.js内置对象Date

1.js内置对象:

                     Date,日期

                    String,字符串;

                    Array数组;

                    正则表达式对象;

浏览器在解析javascript的时候,内购识别这个对象,使用里面的方法;

2.js内置对象Date的使用

    1)创建日期对象

        语法格式: var date = new Date();

    2)获取年份

        ①getYear():表示的是当前年份与1900年之间的差距

         语法格式:var year = date.getYear(); 

        ②getFullYear():表示获取当前年份

        语法格式:var year = date.getFullYear();

    3)获取月份

        getMonth():返回值处于0到11之间的整数;

       语法格式: var month = date.getMonth()+1; 

    4)获取月中的日期

        getDate():1~31之间的整数;

        语法格式 var day = date.getDate();

    5)获取小时值

        语法格式: var hour = date.getHours();

    6)获取分钟值

        语法格式: var minutes = date.getMinutes();

    7)获取秒值

        语法格式: var seconds = date.getSeconds(); 

十.innerText和innerHTML属性之间的区别:

任意标签都有innerText与innerHTML这两个属性;

这两个属性代表设置便签文本的内容;

innerHTML可以加入html标签,可以被解析(推荐)

innerText只是普通的文本内容,不能够解析html标签,如果加入html标签就会原封不动的解析成普通文本