JavaScript及其简单使用

比眉伴天荒 2022-10-28 10:09 134阅读 0赞

### 文章目录 ###

*  1 数据类型
 *  2 运算符
 *   *  2.1 关系（比较）运算符
     *  2.2 逻辑运行符
 *  3 数组
 *  4 函数
 *   *  4.1 函数定义
     *  4.2 函数重载
     *  4.3 函数的参数列表
 *  5 对象
 *  6 事件
 *   *  6.1 onload
     *  6.2 onclick
     *  6.3 onblur
     *  6.4 onchange
     *  6.5 onsubmit
 *  7 DOM模型
 *  8 正则表达式
 *   *  8.1 修饰符
     *  8.2 方括号
     *  8.3 元字符
     *  8.4 量词

# 1 数据类型 #

什么是变量？变量是可以存放某些值的内存的命名。

JavaScript的变量类型：

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

JavaScript里特殊的值：

*  undefined：未定义，所有js变量未赋初始值的时候，默认值都是undefined
 *  null空值
 *  NAN：全称是Not a Number。非数字，非数值的意思。

# 2 运算符 #

## 2.1 关系（比较）运算符 ##

等于：==

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

全等于：===

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

var a="12";
    var b=12;
    
    alert(a == b);//true
    alert(a === b)//false

## 2.2 逻辑运行符 ##

且运算：&&  
或运算：||  
取反运算：！

在Javascript语言中，所有的变量，都可以做为一个boolean类型的变量去使用。

*  0、null、undefined、""（空串）都认为是false
 *  其余所有类型的变量，只要有值，都为true

# 3 数组 #

JS中数组的定义：

*  var 数组名 = \[\]；//空数组
 *  var 数组名 = \[1, ‘abc’, true\]；//定义数组同时赋值元素。数组中的元素类型可以不同

// 1 数组的定义
    var arr = [];//定义一个空数组
    alert(arr.length);//0
    arr[0]=12;
    alert(arr[0]);//12
    alert(arr.length);//1
    
    //javascript语言中的数组，只要我们通过数组下标障值，那么最大的下标值，就会自动的给数组做扩容操作。
    arr[2] = true;
    alert(arr.length);//3
    alert(arr[1]);//undefined
    
    // 2 数组的遍历
    for(var i = 0; i < arr.length; i++) { 
    	alert(arr[i]);
    }

# 4 函数 #

## 4.1 函数定义 ##

函数的两种定义方式：

1、方式一

function 函数名(形参列表){ 
    	函数体
    	return xxx;//若函数没有返回值，则省略return语句
    }

2、方式二

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

// 1 定义无参函数
    function a_fun(){ 
    	alert("无参函数");
    }
    a_fun();//先定义函数，再执行函数
    
    // 2 定义有参函数。参数只写名字即可，不用写类型
    function b_fun(a, b){ 
    	alert(a+b);
    }
    b_fun(100, 800);
    
    // 3 定义带返回值的函数
    function c_fun(a, b){ 
    	var sum = a + b;
    	return sum;
    }
    alert(c_fun(100, 200));

// 1 定义无参函数
    var a_fun = function (){ 
    	alert("无参函数");
    }
    a_fun();
    
    // 2 定义有参函数。参数只写名字即可，不用写类型
    var b_fun = function (a, b){ 
    	alert(a+b);
    }
    b_fun(100, 800);
    
    // 3 定义带返回值的函数
    var c_fun = function (a, b){ 
    	var sum = a + b;
    	return sum;
    }
    alert(c_fun(100, 200));

## 4.2 函数重载 ##

在Java中函数允许重载。但是**在JS中函数的重载会直接覆盖掉上一次的定义**

function fun(){ 
    	alert("无参函数");
    }
    function fun(a, b){ 
    	alert("有参函数");
    }
    fun();//输出 有参函数

function fun(a, b){ 
    	alert("有参函数");
    }
    function fun(){ 
    	alert("无参函数");
    }
    fun(1, 3);//输出 无参函数

