Java教程

JavaScript-笔记

本文主要是介绍JavaScript-笔记,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

笔记目录

      • 1 JS 和 java
      • 2 JavaScript和Html结合
          • 1) 第一种方式
          • 2) 第二种方式
      • 3 JavaScript语法
          • 1)变量类型
          • 2)特殊值
          • 3)变量定义格式
          • 4)关系(比较)运算
          • 5)逻辑运算
          • 6)数组
          • 7)函数
          • 8)arguments 隐形参数
          • 9)自定义对象
            • 1 Object 形式的自定义对象
            • 2 {}花括号形式的自定义对象
      • 4 JS事件
          • 0)什么是事件❓
          • 1)常用的事件
          • 2)事件的注册
            • 1 onl oad 加载完成事件
            • 2 onclick 单击事件
            • 3 onblur 失去焦点事件
            • 4 onsubmit 表单提交事件
      • 5 DOM模型
          • 1)Document 对象的理解
          • 2)Document 对象中的方法介绍(重点)
          • 3) 节点的方法和属性
            • 方法 :
            • 属性:

1 JS 和 java

1) JS是弱类型:类型可变。

如:

var i;

i = 12;      数值型

i = "abc";   字符串类型

特点:

1、交互性(它可以做信息的动态交互)

2、安全性(不允许直接访问本地硬盘)

3、跨平台性(只要是可以解释 JS 的浏览器都可以执行,和平台无关 )

2)java是强类型:定义变量时,类型已确定,且不可变。

2 JavaScript和Html结合

1) 第一种方式

在head 标签中,或者在body标签中,使用 script 标签 写JavaScript 代码

<head>
  <meta charset="UTF-8">
  <title>Do</title>
  <script type="text/javascript">
    // alert 是 JavaScript 语言提供的一个警告框函数。 
    // 它可以接收任意类型的参数,这个参数就是警告框的提示信息 
    alert("杜宇好美啊!!!!")
  </script>
</head>
2) 第二种方式

使用 script 标签引入单独的 JavaScript 文件

例如使用:

<script type="text/javascript" src="../js/1.js" ></script>

3 JavaScript语法

1)变量类型

数值类型 number

字符串类型 string

对象类型 object

布尔类型 boolean

函数类型 function

2)特殊值

undefined 未定义,所有 js 变量未赋予初始值时,默认值都为undefined

null 空值

NAN Not a number 。非数值

3)变量定义格式

var 变量名;

var 变量名 = 值;

4)关系(比较)运算

等于: == 等于是简单的做字面值的比较

全等于: === 除了做字面值的比较之外,还会比较两个变量的数据类型

5)逻辑运算

且运算: &&

或运算: ||

取反运算: !

6)数组

1 数组的定义

格式:

var 数组名 = []; // 空数组

var 数组名 = [1 , ’abc’ , true]; // 定义数组同时赋值元素

7)函数

格式 1 :

function 函数名(形参列表){ 

​	函数体	

}

在 JavaScript 语言中,如何定义带有返回值的函数呢 ❓

答:只需要在函数体内直接使用 return 语句返回值即可。

例如:

function fun(){
  alert("do a good job.")
}
// fun();

function fun1(a,b){
  alert(a+b);
}
// fun1(1,2);

function fun2(a,b){
  return a*b;
}
alert(fun2(1,2));

格式 2:

var 函数名 = function(形参列表) { 函数体 }

<script type="text/javascript"> 
    var fun = function () { 
        alert("无参函数"); 
    }
    // fun(); 
    var fun2 = function (a,b) { 
        alert("有参函数 a=" + a + ",b=" + b);
    }
    // fun2(1,2);
    var fun3 = function (num1,num2) { 
        return num1 + num2; 
    }
    alert( fun3(100,200) );
</script>
8)arguments 隐形参数

在 function 函数中不需要定义但却可以直接用来获取所有参数的变量。我们管它叫隐形参数。

隐形参数特别像 java 基础的可变长参数一样。

public void fun( Object … args );

可变长参数是一个数组。

那么 js 中的隐形参数也跟 java 的可变长参数一样。操作类似数组。

隐藏参数arguments对可函数形参做操作:

<script type="text/javascript" >    
    function sum(){
        var result=0;      
        for(var i=0;i<arguments.length;i++){     
            if(typeof arguments[i] == "number"){                
            result+=arguments[i];    
            }        
        }        
        alert(result);    
    }    
    sum(1,2,3,4,"sad",1,1);
</script> 
9)自定义对象
1 Object 形式的自定义对象

对象的定义:

var 变量名 = new Object();	 		// 对象实例(空对象) 

变量名.属性名 = 值;							 // 定义一个属性 

变量名.函数名 = function(){} 		// 定义一个函数 

对象的访问:

变量名.属性 / 函数名(); 

例如:

