JavaScript基础

文章目录

JavaScript

1.介绍

主要完成页面的数据验证。因此它运行在客户端，需要运行浏览器来解析执行

JavaScript

代码。

简写JS，和Java没有本质的联系。JS是弱类型(类型可变)，Java是强类型。

JS特点:

• 交互性（它可以做的就是信息的动态交互）
• 安全校（不允许直接访问本地硬盘）
• 跨平台性（只要是可以解释JS的浏览器都可以执行，和平台无关）

2.JavaScrip和HTML的结合

1. 在head标签中，或在body标签中，使用scrip标签来书写javascrip代码> alert是javascript提供的警告框函数,接受任意类型的参数<scripttype="text/javascript">alert("Hello Word");</script>
2. head中使用scrip标签引入单独的javascrip代码文件。 优点：代码可以复用<!-- script标签引入外部的js代码，src是js代码路径--><scripttype="text/javascript"src="testjs.js"></script>

这两个二选一使用，不能一个scrip标签当两个用，例如：

<script type="text/javascript" src="testjs.js">alert("sutong");</script>

3.变量

数据类型：

• 数值类型number
• 字符串类型string
• 对象类型object
• 布尔类型boolean
• 函数类型function

js

里特殊的值：

• 未定义underfined，所有js变量未赋予初始值的时候，默认都是underfined
• 空值null，
• NAN，即：Not a Number 非数字，非数值

var 变量名;var 变量名 = 值;<script type="text/javascript">var i;alert(i);//underfined
    i =12;alert(i);//12alert(typeof(i));//number， typeof函数可以取数据的数据类型
    i ="abc";alert(typeof(i));//stringvar a =10;var b ="hi";alert(a * b);//语法允许，输出NaN</script>

4.关系运算

< > != >= <=

和java语言一样

等于

==

简单的做字面值的比较，

全等于

===

除了做字面值的比较外，还会比较两个变量的数据类型

var str ="12"var num =12;alert(str == num);//truealert(str === num)//false

5.逻辑运算

在js中所有的变量都可以作为

boolean

类型取使用 （与C语言类似）

&& || !

和其他语言一样含义，也有短路现象。

&&

中：

当两边都为真的，返回最后一个表达式的值。当有一个为假的时候，返回第一个为假的表达式。

var a ="abc";var b =true;var c =false;var d =null;alert(a && b)//truealert(b && a)//abcalert(c && a)//falsealert(d && c)//null

||

中：

当表达式全为假时，返回最后一个表达式值。只要有一个为真，返回第一个为真的表达式的值。

在js中所有的变量都可以作为boolean类型取使用

0，null，underfined，""

(空串) 都是false

var n = underfined;//可以显示的赋值underfinedif(n){alert("true")}else{alert("false")}

6.数组

var 数组名 = []

空数组

var 数组名 = {1, "abc", true}

定义时同时赋值

var arr =[];var len = arr.length;//0
arr[0]=12;//我们只要通过下标赋值(读不会扩容)，那么最大的下标值，就会自动的给数组扩容
arr[2]=13;var len = arr.length;//3，中间的那个arr[1] = underfined;var arr2 =[1,true];//这样这样默认值var arr2 ={1,true};//遍历数组，注意不能写成int i = 0for(var i =0; i < arr.length; i++){alert(arr[i]);}

7.函数

重点⭐⭐⭐

1. 使用function关键字定义函数格式：function 函数名(形参列表) { 函数体; }``````//无参函数,不被调用不会被执行functiontest(){alert("无参函数被调用了");}test();//有参函数，因为变量类型都是var，没必要写了，写变量名就行了//如果有返回值就直接return语句返回就行了，因为不需要指定返回值类型！！！！！！functiontest02(a, b){alert(a + b +"有参函数被调用了");return a;}var num =test02(10,"abc");
2. 类似定义变量定义函数，js中有函数类型var 函数名 = function(形参列表) { 函数体 }``````varsum=function(n1, n2){return n1 + n2;}alert(sum(1,2))

⭐js中

不允许函数重载

，两次定义出直接覆盖上一次的定义（看下面例子）

functionfunc(a){alert("f222")}functionfunc(){alert("f111")}func(10);//输出：f111。下面那个无参覆盖了有参，但我们还能传参，即隐形参数//隐形参数arguments：在function函数中不需要定义，但却可以直接用来获取所有参数的变量，//操作类似数组。像java的可变长参数。functionT(a){alert(arguments.length);//3， 个数alert(arguments[0])//值10，可以for遍历alert(arguments[1])//值20，可以for遍历alert(a)//10,通过参数取也没问题！！！！！！！}T(10,20,"hahaha");