## 4.3 函数的参数列表 ##

传到一个函数中的所有参数被存进一个arguments数组中，它也被称为函数的隐形参数（只在function函数内）。所谓隐形参数，就是在function函数中不需要定义，但却可以直接用来获取所有参数的变量。

function fun() { 
    	alert(arguments.length);//3
    	alert(arguments[0]);//11
    	alert(arguments[1]);//22
    	alert(arguments[2]);//33
    }
    fun(11, 22, 33);//传进函数的实参个数，可以和定义函数时规定的形参个数不同

//计算数字之和
    function sum(num1, num2) { 
        var res = 0;
        for(var i = 0; i < arguments.length; i++) { 
            res += arguments[i];
        }
        return res;
    }
    alert(sum(1, 2, 3, 4));//10
    alert(sum(1, 2, "abc", 3, 4));//3abc34
    
    function sum_1(num1, num2) { 
        var res = 0;
        for(var i = 0; i < arguments.length; i++) { 
            if(typeof(arguments[i]) == "number") { 
                res += arguments[i];
            }
        }
        return res;
    }
    alert(sum(1, 2, "abc", 3, 4));//10

# 5 对象 #

定义对象的两种方式：

1、 Object形式的自定义对象

var 对象名 = new Object();//定义空对象
    
    对象名.属性名 = 值；		 //为对象定义一个属性
    对象名.函数名 = function(){  //为对象定义一个函数
    	函数体
    	return xxx;
    } 
    
    对象名.属性名;	//访问对象的属性
    对象名.函数名();	//执行对象的函数

var obj = new Object();
    
    obj.name = "jack";
    obj.age = 20;
    obj.fun = function() { 
    	alert("姓名：" + this.name + ", 年龄：" + this.age)
    }
    
    obj.fun();
    
    alert(obj);//object

2、\{\}花括号形式的自定义对象

var 对象名 = {};	//定义空对象
    var 对象名 = {  	//定义非空对象。每个属性及函数之间用逗号隔开
    	属性名 : 值,		 //为对象定义一个属性
    	属性名 : 值,		 //为对象定义一个属性
    	函数名 : function(){ //为对象定义一个函数
    		函数体;
    		return xxx;
    	} 
    }
    
    对象名.属性名;	//访问对象的属性
    对象名.函数名();	//执行对象的函数

var obj = { 
    	name : "jack",
    	age : 20,
    	fun : function() { 
    		alert("姓名：" + this.name + ", 年龄：" + this.age)
    	}
    }
    
    alert(obj.name);
    obj.fun();

# 6 事件 #

js中的事件是什么？事件是电脑输入设备与页面进行交互的响应。我们称之为事件。常用的事件有：

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

**事件注册**

什么是事件的注册（绑定）？其实就是告诉浏览器，当事件响应后要执行哪些操作代码，叫事件注册或事件绑定。

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

1、静态注册事件：通过html标签的事件属性直接赋于事件响应后的代码，这种方式我们叫静态注册。  
2、动态注册事件：是指先通过js代码得到标签的dom 对象，然后再通过 `dom对象.事件名 = function(){}`这种形式赋于事件响应后的代码，叫动态注册。动态注册基本步骤：

1.  获取标签对象
2.  标签对象.事件名 = function()\{\}

## 6.1 onload ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        <script type="text/javascript"> // onload事件静态注册 function onload_fun() { alert("静态注册的onload事件"); } // onload事件动态注册。是固定写法 window.onload = function () { // alert("动态注册的onload事件"); console.log("动态注册的onload事件"); } </script>
    </head>
    <body onload="onload_fun()">
    </body>
    </html>