<script type="text/javascript">    
    var obj=new Object();    
    obj.name="美女";    
    obj.sex="男";    
    obj.fun= function (){        
        alert("姓名:"+this.name+"-----性别:"+this.sex);    
    }    
	alert(obj.name);   
    alert(obj.sex);   
    obj.fun();
</script>
2 {}花括号形式的自定义对象

对象的定义:

var 变量名 = { // 空对象

属性名:值, // 定义一个属性

属性名:值, // 定义一个属性

函数名:function(){} // 定义一个函数

};

对象的访问:

变量名.属性 / 函数名();

Eg::

 <script type="text/javascript">        
     var obj={            
         name:"半夏",            
         sex:"男",            
         fun:function (){                
             alert("姓名:"+this.name+",性别:"+this.sex);            
         }        
     };        
    alert(obj.name);        
    alert(obj.sex);        
    obj.fun();    
</script>

4 JS事件

0)什么是事件❓

事件是电脑输入设备与页面进行交互的响应。我们称之为事件。

1)常用的事件

onload 加载完成事件: 页面加载完成之后,常用于做页面 js 代码初始化操作

onclick 单击事件: 常用于按钮的点击响应操作。

onblur 失去焦点事件: 常用用于输入框失去焦点后验证其输入内容是否合法。

onchange 内容发生改变事件: 常用于下拉列表和输入框内容发生改变后操作

onsubmit 表单提交事件: 常用于表单提交前,验证所有表单项是否合法。

2)事件的注册

什么是事件的注册(绑定)❓

就是告诉浏览器,当事件响应后要执行哪些操作代码,叫事件注册或事件绑定

事件的注册又分为静态注册和动态注册两种:

静态注册事件:通过 html 标签的事件属性直接赋于事件响应后的代码,这种方式我们叫静态注册。

动态注册事件:是指先通过 js 代码得到标签的 dom 对象,然后再通过 dom 对象.事件名 = function(){} 这种形式赋于事件

响应后的代码,叫动态注册。

  1. 动态注册基本步骤

1、获取标签对象

2、标签对象.事件名 = fucntion(){}

1 onl oad 加载完成事件

onload 事件是浏览器解析完页面之后就会自动触发的事件

<html lang="en"> <head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <script type="text/javascript"> 
        // onl oad 事件静态注册 
        // <!--静态注册 onl oad 事件  <body οnlοad="onloadFun();"> --> 
        function onl oadFun() { 
            alert('静态注册 onl oad 事件,所有代码'); 
        }
        
		// onl oad 事件动态注册。是固定写法 
        window.onload = function () { 
            alert("动态注册的 onl oad 事件"); 
        } 
    </script> 
    </head> 
    <body> </body> 
</html>
2 onclick 单击事件
<!DOCTYPE html> 
<html lang="en"> 
    <head> 
        <meta charset="UTF-8"> 
        <title>Title</title> 
        <script type="text/javascript"> 
            function onclickFun() { 
                alert("静态注册 onclick 事件"); 
            }
        
            // 动态注册 onclick 事件 
            window.onload = function () { 
                // 1 获取标签对象 
                /** 
                * document 			是 JavaScript 语言提供的一个对象(文档)<br/> 
                * get				获取 
                * Element 			元素(就是标签) 
                * By 				通过..什么属性获取 
                * Id 				id属性 
                * getElementById 	通过 id 属性获取标签对象 
                **/
                var btnObj = document.getElementById("btn01"); 
                // 2 通过标签对象.事件名 = function(){} 
                btnObj.onclick = function () { 
                    alert("动态注册的 onclick 事件"); 
                } 
            }
		</script>
    </head>
    <body> 
        <!--静态注册 onClick 事件--> 
        <button onclick="onclickFun();">按钮 1</button> 
        <!--动态注册 onClick 事件--> 
        <button id="btn01">按钮 2</button> 
    </body> 
</html>
3 onblur 失去焦点事件
<!DOCTYPE html> 
<html lang="en"> 
    <head> 
        <meta charset="UTF-8"> 
        <title>Title</title> 
        <script type="text/javascript"> 
            function onchangeFun() { 
                alert("女神已经改变了"); 
            }
            window.onload = function () { 
                //1 获取标签对象
                var selObj = document.getElementById("sel01"); 
                //2 通过标签对象.事件名 = function(){} 
                selObj.onchange = function () { 
                    alert("男神已经改变了");
                } 
            } 
        </script> 
    </head>
    <body> 
        请选择你心中的女神: 
        <!--静态注册 onchange 事件--> 
        <select onchange="onchangeFun();"> 
            <option>--女神--</option> 
            <option>芳芳</option> 
            <option>佳佳</option> 
            <option>娘娘</option> 
        </select> 
        请选择你心中的男神: 
        <select id="sel01">
            <option>--男神--</option> 
            <option>国哥</option>
            <option>华仔</option>
            <option>富城</option>
        </select> 
    </body> 
</html>
4 onsubmit 表单提交事件

