JavaScript

js的使用方式

方式1:内部式

<script>
    方式1:js的内部方式
</script>

2外部方式 

① 需要在js文件夹中单独创建一个后缀为.js的文件
②书写js代码,在当前html页面中将js文件导入即可!
③导入外部js文件
    <script src="js/01.js"></script>

js中的注释

//单行注释
/*多行注释*/

js常见的函数:

①浏览器打印内容:document.write("");
②浏览器控制台打印:console.log("");
③浏览器中弹出提示框:window.alert("") //window是浏览器顶级对象,可以省略不

变量定义以及数据类型划分:

var 变量名 = 值;
var可以省略不写  //var可以是任意的数局类型
js是弱类型语言,语法结构不严谨,可以定义多个变量名相同的变量,后面的变量会覆盖前面的
查看js变量的数据类型,可以使用typeof(变量名)

JS的基本数据类型:

①无论是整数还是小数,都是number类型, ---- js引擎会自动提升为 Number 对象类型
②无论是字符串还是字符,都是string类型----js引擎会自动提升为 String 对象类型
③boolean类型                      ----js引擎会自动提升为 Boolean 对象类型
④object类型   (创建一个对象 )  ---- js引擎会自动提升为Object对象类型
在Js中,Object对象代表所有js对象的模板!
⑤undefined类型 :未定义类型 (这种没有意义),因为没有赋值!

函数的调用及定义

方式一:

定义: function 方法名(形参1,形参2,....){//不写var

方法体;

document.write(结果);

}

调用:

方法名(实参1,实参2,.....);

方式二:

定义: function 方法名(形参1,形参2,....){//不写var

方法体;

return (结果);

}

调用:

document.write(方法名(实参1,实参2,.....));

定义函数的注意事项:

①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 正则表达式对象 = /^ 正则语法 $/ ;