ja中字符串和数字相加同样是做拼接。

//写上两个参数可读性好点functionsumAll(num1, num2){var res =0;for(var i =0; i < arguments.length; i++){if(typeof(arguments[i])=="number"){
            res += arguments[i];}}return res;}alert(sumAll(1,2,3,4,5,6,"abc",7,8,9,10));

8.自定义对象

1. Object形式的自定义对象****对象的定义：var 变量名 = new Object(); 对象实例，空对象变量名.属性名 = 值; 该对象就有了这个属性变量名.函数名 = function() { } 定义函数，该对象内部就有这个函数了对象的访问：变量名.属性/函数名();``````var obj =newObject();//定义obj.name ="Jack";obj.age =19;obj.printObj=function(){alert("姓名:"+this.name +", 年龄: "+this.age);}alert(obj.name);//访问obj.printObj();
2. { }花括号形式的自定义对象var 变量名 = {}; 空对象（⭐[]是数组，{}是对象）语法（初始定义）：注意是冒号，而且每个用逗号分开 var 变量名 = { ​ 属性名: 值 , ​ 属性名: 值, ​ … , ​ 函数名: function() { } };对象访问和上面一样。var obj2 ={ age:20, name:"Tom",printObj:function(){alert("姓名:"+this.name +", 年龄: "+this.age);//同样可以用this}};

9.事件

重点⭐⭐⭐

事件：电脑输入设备和页面进行交互的响应。

常用的事件：

1. onload 加载完成事件 (页面加载完之后，常用于做页面js代码初始化操作)
2. onclick 单击事件 (常用于按钮点击)
3. onblur 失去焦点事件 (常用于输入框，失去焦点后验证其输入是否合法)
4. onchange 内容发生改变事件 (常用于下拉列表和输入框发生改变后的操作)
5. onsubmit 表单提交事件 (常用于表单提交前，验证所有表单项是否合法)、

事件的注册：

事件注册/事件绑定 ：就是告诉浏览器当事件响应后要执行那些操作代码。

静态注册：通过html标签的事件属性直接赋予事件响应后的代码。

动态注册：指通过js代码得到标签的dom对象，然后再通过对象.事件名 = function() {}.

动态注册的步骤：1.获取标签对象 2.标签对象.事件名 = function() {}
下面有各个事件的静态/动态注册案例

1.onload

<!-- 1.1 静态onload浏览器自动执行--><bodyonload="alert('静态注册')"></body><!-- 一般不上面这样做，一般head标签里面写js代码，下面body标签里面调用就行了.
     或者把js代码单独放到一个文件里面，script标签引入js代码，body调用就行了--><head><scripttype="text/javascript">functiononloadFunc(){alert("静态注册onload事件，所有代码");}</script></head><bodyonload="onloadFunc()"></body><!-- 1.2 动态onload，是固定写法，body标签里面就不用调用了，写成一个单独的文件也行--><scripttype="text/javascript">
    window.onload=function(){alert("动态注册onload事件，所有代码");}</script><body></body>

2.onclick

<!-- 2.1静态--><head><scripttype="text/javascript">functiononclickFunc(){alert("静态注册onclick");}</script></head><!-- 2.2动态--><scripttype="text/javascript">
    window.onclick=function(){/**
         * 1.获取标签对象
         * document是js的一个对象，代表整个页面，getElementById函数是传入一个id获取标签对象。
         * 2.通过标签对象.事件名 = function() { }
         */var btnObj = document.getElementById("btn01");
        btnObj.onclick=function(){alert("动态注册onclick");}}</script><!-- body里面的内容：--><buttononclick="onclickFunc()">按钮1</button><buttonid="btn01">按钮2</button>

3.onblur

<!-- 3.1静态--><scripttype="text/javascript">functiononblurFunc(){//console是一个控制台对象，专门向控制台打印输出，测试使用。log是打印的方法
    console.log("静态注册onblurFunc，失去焦点")}</script><!-- 3.2动态，用window.onload好像也行啊--><scripttype="text/javascript">
    window.onblur=function(){var password = document.getElementById("password");//1.获取标签对象 2.对象.事件名
        password.onblur=function(){
            console.log("动态注册onblurFunc，失去焦点")}}</script><!-- body里面的内容：-->
用户名：<inputtype="text"onblur="onblurFunc()"/><br/>
密码：<inputtype="text"/><br/>

4.onchange

<!-- 4.1静态--><scripttype="text/javascript">functiononchangeFunc(){alert("改变了(静态注册)");}</script><!-- 4.2动态--><scripttype="text/javascript">
    window.onchange=function(){var selObj = document.getElementById("sel01");
        selObj.onchange=function(){alert("改变了(动态注册)");}}</script><!-- body里面的内容：-->
国籍：
<selectonchange="onchangeFunc()"><option> 请选择 ：</option><option> 中国</option><option> 美国</option><option> 日本</option></select>
女神：
<selectid="sel01"><option> 请选择 ：</option><option> 王冰冰</option><option> 赵丽颖</option><option> 张子枫</option></select>

5.onsubmit

<!-- 5.1静态--><scripttype="text/javascript">functiononsubmitFunc(){//一般要这里验证所有表单项是否合法，有一个不合法就提醒用户，阻止表单提交//静态时怎么阻止呢？return false就可以了，注意form标签里面也有一个return，返回两次！！！alert("静态注册提交事件--发现不合法了");returnfalse;}</script><!-- 5.2动态--><scripttype="text/javascript">
    window.onsubmit=function(){var formObj = document.getElementById("form01");
        formObj.onsubmit=function(){alert("动态注册提交事件--发现不合法了");returnfalse;//注意动态只需要返回一次就行了，返回true就提交了}}</script><!-- body里面的内容：--><formaction="http://www.baidu.com"method="get"onsubmit="return onsubmitFunc()"><inputtype="submit"value="静态注册"></form><formaction="http://www.baidu.com"method="get"id="form01"><inputtype="submit"value="动态注册"></form>

10.DOM模型

重点⭐⭐⭐

Document Object Model

文档对象模型。就是把html文档里面的标签，属性，文本，转换成为对象来管理。

Document

对象的理解：

1. 它管理了所有的HTML文档内容
2. 它的一种树结构的文档，有层次关系。例如html对象里面有head对象和body对象，head对象里面有title对象…
3. 它让我们把所有的标签都对象化<body><divid="div01">div01</div></body>模拟：class Dom { private String id; private String tagName; 该标签名 private Dom parentNode; 父亲 private List<Dom> children; 孩子 private String innerHTML; 起始标签和结束标签中间的内容}
4. 我们可以通过document对象访问所有的标签对象

document对象里面的方法： ⭐

• document.getElementById(elementId) 通过标签的id属性查找标签dom对象,返回第一个id为传入的对象的引用
• document.getElementsByName(elementName); 通过标签的name属性查找标签dom对象，返回对象集合
• document.getElementsByTagName(tagname); 通过标签名查找标签dom对象，返回对象集合
• document.createElement(tagName) 通过给定的标签名创建一个标签对象

//通过标签的id属性查找标签dom对象,返回第一个id为传入的对象的引用
document.getElementById(elementId);//通过标签的name属性查找标签dom对象，返回对象集合
document.getElementsByName(elementName);//通过标签名查找标签dom对象，返回对象集合
document.getElementsByTagName(tagname);//通过给定的标签名创建一个标签对象
document.createElement(tagName)//属性
boby
URL
title

方法查询使用优先级：getElementById -> getElementsByName -> getElementsByTagName
一定要在页面加载完成后执行，才能查询到标签对象。

案例1，验证用户名（看注释）：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>documentTest01</title><scripttype="text/javascript">functioncheck(){// 验证规则：字母数字下划线组成，长度5~12位var usernameObj = document.getElementById("username01");//获取dom对象，里面记录了属性，文本，父亲，孩子等...// alert(usernameObj.id);   //username01// alert(usernameObj.type); //text//获得输入的内容,正则表达式验证var username = usernameObj.value;//正则对象，直接创建需要需要加上//，或者var pat = new RegExp("^\w{5,12}$")，//里面有个test方法返回是否和正则匹配，//里面还要exec方法,返回值是被找到的值,只返回一个，//如果想返回多个，则要这样创建对象var pat=new RegExp("^\w{5,12}$","g")，//或者var pat=/^\w{5,12}$/g   (g->global)//还有个方法compile("regex"); 改变正则内容var spanObj = document.getElementById("span01");//获取span的dom对象var pat =/^\w{5,12}$/;if(pat.test(username)){
                spanObj.style.color ="green";
                spanObj.innerHTML ="√用户名合法";//alert("合法");}else{
                spanObj.style.color ="red";
                spanObj.innerHTML ="*用户名不合法";//可得到起始标签和结束标签中间的内容，//我们需求是设置里面的内容，innerHTML可读可写//alert("用户名不合法"); //这样提示太丑了}}</script></head><body><!-- 输入用户名，按格式验证是否合法-->
    用户名：<inputtype="text"id="username01"value="默认值"/><spanid="span01"style="color: red;font-size: 10px"></span><br/><buttononclick="check()">验证</button></body></html>

案例2：全选（看注释）

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>documentTest03</title><script>functionselectAll(){//hobbies是个标签对象集合：object-NodeList,操作和数组一样，每个都是dom对象//这个集合的元素的顺序是在HTML中从上到下的顺序。//checked="checked"在复选框里是默认选中，选中是true，不选是false，所以我们要操作这个属性(可读可写)var hobbies = document.getElementsByName("hobby");for(var i =0; i < hobbies.length; i++){//alert(hobbies[i].checked); //false
                hobbies[i].checked =true;}}functionunSelectAll(){var hobbies = document.getElementsByName("hobby");for(var i =0; i < hobbies.length; i++){
                hobbies[i].checked =false;}}functionselectReverse(){var hobbies = document.getElementsByName("hobby");for(var i =0; i < hobbies.length; i++){
                hobbies[i].checked =!hobbies[i].checked;}}</script></head><body>

兴趣爱好：
<inputtype="checkbox"name="hobby"value="CPP"/> C++
<inputtype="checkbox"name="hobby"value="Java"/> Java
<inputtype="checkbox"name="hobby"value="PHP"/> PHP
<inputtype="checkbox"name="hobby"value="JavaScrip"/> JavaScrip
<br/><buttononclick="selectAll()">全选</button><buttononclick="unSelectAll()">全不选</button><buttononclick="selectReverse()">反选</button></body></html>

案例3：

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>documentTest04</title><scripttype="text/javascript">functioncheckAll(){var inputs = document.getElementsByTagName("input");//标签名查询，也返回集合for(var i =0; i < inputs.length; i++){
                inputs[i].checked =true;}}</script></head><body>
兴趣爱好：
<inputtype="checkbox"value="CPP"/> C++
<inputtype="checkbox"value="Java"/> Java
<inputtype="checkbox"value="PHP"/> PHP
<inputtype="checkbox"value="JavaScrip"/> JavaScrip
<br/><buttononclick="checkAll()">全选</button></body></html>

11.DOM对象的方法属性

dom对象就是标签对象，即节点(但远不止)

属性：

• childNodes 当前节点的所有子节点，之间的空白字符也算！
• firstChild 第一个子节点
• lastChild 最后一个子节点
• parentNode 父节点
• nextSibling 当前节点的下一个节点
• previousSibling 当前节点的上一个节点
• className 获取/设置标签的class属性值
• innerHTML 获取/设置起始标签和结束标签中的内容
• innerText 获取/设置起始标签和结束标签中的文本

方法：

• getElementByTagName() 通过具体的元素节点调用，和上面的document函数名一样，返回当前节点的指定标签名孩子节点集合
• appendChild(ochildNode) 添加一个子节点，ochildNode就是要添加的孩子节点

//通过具体的元素节点调用，和上面的document函数名一样，返回当前节点的指定标签名孩子节点集合getElementByTagName()//添加一个子节点，ochildNode就是要添加的孩子节点appendChild(ochildNode)//属性：
childNodes       //当前节点的所有子节点，之间的空白字符也算！
firstChild       //第一个子节点
lastChild        //最后一个子节点
parentNode       //父节点
nextSibling      //当前节点的下一个节点
previousSibling  //当前节点的上一个节点
className        //获取/设置标签的class属性值
innerHTML        //获取/设置起始标签和结束标签中的内容
innerText        //获取/设置起始标签和结束标签中的文本

演示：

document.createElement() 和 dom.appendChild()

dom模型中 文本也被封装为个文本节点对象，我们也可以创建

document.createTextNode()

<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>documentTest05</title><scripttype="text/javascript">
        window.onload=function(){var divObj = document.createElement("div");
            divObj.innerHTML ="苏瞳牛逼";
            document.body.appendChild(divObj);//注意：body属性要在页面加载完才能使用//这样也行！！// var divObj = document.createElement("div");// var textNode = document.createTextNode("苏瞳牛逼！！");// divObj.appendChild(textNode);// document.body.appendChild(divObj);}</script></head><body><!-- 用js代码动态的往body里面写个：<div>苏瞳牛逼</div> --></body></html>