## 6.2 onclick ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        <script type="text/javascript"> function onclickFun() { alert("onclick事件静态注册"); } window.onload = function () { // 1 获取对象标签 let btnObj = document.getElementById("btn"); // 2 通过 对象.事件名 = function(){} btnObj.onclick = function () { alert("onclick事件动态注册"); } } </script>
    </head>
    <body>
    <button onclick="onclickFun();">静态onclick</button>
    <button id="btn">动态onclick</button>
    </body>
    </html>

## 6.3 onblur ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        <script type="text/javascript"> function onblurFun() { console.log("onblur事件静态注册") } window.onload = function () { // 1 获取对象标签 var btnObj = document.getElementById("password"); // 2 通过 对象.事件名 = function(){} btnObj.onblur = function () { console.log("onblur事件动态注册") } } </script>
    </head>
    <body>
    用户名：<input type="text" onblur="onblurFun();"></input><br>
    密码：<input type="text" id="password"></input>
    </body>
    </html>

## 6.4 onchange ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        <script type="text/javascript"> function onchangeFun() { console.log("水果已经改变") } window.onload = function () { // 1 获取对象标签 var obj = document.getElementById("select2"); // 2 通过 对象.事件名 = function(){} obj.onchange = function () { console.log("数字已经改变") } } </script>
    </head>
    <body>
    请选择：
    <select onchange="onchangeFun()">
        <option>--水果--</option>
        <option>苹果</option>
        <option>香蕉</option>
    </select>
    
        
    请选择：
    <select id="select2" onchange="onchangeFun()">
        <option>--数字--</option>
        <option>100</option>
        <option>200</option>
    </select>
    </body>
    </html>

## 6.5 onsubmit ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
        <script type="text/javascript"> function onsubmitFun() { alert("表单信息不合法，阻止提交"); return false; // alert("表单信息合法，允许提交"); // return true; } window.onsubmit = function () { // 1 获取对象标签 var btnObj = document.getElementById("form1"); // 2 通过 对象.事件名 = function(){} btnObj.onblur = function () { alert("表单信息合法，运行提交") } return true; // return false; } </script>
    </head>
    <body>
    
    <form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun()">
        <input type="submit" value="静态onsubmit">
    </form>
    
    <form action="http://localhost:8080" id="form1">
        <input type="submit" value="动态onsubmit">
    </form>
    </body>
    </html>

# 7 DOM模型 #

DOM全称是Document Object Model ，即**文档对象模型**。就是把文档中的标签，属性，文本，转换成为对象来管理。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjI1MDMwMg_size_16_color_FFFFFF_t_70_pic_center]

Document 对象的理解：

1、Document 它管理了所有的HTML文档内容

2、document 它是一种树结构的文档。有层级关系

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

4、我们可以通过document访间所有的标签对象

Document对象中的主要方法

*  document.getElementById（elementId）返回对拥有指定id 的第一个对象的引用
 *  document.getElementsByName（elementName）返回带有指定名称的对象集合，elementName 标签的name属性值
 *  document.getElementsByTagName（tagname）返回带有指定标签名的对象集合，tagname是标签名
 *  document.createElement（tagName）通过给定的标签名，创建一个标签对象。tagName是要创建的标签名

节点（标签对象）常用的方法和属性

1、方法：

*  getElementsByTagName（）获取当前节点的指定标签名孩子节点
 *  appendChild（ochildNode）方法，可以添加一个子节点，oChildNode是要添加的孩子节点

2、属性：

*  childNodes属性，获取当前节点的所有子节点
 *  firstChild属性，获取当前节点的第一个子节点
 *  lastChild属性，获取当前节点的最后一个子节点
 *  parentNode属性，获取当前节点的父节点
 *  nextSibling属性，获取当前节点的下一个节点
 *  previousSibling属性，获取当前节点的上一个节点
 *  className用于获取或设置标签的class属性值
 *  innerHTML属性，表示获取/设置起始标签和结束标签中的内容
 *  innerText属性，表示获取/设置起始标签和结束标签中的文本

# 8 正则表达式 #

语法：`var patt=new RegExp(pattern,modifiers);`或`var patt=/pattern/modifiers;`