return false 可以阻止表单提交 。

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
        <meta charset="UTF-8"> 
        <title>Title</title> 
        <script type="text/javascript" > 
            // 静态注册表单提交事务
            function onsubmitFun(){ 
                // 要验证所有表单项是否合法,如果,有一个不合法就阻止表单提交 
                alert("静态注册表单提交事件----发现不合法");
                return flase; 
            }
            // 动态注册表单提交事务
            window.onload = function () {
                //1 获取标签对象
                var formObj = document.getElementById("form01");
                //2 通过标签对象.事件名 = function(){} 
                formObj.onsubmit = function () { 
                    // 要验证所有表单项是否合法,如果,有一个不合法就阻止表单提交 
                    alert("动态注册表单提交事件----发现不合法"); 
                    return false; }
            } 
        </script> 
    </head> 
    <body> 
        <form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun();"> 
            <input type="submit" value="静态注册"/> 
        </form>
        <form action="http://localhost:8080" id="form01">
            <input type="submit" value="动态注册"/> 
        </form> 
    </body>
</html> 

5 DOM模型

DOM 全称是 Document Object Model 文档对象模型

1)Document 对象的理解

第一点:Document 它管理了所有的HTML文档内容。

第二点:document 它是一种树结构的文档。有层级关系。

第三点:它让我们把所有的标签 都 对象化

第四点:我们可以通过 document 访问所有的标签对象

2)Document 对象中的方法介绍(重点)

1 document.getElementById(elementId)

通过标签的 id 属性查找标签 dom 对象,elementId 是标签的 id 属性值

2 document.getElementsByName(elementName)

通过标签的 name 属性查找标签 dom 对象,elementName 标签的 name 属性值

3 document.getElementsByTagName(tagname)

通过标签名查找标签 dom 对象。tagname 是标签名

4 document.createElement( tagName)

方法,通过给定的标签名,创建一个标签对象。tagName 是要创建的标签名

注:

document 对象的三个查询方法,如果有 id 属性,优先使用 getElementById 方法来进行查询

如果没有 id 属性,则优先使用 getElementsByName 方法来进行查询

如果 id 属性和 name 属性都没有最后再按标签名查 getElementsByTagName

以上三个方法,一定要在页面加载完成之后执行,才能查询到标签对象。

示例:

<!DOCTYPE html> 
<html lang="en"> 
    <head>
        <meta charset="UTF-8"> 
        <title>Title</title> 
        <script type="text/javascript" > 
            /** 
            * 需求:当用户点击了较验按钮,要获取输出框中的内容。然后验证其是否合法。
            * 验证的规则是:必须由字母,数字。下划线组成。并且长度是 5 到 12 位。
            */
            function onclickFun() { 
                // 1 当我们要操作一个标签的时候,一定要先获取这个标签对象。 
                var usernameObj = document.getElementById("username"); 
                // [object HTMLInputElement] 它就是 dom 对象 
                var usernameText = usernameObj.value; 
                // 如何验证字符串,符合某个规则 ,需要使用正则表达式技术 
                var patt = /^\w{5,12}$/; 
                /** test()方法用于测试某个字符串,是不是匹配我的规则 , 
                * 匹配就返回 true。不匹配就返回 false. 
                * 
                */
                var usernameSpanObj = document.getElementById("usernameSpan"); 
                // innerHTML 表示起始标签和结束标签中的内容 
                // innerHTML 这个属性可读,可写 usernameSpanObj.innerHTML = "国哥真可爱!"; 
                if (patt.test(usernameText)) { 
                    // alert("用户名合法!"); 
                    // usernameSpanObj.innerHTML = "用户名合法!"; 
                    usernameSpanObj.innerHTML = "<img src=\"right.png\" width=\"18\" height=\"18\">"; 
                } else {
                    // alert("用户名不合法!");
                    // usernameSpanObj.innerHTML = "用户名不合法!"; 
                    usernameSpanObj.innerHTML = "<img src=\"wrong.png\" width=\"18\" height=\"18\">"; 
                } 
            } 
        </script> 
    </head>
    <body> 
        用户名:<input type="text" id="username" value="wzg"/> 
        <span id="usernameSpan" style="color:red;"> </span>
        <button onclick="onclickFun()">较验</button>
	</body> 
</html>
3) 节点的方法和属性

节点就是标签对象。

方法 :
getElementsByTagName() 		    获取当前节点的指定标签名孩子节点
appendChild( oChildNode ) 		可以添加一个子节点 , oChildNode 添加的孩子节点
属性:
childNodes 		    获取当前节点的所有子节点

firstChild 			获取当前节点的第一个子节点

lastChild 			获取当前节点的最后一个子节点

parentNode 			获取当前节点的父节点

nextSibling 		获取当前节点的下一个节点

previousSibling 	获取当前节点的上一个节点

className 			用于获取或设置标签的 class 属性值

innerHTML 		    表示获取/设置起始标签和结束标签中的内容

innerText 			表示获取/设置起始标签和结束标签中的文本
这篇关于JavaScript-笔记的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!