JavaScript_Day01

1.变量的定义

①使用var定义数据类型，var也可以省略不写

②js是弱类型语言，语法结构不严谨，可以重复定义变量

③使用typeof(变量名)函数查看变量的数据类型

④var可以定义任何数据类型

2.js的基本数据类型

①无论是整数还是小数，都是number类型--  浏览器会自动提升为Number类型

②无论是字符串还是字符，都是string类型 --js引擎会自动提升为String类型

③boolean类型   --js引擎会自动提升为Boolean类型

④Object类型   --js引擎为自动提升为Object类型    注：在js中Object对象代表所有js的模板

⑤undefined类型 未定义类型   --这种类型没有意义，因为没有赋值

3.函数的定义及调用

定义函数的 格式1                形式参数列表
                        function 函数名称(参数名称1,参数名称2....){
                            函数的里面业务逻辑
                            直接在这输出document.write("xxx") ;
                        }
                        格式1调用:
                            单独调用
                            函数名称(实际参数列表) ;
                            
                            
                格式2:(推荐)
                        function 函数名称(参数名称1,参数名称2....){
                            
                            函数的里面的业务逻辑
                            return 结果;
                        }
                        格式2调用:
                        赋值调用
                        var 最终结果变量 = 函数名称(实际参数列表) ;    

4.for-in语句

   for-in类似于增强for循环
            应用场景:
                1)遍历数组
                2)遍历对象的属性 (明天讲:js自定义对象 4种方式)
            在js 创建一个数组的方式：
            方式1:  var 数组对象 = new Array() ;  //不指定长度
            方式2: var 数组对象 = new Array(长度) ;//指定长度
            普通for语句：
            for(var i = 0 ; i < arr.length; i++){
                document.write(arr[i]+"<br/>") ;
            } 
            
            方式3:静态初始化,
            arrayObj = new Array([element0[, element1[, ...[, elementN]]]])
            简写格式  :var 数组对象名称=  [元素1,元素2,元素3,.....] ;
            注意：在js中,数组可以存储任何类型元素,实际开发中,还是遵循数据类型一致。

5.date对象的使用：网页时钟的操作流程

            1.获取当前系统时间
            1.1创建日期对象
            var date = new Date() ;
           1.2拼接出来时间字符串
            var dateStr = date.getFullYear()+"-"+(date.getMonth()+1)+"-"
            +date.getDate()+"&nbsp;&nbsp;"+date.getHours()+":"+date.getMinutes()+":"+
            date.getSeconds() ;
            
            2.dom(文档对象模型编程)操作: 
            2.1获取id="spanTip" 所在的span标签对象
            var span = document.getElementById("spanTip") ;
            2.2设置span标签的文本内容
            span.innerHTML ="<h3>"+dateStr+"</h3>"  ;
            3开启网页定时器
            setInterval("定时任务()",时间毫秒值):每经过时间毫秒值重复执行这个定时任务..
            setTimeout("定时任务()",时间毫秒值):经过这个毫秒值之后,执行一次定时任务..

​​​​​​​

定义函数的注意事项:

        ①js是弱类型语言,定义函数的时候,参数名称不能携带var
        ②定义时候,没有返回值类型,但是函数中可以携带return语句,代表方法结束!
        ③Js中没有函数重载的概念,如果方法名相同,后面定义的函数将前面定义的函数覆盖了    
        ④实际参数列表 < 形式参数列表,函数依然会被调用,不过值是"NaN",有一个形式参数没有赋值
         实际参数列表 > 形式参数列表,将实际参数的值赋值给形式参数,多余的实际参数,直接省略不计

         ⑤隐藏一个数组名称:arguments,作用:将实际参数绑定给形式参数

                function sum(a,b,c){ //a=10,b=15,c=20
                    //隐藏一个数组名称:arguments
                    //作用:将实际参数绑定给形式参数
                    for(var i = 0 ; i< arguments.length;i++){
                        document.write(arguments[i]+"&nbsp;&nbsp;<br/>");
                    }
                    
                    var d = a+b+c ;
                    return d ;
                   }
                //赋值调用
                var result = sum(10,15,20) ;
                document.write("result:"+result) ;

js的运算符:
算术运算符: +,-,*,/,%,++,-- 

赋值运算符: =:基本赋值+=,-=,*=,/=,%=

比较(关系运算符): <,<=,>,>=,==,!=

逻辑运算符: 实际开发中:逻辑双与&&,逻辑双或||