*  pattern（模式） 描述了表达式的模式
 *  modifiers(修饰符) 用于指定全局匹配、区分大小写的匹配和多行匹配

**注意**：当使用构造函数创造正则对象时，需要常规的字符转义规则（在前面加反斜杠 \\）。比如，以下是等价的

var re = new RegExp("\\w+");
    var re = /\w+/;

## 8.1 修饰符 ##

修饰符用于执行区分大小写和全局匹配:

<table> 
 <thead> 
  <tr> 
   <th align="left">修饰符</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">i</td> 
   <td align="left">执行对大小写不敏感的匹配。</td> 
  </tr> 
  <tr> 
   <td align="left">g</td> 
   <td align="left">执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。</td> 
  </tr> 
  <tr> 
   <td align="left">m</td> 
   <td align="left">执行多行匹配。</td> 
  </tr> 
 </tbody> 
</table>

## 8.2 方括号 ##

方括号用于查找某个范围内的字符：

<table> 
 <thead> 
  <tr> 
   <th align="left">表达式</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">[abc]</td> 
   <td align="left">查找方括号之间的任何字符。</td> 
  </tr> 
  <tr> 
   <td align="left">[^abc]</td> 
   <td align="left">查找任何不在方括号之间的字符。</td> 
  </tr> 
  <tr> 
   <td align="left">[0-9]</td> 
   <td align="left">查找任何从 0 至 9 的数字。</td> 
  </tr> 
  <tr> 
   <td align="left">[a-z]</td> 
   <td align="left">查找任何从小写 a 到小写 z 的字符。</td> 
  </tr> 
  <tr> 
   <td align="left">[A-Z]</td> 
   <td align="left">查找任何从大写 A 到大写 Z 的字符。</td> 
  </tr> 
  <tr> 
   <td align="left">[A-z]</td> 
   <td align="left">查找任何从大写 A 到小写 z 的字符。</td> 
  </tr> 
  <tr> 
   <td align="left">[adgk]</td> 
   <td align="left">查找给定集合内的任何字符。</td> 
  </tr> 
  <tr> 
   <td align="left">[^adgk]</td> 
   <td align="left">查找给定集合外的任何字符。</td> 
  </tr> 
  <tr> 
   <td align="left">(red|blue|green)</td> 
   <td align="left">查找任何指定的选项。</td> 
  </tr> 
 </tbody> 
</table>

## 8.3 元字符 ##

元字符（Metacharacter）是拥有特殊含义的字符：

<table> 
 <thead> 
  <tr> 
   <th align="left">元字符</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">.</td> 
   <td align="left">查找单个字符，除了换行和行结束符。</td> 
  </tr> 
  <tr> 
   <td align="left">\w</td> 
   <td align="left">查找数字、字母及下划线。</td> 
  </tr> 
  <tr> 
   <td align="left">\W</td> 
   <td align="left">查找非单词字符。</td> 
  </tr> 
  <tr> 
   <td align="left">\d</td> 
   <td align="left">查找数字。</td> 
  </tr> 
  <tr> 
   <td align="left">\D</td> 
   <td align="left">查找非数字字符。</td> 
  </tr> 
  <tr> 
   <td align="left">\s</td> 
   <td align="left">查找空白字符。</td> 
  </tr> 
  <tr> 
   <td align="left">\S</td> 
   <td align="left">查找非空白字符。</td> 
  </tr> 
  <tr> 
   <td align="left">\b</td> 
   <td align="left">匹配单词边界。</td> 
  </tr> 
  <tr> 
   <td align="left">\B</td> 
   <td align="left">匹配非单词边界。</td> 
  </tr> 
  <tr> 
   <td align="left">\0</td> 
   <td align="left">查找 NULL 字符。</td> 
  </tr> 
  <tr> 
   <td align="left">\n</td> 
   <td align="left">查找换行符。</td> 
  </tr> 
  <tr> 
   <td align="left">\f</td> 
   <td align="left">查找换页符。</td> 
  </tr> 
  <tr> 
   <td align="left">\r</td> 
   <td align="left">查找回车符。</td> 
  </tr> 
  <tr> 
   <td align="left">\t</td> 
   <td align="left">查找制表符。</td> 
  </tr> 
  <tr> 
   <td align="left">\v</td> 
   <td align="left">查找垂直制表符。</td> 
  </tr> 
  <tr> 
   <td align="left">\xxx</td> 
   <td align="left">查找以八进制数 xxx 规定的字符。</td> 
  </tr> 
  <tr> 
   <td align="left">\xdd</td> 
   <td align="left">查找以十六进制数 dd 规定的字符。</td> 
  </tr> 
  <tr> 
   <td align="left">\uxxxx</td> 
   <td align="left">查找以十六进制数 xxxx 规定的 Unicode 字符。</td> 
  </tr> 
 </tbody> 
