3.JavaScript

1.JS的基础语法
  1.1 变量（重点）
外部JS引用

<script src="../js/my.js"></script>

 
js概述：是一种脚本语言，依附于浏览器中，进行一些触控效果 
网页三剑客： html是基本架构    css是美化效果    js是触控效果

            alert("hello,js2");
            /* 在页面中打印输出 */
            document.write("hello,jsp3<br />"+"<br />");
            /* 通过typeof求出值的类型 */
            var a;//undefined关键字、undefined类型

    
js是弱类型语言，在定义时，都是var类型   ；
java是强类型语言，根据值的不同使用不同数据类型约束
1  和java类似，js也可以进行字符串拼接

            var b = 1;   //number
            b = 3.14;//number
            b = "abc";//string
            b = true;//boolean
            b = null;
            document.write((typeof b)+"<br />");  //object
            document.write(a+1); //undefined+1==NaN  not a number
            document.write(a+"1");  //undefined1.字符串拼接

            document.write(typeof (a+1));  //number

            
 引用对象的操作 （在js中没有类的概念，往往直接创建对象即可）
通过json格式创建对象

            var st = {id:1001,name:"zs",age:30};  
            document.write(st.id+"<br />");  /* 获取对象的属性值 */
            document.write(st.name+"<br />");

1.2 数组数组静态赋值 
 定义数组 
通过下标操作元素,下标从0开始

            var a = [1,2,3,4];  
            for(var i=0;i<a.length;i++){ //循环遍历
                document.write(a[i]);
            }

            a[1]=5;  //修改元素
            document.write(a);  //直接打印对象

            a[5]=7;  //添加元素  a[4]未赋值，为undefined

            delete a[5];  //删除元素

            a.length=0; //删除所有
            
            /* 数组的动态赋值  */
            var b = new Array();
            b.push(1);
            b.push(3,5,6);
            
            /* 数组也可以存引用类型 */
            var sts = [{name:"zs",age:30},{name:"ls",age:20}];
            document.write(sts[0].name+":"+sts[0].age+"<br />");

1.3 运算符

逻辑运算

名称	运算符	描述
与	&&	要求表达式左右两边的表达式同为true，整体结果才为true
或	||	要求表达式左右两边的表达式只要有一个为true，整体结果就为true
非	！	将布尔值取反操作

关系运算

名称	运算符
等于	==
小于	<
小于或等于	<=
大于	>
大于或等于	>=
不等于	!=
值和类型相同	===

单目运算：自增自减

名称	运算符	描述
自增	++	变量的值每次加1，再赋给变量
自减	--	变量的值每次减1，再赋给变量

双目运算符

名称	运算符
加	+
减	-
乘	*
除	/
求余	%
赋值	=
加等	+=
减等	-=
除等	/=
乘等	*=
求余等	%=

三目运算符： ?:

条件分支结构

if-else分支

switch分支

循环结构

for循环

while循环

do-while循环

 

• break与continue关键字

  • break用于结束循环

  • continue用于结束本次循环

 

2. 函数（重点）
   2.1 函数基本使用
             * 函数：用于代码的封装
             * 好处：使结构清晰，方便复用
             * 函数组成：函数调用和函数实现两个部分
             * 函数分类：
             * 1.无参数无返回值
             * 2.有参数无返回值
             * 3.有参数有返回值
             * 与java中函数的不同之处：
             * js中参数没有类型
             * 返回值不用写返回类型

            
            //1.无参数无返回值方法

            test();  //函数调用
            
            //函数实现
            function test(){
                console.log("无参无返回值调用");
            }

            
            //2.有参数无返回值方法

            show(666);
            
            function show(a){
                console.log(a);
            }

            
            //3.有参数有返回值方法

            console.log(max(6,8)); //注意：如果没有return，则打印undefined
            
            function max(a,b){
                var m = (a>b)?a:b;
                return m;  //通过return返回值
            }

 扩展：函数重载： 求两个数的和，求三个数的和，求四个数的和 
 结论：在js中函数没有重载，js执行时，只执行最后一个函数实现
 如果要实现函数重载效果，需要使用arguments属性(数组，类似java可变参数用法)                      

           function add(){
                 var sum = 0;
                 for(var i=0;i<arguments.length;i++){
                     sum += arguments[i];
                 }
                 return sum;
           }

           
另一种函数写法：类似匿名内部类 ;  注意：必须把函数实现放前面

          var myTest = function(){
              console.log("另一种函数实现");
          }
          myTest();

2.2 弹窗函数
             弹窗函数：系统已写好具体实现，只需调用即可 
             1.警告框： alert 
            
             2.确认框:  confirm 根据确定与取消，做一些判断处理 
            
             3.提示框：prompt  参数1：提示信息   参数2： 默认值
                 点确定，则接收输入的内容；点取消，则接收null

2.3 系统预定义函数

            * 系统预定义函数： 只需进行调用即可 *

            //parseInt 数字字符串转整数
            var a = "123";
            a = parseInt(a);
            console.log(a);  //123 number
            
            a = "3.14";
            console.log(parseFloat(a))  //3.14
            console.log(parseInt(a));   //3
            
            //9进制的12，转10进制输出
            console.log(parseInt("12",9)); //9进制的12转十进制输出
            console.log(parseInt("12",8)); //8进制的12转十进制输出
            console.log(parseInt("12",7)); //7进制的12转十进制输出
            
            //isNaN: 是否为非数字  返回true或false
            console.log(isNaN(NaN));  //true
            console.log(isNaN(111));  //false
            console.log(isNaN("111")); //false
            console.log(isNaN("abc")); //true

3. 事件（重点）
    3.1 事件的使用
     事件：是html与js交互的桥梁; 触发事件的用法，就是函数的调用形式 
            //1.onchange事件

            function change(){
                alert("省份变更的触发");
            }
            

        <select onchange="change()">
            <option>湖南</option>
            <option>湖北</option>
            <option>广东</option>
            <option>广西</option>
        </select>

             onload:页面加载完毕后，系统会自动触发的方法 
                应用场景：可以拿到html当中的值，DOM的操作就是典型案例

            onload = function(){
                alert("页面加载完毕后的触发");
            }

 注意：在js中‘’也代表字符串；js中的字符串可以单引号包含双引号嵌套
也可以双引号包单引号嵌套； 但不能单包单，双包双

<h1 onclick="alert('点击触发')" onmousemove="console.log('鼠标移入')">标题1</h1>
<h1 onmouseout="console.log('鼠标移出触发')" onmousemove="console.log('鼠标移动触发')">标题2</h1>
<input type="text" onkeyup="console.log('键盘弹起')" onkeydown="console.log('键盘按下')" />

3.2 提交事件

 onsubmit:提交事件，用于表单提交的触发
应用场景：在前端js即可处理并判断；是否需要进入后台处理

        <form onsubmit="alert('xx')">
            用户名：<input type="text" /><br />
            <input type="submit" value="提交" />
        </form>

3.3 字符串常用函数

        <script type="text/javascript">
            //字符串的使用，基本上与java类似的 
            var a = "hello";
            //常用方法 
            console.log(a.toUpperCase());  //转大写
            console.log(a.concat("111"));  //字符串拼接
            console.log(" he 66  ".trim()); //去除左右空格
            console.log(a.substring(2,4));  //提取子串 
        </script>