三元(三目)运算符:(表达式)?执行true的结果:false的结果

for-in类似于增强for循环

Js内置对象:Date日期,String字符串,Array数组,正则表达式对象..
浏览器在解析javascript的时候,能够识别这个对象,使用里面的方法!
js中date创建对象以及获取年月日的方法:
var date = new Date();
获取年 getFullYear();
获取月 getMonth();//(0~11)
获取日 getDate();
获取小时: getHours();
获取分钟: getMinutes();
获取秒: getSeconds();

Js内置对象String

获取字符:charAt(index)
拼接字符串:concat("字符串")
设置字体颜色:fontcolor
截取字符串:substring(起始位置,截至位置)
分割字符串:spilt

js创建对象
方式1:定义对象的格式 跟定义函数格式一样

function 对象(形参列表){
            //追加属性
            this.属性= 形参名称;
            //追加方法
            this.方法名 = function(){
                ...
            }
        }
        var 对象名  = new 对象(实际参数列表) ;
方式二:类似于Java中的无参构造
   function 对象(){}
创建对象:  var 对象名 = new 对象() ;
追加属性和追加功能:
对象名.属性名称 = "值"
对象名.方法名 = function(){}...
 

   方式三:

使用Object对象:代表所有js对象的模板
        var 对象名 = new Object() ;
 追加属性
        对象名.属性名= 值;
追加方法
        对象名.方法名 = function(){
                ...
            }

方式四:

Json一种轻量级的数据交换格式
基本格式{key:value},这种键值对

 var student = {
                 "name":"张三",
                 "age" :20,
                 "gender":"男",
                 "birthday":"1989-02-28"
         }

DOM编程:
Document Object Model,基于文档对象模型编程 
在解析html标签的时候,浏览器的js引擎将html的每一个标签,封装标签对象(节点对象/元素对象),形成树结构,使用一些方式获取节点对象,改变它的特有属性!

获取标签对象的方式:
document.getElementById("id属性值") ; //id属性值获取标签对象
document.getElementsByClassName("所有同名的class属性值") ;//通过class属性值获取标签对象
document.getElementsByTagName("所有同名的标签名称") ; //通过标签名称获取标签对象
document.getElementsByName("同名的name属性值");//通过name属性值获取标签对象

事件相关:
 单击事件 (重点)  onclick
                   双击事件         ondbclick
                 焦点事件 (重点)
                    获取焦点      onfocus
                    失去焦点      onblur
                 选项卡发生变化的事件 (重点)        
                     select标签 下拉菜单                 onchange     
                             option 下拉选项
                 鼠标经过事件 :onmouseover
                 鼠标移出事件:onmouseout
                 
                 页面载入事件 (重点) on load

                onsubmit:表单是否提交成功 ;
                如果返回结果false,不能提交;true,可以提交

跳转新的页面

            使用window窗口对象下面地址栏对象location (使用最多)
            location的href属性:重新载入一个新的地址
            location.href = "adv.html" ;
            
            使用window对象的open方法
            window.open( 新的地址,打开方式) ;
            window.open("adv.html","_blank") ;//新建窗口打开页面
            
            展示确认对话框 confirm()方法

              正则表达式:
              正则表达式:js引擎是能够识别这些语法

                数量词相关的语法:
            x:代表任意字符
            x+: 表示X字符串出现一次或者多次
            x*:表示X字符出现0次或者多次
            x?:表示X字符出现0次或者1次
            
            范围相关的语法
           X{n}: 表示X字符恰好出现n次
           X{n,}:表示X字符至少出现n次
           X{n,m}:表示X字符至少出现n次,但是不超过m次
            
            匹配字符相关的
           X[a-z] :X字符可以是a-z中任何的一个小写字母字符
           X[0-9] :x字符是一个数字字符
           X[A-Za-z0-9_]:X字符可以是任意的大小字母均可或者数字或者_
            
            
            正则表达式:有一个函数  test("接收用户输入的文本框的内容字符串")匹配是否成功
            
            创建一个正则规则:var 正则对象名 = /书写正则语法/ ;    不完全匹配 (会出现安全漏洞!)
            正则对象名.test(字符串),true,匹配成功,false,失败!
       
             在Java语言中和在javascript中,如果要完全匹配,必须加入边界匹配器
              ^:以....开头
              $:以...结尾
              var 正则表达式对象 = /^ 正则语法 $/ ;