</table>

## 8.4 量词 ##

<table> 
 <thead> 
  <tr> 
   <th align="left">量词</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">n+</td> 
   <td align="left">匹配任何包含至少一个 n 的字符串。例如，/a+/ 匹配 “candy” 中的 “a”，“caaaaaaandy” 中所有的 “a”。</td> 
  </tr> 
  <tr> 
   <td align="left">n*</td> 
   <td align="left">匹配任何包含零个或多个 n 的字符串。例如，/bo*/ 匹配 “A ghost booooed” 中的 “boooo”，“A bird warbled” 中的 “b”，但是不匹配 “A goat grunted”。</td> 
  </tr> 
  <tr> 
   <td align="left">n?</td> 
   <td align="left">匹配任何包含零个或一个 n 的字符串。例如，/e?le?/ 匹配 “angel” 中的 “el”，“angle” 中的 “le”。</td> 
  </tr> 
  <tr> 
   <td align="left">n{X}</td> 
   <td align="left">匹配包含 X 个 n 的序列的字符串。例如，/a{2}/ 不匹配 “candy,” 中的 “a”，但是匹配 “caandy,” 中的两个 “a”，且匹配 “caaandy.” 中的前两个 “a”。</td> 
  </tr> 
  <tr> 
   <td align="left">n{X,}</td> 
   <td align="left">X 是一个正整数。前面的模式 n 连续出现至少 X 次时匹配。例如，/a{2,}/ 不匹配 “candy” 中的 “a”，但是匹配 “caandy” 和 “caaaaaaandy.” 中所有的 “a”。</td> 
  </tr> 
  <tr> 
   <td align="left">n{X,Y}</td> 
   <td align="left">X 和 Y 为正整数。前面的模式 n 连续出现至少 X 次，至多 Y 次时匹配。例如，/a{1,3}/ 不匹配 “cndy”，匹配 “candy,” 中的 “a”，“caandy,” 中的两个 “a”，匹配 “caaaaaaandy” 中的前面三个 “a”。注意，当匹配 “caaaaaaandy” 时，即使原始字符串拥有更多的 “a”，匹配项也是 “aaa”。</td> 
  </tr> 
  <tr> 
   <td align="left">n$</td> 
   <td align="left">匹配任何结尾为 n 的字符串。</td> 
  </tr> 
  <tr> 
   <td align="left">^n</td> 
   <td align="left">匹配任何开头为 n 的字符串。</td> 
  </tr> 
  <tr> 
   <td align="left">?=n</td> 
   <td align="left">匹配任何其后紧接指定字符串 n 的字符串。</td> 
  </tr> 
  <tr> 
   <td align="left">?!n</td> 
   <td align="left">匹配任何其后没有紧接指定字符串 n 的字符串。</td> 
  </tr> 
 </tbody> 
</table>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjI1MDMwMg_size_16_color_FFFFFF_t_70_pic_center]: /images/20221024/74d7b7fc58f9406a955d31ccbba2015d.png