开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 移动开发 -> JavaScript基础 -> 正文阅读

[移动开发]JavaScript基础

文章目录

JavaScript

JavaScript

1.介绍

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

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

JS特点:

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

2.JavaScrip和HTML的结合

在head标签中，或在body标签中，使用scrip标签来书写javascrip代码

alert是javascript提供的警告框函数,接受任意类型的参数
```
<script type="text/javascript">
	alert("Hello Word");
</script>
```

head中使用scrip标签引入单独的javascrip代码文件。
优点：代码可以复用

<!-- script标签引入外部的js代码，src是js代码路径-->
<script type="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); //12
    alert(typeof(i)); //number， typeof函数可以取数据的数据类型
    i = "abc";
    alert(typeof(i)); //string

	var a = 10;
	var b = "hi";
	alert(a * b); //语法允许，输出NaN
</script>

4.关系运算

< > != >= <= 和java语言一样

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

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

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

5.逻辑运算

在js中所有的变量都可以作为boolean类型取使用（与C语言类似）

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

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

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

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

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

0，null，underfined，""(空串) 都是false

var n = underfined;  //可以显示的赋值underfined
if (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 = 0
for (var i = 0; i < arr.length; i++) {
    alert(arr[i]);
}

7.函数

重点???

使用function关键字定义函数

格式：function 函数名(形参列表) { 函数体; }

//无参函数,不被调用不会被执行
function test() {
	alert("无参函数被调用了");
}
test();

//有参函数，因为变量类型都是var，没必要写了，写变量名就行了
//如果有返回值就直接return语句返回就行了，因为不需要指定返回值类型！！！！！！
function test02(a, b) {
    alert(a + b + "有参函数被调用了");
    return a;
}
var num = test02(10, "abc");

类似定义变量定义函数，js中有函数类型

var 函数名 = function(形参列表) { 函数体 }
```
var sum = function (n1, n2) { 
    return n1 + n2;
}
alert( sum(1, 2) )
```

?js中不允许函数重载，两次定义出直接覆盖上一次的定义（看下面例子）

function func(a) {
    alert("f222")
}
function func() {
    alert("f111")
}
func(10); //输出：f111。下面那个无参覆盖了有参，但我们还能传参，即隐形参数

//隐形参数arguments：在function函数中不需要定义，但却可以直接用来获取所有参数的变量，
//操作类似数组。像java的可变长参数。
function T(a) {
    alert(arguments.length); //3， 个数
    alert(arguments[0]) //值10，可以for遍历
    alert(arguments[1]) //值20，可以for遍历
    alert(a) //10,通过参数取也没问题！！！！！！！
}
T(10, 20, "hahaha");

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

//写上两个参数可读性好点
function sumAll(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.自定义对象

Object形式的自定义对象

对象的定义：

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

变量名.属性名 = 值; 该对象就有了这个属性

变量名.函数名 = function() { } 定义函数，该对象内部就有这个函数了

对象的访问：

变量名.属性/函数名();
```
var obj = new Object(); //定义
obj.name = "Jack";
obj.age = 19;
obj.printOb
j = function () {
    alert("姓名:" + this.name + ", 年龄: " + this.age);
}
alert(obj.name); //访问
obj.printObj();
```
{ }花括号形式的自定义对象

var 变量名 = {}; 空对象（?[]是数组，{}是对象）

语法（初始定义）：注意是冒号，而且每个用逗号分开
var 变量名 = {
? 属性名: 值 ,
? 属性名: 值,
? … ,
? 函数名: function() { }
};

对象访问和上面一样。
```
var obj2 = {
    age: 20,
    name: "Tom",
    printObj: function () {
        alert("姓名:" + this.name + ", 年龄: " + this.age); //同样可以用this
    }
};
```

9.事件

重点???

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

常用的事件：

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

事件的注册：

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

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

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

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

1.onload

<!-- 1.1 静态onload浏览器自动执行-->
<body onload="alert('静态注册')"> </body>

<!-- 一般不上面这样做，一般head标签里面写js代码，下面body标签里面调用就行了.
	 或者把js代码单独放到一个文件里面，script标签引入js代码，body调用就行了-->
<head>
    <script type="text/javascript">
        function onloadFunc() {
            alert("静态注册onload事件，所有代码");
        }
    </script>
</head>
<body onload="onloadFunc()"> </body>

<!-- 1.2 动态onload，是固定写法，body标签里面就不用调用了，写成一个单独的文件也行-->
<script type="text/javascript">
    window.onload = function () {
        alert("动态注册onload事件，所有代码");
    }
</script>
<body> </body>

2.onclick

<!-- 2.1静态-->
<head>
    <script type="text/javascript">
        function onclickFunc() {
            alert("静态注册onclick");
        }
    </script>
</head>

<!-- 2.2动态-->
<script type="text/javascript">
    window.onclick = function () {
        /**
         * 1.获取标签对象
         * document是js的一个对象，代表整个页面，getElementById函数是传入一个id获取标签对象。
         * 2.通过标签对象.事件名 = function() { }
         */
        var btnObj = document.getElementById("btn01");
        btnObj.onclick = function () {
            alert("动态注册onclick");
        }
    }
</script>

<!-- body里面的内容：-->
<button onclick="onclickFunc()">按钮1</button>
<button id="btn01">按钮2</button>

3.onblur

<!-- 3.1静态-->
<script type="text/javascript">
	function onblurFunc() {
    //console是一个控制台对象，专门向控制台打印输出，测试使用。log是打印的方法
    console.log("静态注册onblurFunc，失去焦点")
}
</script>

<!-- 3.2动态，用window.onload好像也行啊-->
<script type="text/javascript">
    window.onblur = function () {
        var password = document.getElementById("password");
        //1.获取标签对象 2.对象.事件名
        password.onblur = function () {
            console.log("动态注册onblurFunc，失去焦点")
        }
    }
</script>

<!-- body里面的内容：-->
用户名：<input type="text" onblur="onblurFunc()"/> <br/>
密码：<input type="text"/> <br/>

4.onchange

<!-- 4.1静态-->
<script type="text/javascript">
    function onchangeFunc() {
        alert("改变了(静态注册)");
    }
</script>
<!-- 4.2动态-->
<script type="text/javascript">
    window.onchange = function () {
        var selObj = document.getElementById("sel01");
        selObj.onchange = function () {
            alert("改变了(动态注册)");
        }
    }
</script>

<!-- body里面的内容：-->
国籍：
<select onchange="onchangeFunc()">
    <option> 请选择 ：</option>
    <option> 中国</option>
    <option> 美国</option>
    <option> 日本</option>
</select>
女神：
<select id="sel01">
    <option> 请选择 ：</option>
    <option> 王冰冰</option>
    <option> 赵丽颖</option>
    <option> 张子枫</option>
</select>

5.onsubmit

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

<!-- body里面的内容：-->
<form action="http://www.baidu.com" method="get" onsubmit="return onsubmitFunc()">
    <input type="submit" value="静态注册">
</form>

<form action="http://www.baidu.com" method="get" id="form01">
    <input type="submit" value="动态注册">
</form>

10.DOM模型

重点???

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

Document对象的理解：

它管理了所有的HTML文档内容
它的一种树结构的文档，有层次关系。例如html对象里面有head对象和body对象，head对象里面有title对象…

它让我们把所有的标签都对象化

<body>
<div id="div01">div01</div>
</body>

模拟：
class Dom {
	private String id; 
	private String tagName; 该标签名
	private Dom parentNode; 父亲
	private List<Dom> children; 孩子
    private String innerHTML; 起始标签和结束标签中间的内容
}

我们可以通过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，验证用户名（看注释）：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>documentTest01</title>

    <script type="text/javascript">
        function check() {
            // 验证规则：字母数字下划线组成，长度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>
    <!-- 输入用户名，按格式验证是否合法-->
    用户名：<input type="text" id="username01" value="默认值"/>
    <span id="span01" style="color: red; font-size: 10px" ></span> <br/>
    <button onclick="check()">验证</button>
</body>
</html>

案例2：全选（看注释）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>documentTest03</title>
    <script>
        function selectAll() {
            //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;
            }
        }
        function unSelectAll() {
            var hobbies = document.getElementsByName("hobby");
            for (var i = 0; i < hobbies.length; i++) {
                hobbies[i].checked = false;
            }
        }
        function selectReverse() {
            var hobbies = document.getElementsByName("hobby");
            for (var i = 0; i < hobbies.length; i++) {
                hobbies[i].checked = !hobbies[i].checked;
            }
        }
    </script>
</head>
<body>

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

</body>
</html>

案例3：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>documentTest04</title>
    <script type="text/javascript">
        function checkAll() {
            var inputs = document.getElementsByTagName("input");  //标签名查询，也返回集合
            for (var i = 0; i < inputs.length; i++) {
                inputs[i].checked = true;
            }
        }
    </script>
</head>
<body>
兴趣爱好：
<input type="checkbox" value="CPP"/> C++
<input type="checkbox" value="Java"/> Java
<input type="checkbox" value="PHP"/> PHP
<input type="checkbox" value="JavaScrip"/> JavaScrip
<br/>
<button onclick="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()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>documentTest05</title>

    <script type="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>