JAVA保姆式上手教程之JAVAWEB day01-js基础

╰半夏微凉° 2023-09-29 21:16 17阅读 0赞

## JavaScript概述 ##

### JavaScript简介 ###

> 一门客户端脚本语言，运行在客户端浏览器中的。每一个浏览器都有JavaScript的解析引擎，不需要编译，直接就可以被浏览器解析执行了

### javaScript的发展史 ###

*  \*\*起源：\*\*上世纪末1995年时，Netscape（网景）公司推出Navigator浏览器。发布后用的人不多，这咋整啊？这家公司就想了一个好方案，不仅在浏览器实现静态HTML，还想要有动态效果，比如：在前端处理表单验证。
 *  \*\*动手：\*\*有目标就去做，网景公司大牛多，Brendan Eich（布兰登·艾奇）据说就用了10天就把JavaScript搞了出来，刚出来时叫LiveScript，为了蹭蹭当红明星Java热度，就改成JavaScript了（瞬间就火了），事实上他们两没啥关系。
 *  \*\*竞争：\*\*看到网景公司有了js，微软感觉不行啊，我的IE要被干掉啊，同时也感到js的前途无量，于是参考JavaScript弄了个名为JScript浏览器脚本语言。
 *  **标准：** Netscape和微软竞争出现的js导致版本的不一致，随着业界的担心，JavaScript的标准化被提上议事日程。ECMA（欧洲计算机制造商协会）组织就去干这事，最后在1997年弄出了ECMAScript作为标准。这里ECMAscript和JavaScript可以看做表达的同一个东西。

### JavaScript的功能 ###

> 可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验。

### JavaScript特点 ###

*  js源码不需要编译，浏览器可以直接解释运行
 *  js是弱类型语言，js变量声明不需要指明类型

现代js https://zh.javascript.info/

### JavaScript组成 ###

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-2OtBmpfl-1677607165221)(asseits/20190815201321445.jpg)\]

<table> 
 <thead> 
  <tr> 
   <th><strong>组成部分</strong></th> 
   <th><strong>作用</strong></th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><strong>ECMA Script</strong></td> 
   <td>构成了JS核心的语法基础</td> 
  </tr> 
  <tr> 
   <td><strong>BOM</strong></td> 
   <td>Browser Object Model 浏览器对象模型，用来操作浏览器上的对象</td> 
  </tr> 
  <tr> 
   <td><strong>DOM</strong></td> 
   <td>Document Object Model 文档对象模型，用来操作网页中的元素（标签）</td> 
  </tr> 
 </tbody> 
</table>

## JavaScript基础语法 ##

### HTML引入JS ###

#### 内部js ####

> 定义script标签，标签体内容就是js代码

注意事项

> `<script>`标签可以写在任意位置，推荐写在`<body>`的尾部。浏览器在执行时，是从下往下依次执行！

#### 外部js ####

> 定义

**总结：**

> 1.  script标签不能自闭合
> 2.  如果script标签使用src属性，那么浏览器将不会解析此标签体的js代码

### JS三种输出数据方式 ###

#### 浏览器弹框输出字符 ####

#### 输出html内容到页面 ####

#### 输出到浏览器控制台 ####

### 3.3 JS注释 ###

#### 单行注释 ####

// 注释内容

#### 多行注释 ####

/*注释内容*/

### JS变量声明 ###

> java是强类型语言，注重变量的定义，所以在定义变量时都需要指定数据类型。
> 
> js是弱类型语言，不注重变量的定义，所以在定义变量时不需要指定数据类型。

*  ##### 语法 #####
    
     *  ###### 定义变量 ######
        
            let 变量名 = 值;
            var 变量名 = 值;
     *  ###### 定义常量 ######
        
            const 常量名 = 值;
 *  ##### 代码演示 #####
    
        <!DOCTYPE html>
        <html>
        	<head>
        		<meta charset="UTF-8">
        		<title></title>
        		<script>
        			// 使用let关键字 定义字符串
        			let str1 = "你好JS!";
        			
        			// 使用var关键字 定义字符串
        			var str2 = "你好JavaScript!";
        			
        			console.log(str1);
        			console.log(str2);
        			
        			// 定义整数
        			let num = 1314;
        			console.log(num);
        			
        			// 定义浮点数
        			let score = 99.9;
        			console.log(score);
        			
        			// 定义boolean类型
        			let flag = true;
        			console.log(flag);
        			
        			// 定义常量
        			const PI = 3.1415926;
        			
        			// 常量定义之后值不能改变
        			// PI = 1;
        			console.log(PI);
        			
        			// 定义变量a并末赋值，能不能使用?
        			let a;
        			console.log(a);  // undefined 表示变量末定义类型
        		</script>
        	</head>
        	<body>
        	</body>
        </html>

注意事项

*  ECMAScript6之前定义变量使用`var` 但是会有很多坑，所以ECMAScript6之后开始推出`let`声明变量，`const`声明常量
 *  在js中，末赋值的变量，也是可以使用的，但是这个值是`undefined`,末定义的变量

### JS数据类型 ###

> js与java一样，数据类型分为基本数据类型(原始数据类型) 和 引用数据类型

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>number</td> 
   <td>数字类型,不区别整数和小数</td> 
  </tr> 
  <tr> 
   <td>string</td> 
   <td>字符串类型，不区别单双串</td> 
  </tr> 
  <tr> 
   <td>boolean</td> 
   <td>true/false</td> 
  </tr> 
  <tr> 
   <td>object</td> 
   <td>对象(function、null)</td> 
  </tr> 
  <tr> 
   <td>undefined</td> 
   <td>未定义</td> 
  </tr> 
 </tbody> 
</table>

类型判断

> typeof 判断数据类型
> 
> 语法： typeof 变量

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="UTF-8">
    		<title></title>
    		<script>
    			// 使用let关键字 定义字符串
    			let str1 = "你好JS!";
    			let str2 =  'a';
    			console.log(typeof str1);
    			console.log(typeof str2);
    			
    			// 定义整数
    			let num1 = 1314;
    			let num2 = 13.14;
    			console.log(typeof num1);
    			console.log(typeof num2);
    						
    			// 定义boolean类型
    			let flag = true;
    			console.log(typeof flag);
    			
    			// 末定义类型
    			let a;
    			console.log(typeof a); 
    			
    			// 引用数据类型
    			let obj = new Object();
    			console.log(typeof obj); 
    			
    		</script>
    	</head>
    	<body>
    	</body>
    </html>

输出结果：

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-tD0lr0RD-1677607165223)(assets/image-20210127142737311.png)\]

### JS运算符 ###

> JavaScript中的运算符和大多数编程语言中的运算符都接近，只有个别运算符因其灵活性而带来了些许不同

<table> 
 <thead> 
  <tr> 
   <th>运算符</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>算数运算符</td> 
   <td><code>+</code>、 <code>-</code> 、<code> *</code>、 <code>/</code> 、<code> %</code> 、 <code>++</code> 、 <code>--</code></td> 
  </tr> 
  <tr> 
   <td>赋值运算符</td> 
   <td><code>=</code> 、<code> +=</code> 、<code>-=</code> 、 <code>*=</code> 、 <code>/=</code> 、 <code>%=</code></td> 
  </tr> 
  <tr> 
   <td>比较运算符</td> 
   <td><code>&gt;</code> 、 <code>&gt;=</code> 、 <code>&lt; </code> 、 <code>&lt;=</code> 、 <code>==</code> 、 <code> ===(全等于,仅js)</code> 、 !=</td> 
  </tr> 
  <tr> 
   <td>逻辑运算符</td> 
   <td><code>&amp;&amp;</code> 、 `</td> 
  </tr> 
  <tr> 
   <td>三元运算符</td> 
   <td>关系表达式 ? 值1 : 值2;</td> 
  </tr> 
 </tbody> 
</table>

#### 算数运算符 ####

> 在js中数值可与字符串进行数学运算，底层实现隐式转换。

输出结果:

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BGIvpA12-1677607165224)(assets/image-20210127161617134.png)\]

注意事项:

var a = 3;
    var b = 4;
    var c = "一燕";
    
    alert(a/b);//js相除可以得到小数
    
    alert(typeof(a+c)); // number类与字符串类型相加，字符串拼接
    
    var d = 6;
    var f = '4';
    alert(d+f);//拼接的64
    
    var a1 = 3;
    var a2 = "4";
    alert(a1-a2);//1 如果字符串与number类型进行相减，默认把字符串的数字转成number类型
    
    var b1 = 3;
    var b2 = "abc";
    alert(b1-b2);   //NaN  not a number ;
    
    //如果数值与boolean类型为的数据，进行做运算时，会将boolean数据转换成数值。true转为1，false转为0
    var bo1 = true;  
    var bo2 = false;
    alert(a+bo1);//4
    alert(a+bo2);//3

#### 比较运算符 ####

`==` 、 `===(全等于)`之间的区别？

== : 只比较内容是否相同  根本不比较数据类型 
    ===：全等于。在比较之前，先判断类型，如果类型不一样，则直接返回false

#### 三元运算符 ####

/*
    三(目)元运算符？ 
    格式：  表达式 ？ 结果1 ： 结果2 ；
    如果表达式运算的结果是true,把结果1返回
    如果表达式运算的结果是false,把结果2返回
    */
    //定义一个变量为3
    let a = 3;
    //定义一个变量为4
    let b = 4;
    //页面输出
    document.write(a>b ? a : b);

#### js特有转换 ####

/*
    			  三(目)元运算符？ 
    			  格式：  表达式 ？ 结果1 ： 结果2 ；			  
    			  如果表达式运算的结果是true,把结果1返回
    			  如果表达式运算的结果是false,把结果2返回
    			  */			 
    			 //定义一个变量为3
    			 let a = 3;			 
    			 //定义一个变量为4
    			 let b = 4;			 
    			 let c = 0;
    			 
    			 //页面输出
    			 document.write( (a>b ? a : b) );
    			 document.write("<hr>");
    			 
    			 //在js中表达式不必满足boolean   无意义--》false 
    			 //如果满足的 非0 ,非空，非null， 非undefined 为true
    			 //如果满足的 是0 ，为空，是null , 是undefined 为false
    			 document.write( (c ? a : b) );

### JS流程控制语句 ###

> js与java一样，也有三个流程控制语句： 顺序结构 选择结构 循环结构

#### 选择结构 ####

*  ##### if结构 #####
    
        <script type="text/javascript">
            if (条件表达式) {
                
                代码块;
            } else if(条件表达式){
                
                代码块;
            } else {
                
                代码块;
            }
        </script>
 *  注意事项
    
    > JS的条件语句和Java语法基本一样,但是对数据类型的真假判断有些区别。
    > 
    > JS中对各种数据类型作为布尔值有以下特点：
    
    <table> 
     <thead> 
      <tr> 
       <th>类型</th> 
       <th>用法</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>boolean</td> 
       <td>true为真、false为假</td> 
      </tr> 
      <tr> 
       <td>number</td> 
       <td>非0为true</td> 
      </tr> 
      <tr> 
       <td>string</td> 
       <td>除了空字符串(“”)，其他都是true</td> 
      </tr> 
      <tr> 
       <td>null&amp;undefined</td> 
       <td>都是false</td> 
      </tr> 
      <tr> 
       <td>对象</td> 
       <td>所有对象都为true</td> 
      </tr> 
     </tbody> 
    </table>
    
    > 总结： 无意义的数据都为false 反之都为true
    
        <script type="text/javascript">
            let obj = new Object();
            //if...elseif...else
            //if(true){
                
            //if(""){//string只有空字符为假
            //if(0){number只有0为假
            //if(false){//booleanfalse为假true为真  //if(null){//objectnull为假
            //if(undefined){//undefined永为假
            //	if("undefined") { // 这不是undefined类型，而是字符串，内容是undefined
            if(obj) {
                 // 对象
                console.log("满足条件");
            } else {
                
                console.log("不满足条件");
            }
        </script>
 *  ##### switch结构 #####
    
        <script type="text/javascript">
         			var score = 90;//定义一个变量			
        			/* parseInt 取整的一个函数（方法） */			
        			/* 
        		注意事项： 
        			1、switch表达式一定会先找case,找到后一定要给break
        			2、switch给位置没有关系，跟case有关
        			3、如果找到后没有break，可以继续执行，直到找到break或都程序结束
        			 */
        			
        			switch(parseInt(score/10)){
                
        				case 10:
        				case 9:
        					alert("学霸");
        					// break;
        				default:
        					alert("学渣");
        					// break;
        				case 8:
        					alert("优秀");
        					// break;
        				case 7:
        					alert("还行");
        					break;	
        			}			
        </script>
 *  注意事项
    
        * 在java中，switch语句可以接受的数据类型： byte int shor char,枚举(1.5) ,String(1.7)
        * switch(变量):
        	case 值:
        * 在JS中,switch语句可以接受任意的原始数据类型

#### 循环结构 ####

*  ##### for循环 #####
    
     *  普通for循环
        
            for(let 初始化语句; 条件表达式; 条件控制语句){
                    
                循环体;
            }
     *  增强for循环
        
            for(let 变量名 of 对象){
                    
                需要执行的代码;
            }
     *  索引for循环 是js特有
        
            for(let 变量 in 对象){
                    
                需要执行的代码;
            }
     *  ###### 代码演示 ######
        
            <script type="text/javascript">
                // 定义数组
              let arr = ["张三","李四","王五"];
            
                console.log("普通for循环");    
                for (let i = 0 ; i < arr.length ; i++) {
                      
                    console.log(arr[i]);
                }
                console.log("for of循环");
                // for of循环
                for (let e of arr) {
                      
                    console.log(e);
                }
            
                console.log("forin循环");
                // for in循环
                for (let index in arr) {
                      
                    console.log(arr[index]);
                }
            </script>
        
        \[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hxwMRY46-1677607165225)(assets/image-20210129144907236.png)\]
     *  ##### forof 与 forin之间的区别 #####
    
    1.  forin可以遍历对象,forof不能遍历对象
    2.  forin遍历出数组中的索引,forof遍历出数组中的元素
 *  ##### while循环 #####
    
        <script>    
            		/* 
        				for一般用在某一个范围中循环
        				while一般用在一个确定范围中循环
        				
        				for中的var i = 1;这个只能在for循环中使用
        				while中的var i = 1; 可以全局中使用
        			 */
        			
        			for(let i = 1; i <= 10; i++){
              
        				document.write(i);
        				document.write("<br>");
        			}
        			// document.write(i);		
        			document.write("<hr>");
        			
        			let y = 1; 
        			while( y <= 10){
              
        				document.write(y);
        				document.write("<br>");
        				 y++;
        			}
        			// document.write(y);
        			
        			document.write("<hr>");
        			
        			 //1 ~ 100 求和
        			 let sum = 0;
        			 let num = 1;
        			 while(num <= 100){
              
        				 sum += num;
        				 num++;
        			 }			
        			document.write(sum);
            </script>
 *  ##### doWhile循环 #####
    
    > do…while循环就不再单独演示，跟java中的do…while循环用法是一致的！
    
        <script>			
        			//定义了一个变量
        			let a = 1;
        			do{
              
        				//循环体，至少执行一次
        				document.write(a)
        				a++;
        			}while(a <= 10);//循环判断条件		
        	</script>
 *  ##### 循环总结 #####
    
        while 和Java一样 
        do while 和Java一样
        重点掌握:
        	普通for 与 java一样
        	forin：遍历出数组的索引 
        		   遍历出对象中的属性名key
        	forof: 遍历数组中的元素

## JS函数(方法) ##

> js函数是执行特定功能的代码块.也可以称为js方法。与java中的方法的功能是一样的。

#### 语法 ####

function 函数名(参数列表){
        
        函数体;
        [return 返回值;]
    }

#### 函数的第一种定义方式 ####

#### 函数的第二种定义方式 ####

#### 3.匿名函数 ####

#### 如何绑定一个函数 ####

<!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title></title>
    		<script>
    			function demo(){
        
    				alert("我是小面包，你是谁啊？");
    			}
    		</script>
    	</head>
    	<body>		
    	<input type="button" value="你点我啊小饼干" onclick="demo()" />
    	</body>
    </html>

#### 如何获取标签中的内容 ####

#### JS函数注意事项 ####

*  方法定义时，形参的类型不用写,返回值类型可写可不写
 *  如果定义名称相同的方法，会被覆盖，js中没有方法的重载的概念
 *  在JS中，方法的调用只与方法的名称有关，和参数列表无关
 *  在方法声明中有一个隐藏的内置对象（数组），arguments,封装所有的实际参数
 *  JS函数中也可以有匿名函数
    
    > 匿名函数经常会跟事件进行结合着使用
    
        function(参数列表){
              
            函数体;
            [return 返回值;]
        }
    
    #### 校验手机号 ####
    
        <script>
        			function demo(){
                				
        				var  spanid = document.getElementById("spanid"); 	
        				//获取输入框
        				var phid =  document.getElementById("phid");
        				//获取输入框中的内容
        				var p_value = phid.value; //13140008888
        				//定义手机号规则 
        				var regExp = new RegExp("^1[356789]\\d{9}$");
        				//拿用户输入手机号和定义手机号规则比较
        				if(regExp.test(p_value)){
              
        					// alert("手机号正确");
        					spanid.innerHTML="";
        				}else{
              
        					// alert("手机号不正确");
        					spanid.innerHTML="手机号必须满足11位数字！";
        				}
        			}
        		</script>
        	</head>
        	<body>
        		<form action="#" method="post">
        		手机号：<input type="text" name="phonenum" id="phid"/><span style="color: red;" id="spanid"></span>
        		<input type="button" value="测试手机号" onclick="demo()" />
        		</form>
        		
        	</body>
    
    #### 正则表达式 ####
    
        RegExp对象，正则对象，正则表达式的书写规则和Java也一致：
        
        . 当前可以是任意字符
        ? 表示零次或一次
        * 表示零次或多次
        + 表示一次或多次
        
        () 对某个存在的正则进行分组   组的使用  \组号   $组号
        {} 当前的规则可以出现的次数  
        {2} 正好 2次  {m,} 最少m次  {m,n} 最少m次 最多n
        [] 当前位置上可以是中括号中某个字符
          [abc] [^abc] [a-zA-Z][0-9]
        
        \\d 当前位置上可以数字 
        \\w 当前位置上可以是字母 数字 下划线
        \b 单词边界  hello world
        ^ 行开始
        $ 行结尾
    
    ### window.onload ###
    
        <script>
        			//页面加载时触发
        			window.onload = function(){
                				
        				//获取按钮
        				var _id = document.getElementById("inputid");  				
        				//对象名.事件名
        				_id.onclick = function(){
                					
        					//获取标签中的内容
        					var id2  = document.getElementById("id2");
        					
        					//弹出
        					alert(id2.innerHTML);
        				}  				
        			}  			
        		</script>
        	</head>
        	<body>
        		<p id="id2">轻轻的你走了，那就走吧！！！</p>
        		<input  id="inputid" type="button" value="你点我啊"/>

\`\`\`

## JS常用内置对象 ##

### String对象 ###

#### 创建对象 ####

> 有三种方式: 单引号(‘’) 、双引号(“”) 、反引号(\`\`)

#### 常用方法 ####

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>substring()</td> 
   <td>提取字符串中两个指定的索引号之间的字符</td> 
  </tr> 
  <tr> 
   <td>toLowerCase()</td> 
   <td>把字符串转换为小写。</td> 
  </tr> 
  <tr> 
   <td>toUpperCase()</td> 
   <td>把字符串转换为大写。</td> 
  </tr> 
  <tr> 
   <td>replace()</td> 
   <td>替换与正则表达式匹配的子串。</td> 
  </tr> 
  <tr> 
   <td>charAt()</td> 
   <td>返回在指定位置的字符。</td> 
  </tr> 
  <tr> 
   <td>trim()</td> 
   <td>移除字符串首尾空白</td> 
  </tr> 
  <tr> 
   <td>split(delimiter)</td> 
   <td>把字符串分割为子字符串数组;分割为数组</td> 
  </tr> 
 </tbody> 
</table>

### Array对象 ###

#### 创建数组 ####

*  ###### 格式一 【推荐】 ######
    
    > let 数组名 = \[元素1,元素2,元素3…\];
    > 
    >     <script>
    >     			//数组中元素类型是随便写
    >     			let arr = [11,22,33,44,"55"];			
    >     			//长度
    >     			// alert(arr.length);			
    >     			//指定获取数组中的元素
    >     			// alert(arr[4]);			
    >     			//通过脚标修改元素
    >     			arr[2] = 99;
    >     			
    >     			arr[3] = "hello";
    >     			
    >     			//遍历一
    >     			for(let i = 0; i< arr.length; i++){
    >            
    >     				document.write(arr[i]);
    >     				document.write("<br>");
    >     			}			
    >     			//遍历二
    >     			for(let a in arr){
    >            
    >     				document.write(arr[a]+",");
    >     			}			
    >     </script>
 *  ###### 格式二 ######
    
    > let 数组名 = new Array(元素1,元素2,元素3…);
    
        <script>
        			//如果给出多个参数，表示的是数组的元素
        			let arr = new Array(11,22,"hello",'88',true);
        			
        			//长度
        			alert(arr.length);
        			
        			//获取
        			alert(arr[2]);
        			
        			//如果给的参数所number类型，并且只有一个，表示是长度
        			let arr = new Array(11);
        			alert(arr.length);
        			
        			//如果给的参数所number类型，是一个小数，无法表示长度
        			let arr = new Array(3.14);//Invalid array length
        			alert(arr.length);
        			
        			//如果给的参数字符中类型，并且是一个，表示元素
        			let arr = new Array("11");
        			alert(arr.length);
        			
        			//遍历
        			for(let i in arr){
              
        				document.write(arr[i]);
        			}
        			
        		</script>

#### 常用方法 ####

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>concat()</td> 
   <td>连接两个或更多的数组，并返回结果</td> 
  </tr> 
  <tr> 
   <td>push()</td> 
   <td>向数组的末尾添加一个或更多元素，并返回新的长度</td> 
  </tr> 
  <tr> 
   <td>join(参数)</td> 
   <td>将数组中的元素按照指定的分隔符拼接为字符串</td> 
  </tr> 
 </tbody> 
</table>

\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BFj4y13V-1677607165226)(assets/image-20210129234127500.png)\]

#### 数组的属性 ####

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td><code>length</code></td> 
   <td>获取数组的长度</td> 
  </tr> 
 </tbody> 
</table>

#### 数组的特点 ####

1. JS中，数组元素的类型可变的。
    2. JS中，数组长度可变的。

### Math对象 ###

#### 创建对象 ####

> Math对象不用创建，直接使用。 Math.方法名();

#### 常用方法 ####

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>round(x)</td> 
   <td>把数四舍五入为最接近的整数。</td> 
  </tr> 
  <tr> 
   <td>floor(x)</td> 
   <td>向下取整</td> 
  </tr> 
  <tr> 
   <td>ceil(x)</td> 
   <td>向上取整</td> 
  </tr> 
  <tr> 
   <td>random()</td> 
   <td>随机数，返回 0 ~ 1 之间的随机数。 含0不含1</td> 
  </tr> 
 </tbody> 
</table>

#### Math属性 ####

### Date对象 ###

#### 创建对象 ####

> var date = new Date();

#### 常用方法 ####

<table> 
 <thead> 
  <tr> 
   <th>方法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>toLocaleString()</td> 
   <td>返回当前date对象对应的时间本地字符串格式</td> 
  </tr> 
  <tr> 
   <td>getTime()</td> 
   <td>获取毫秒值。返回当前如期对象描述的时间到1970年1月1日零点的毫秒值差</td> 
  </tr> 
  <tr> 
   <td>getFullYear()</td> 
   <td>获取年</td> 
  </tr> 
  <tr> 
   <td>getMonth()</td> 
   <td>获取月</td> 
  </tr> 
  <tr> 
   <td>getHours()</td> 
   <td>获取时</td> 
  </tr> 
  <tr> 
   <td>getMinutes()</td> 
   <td>获取分</td> 
  </tr> 
  <tr> 
   <td>getDate()</td> 
   <td>获取日</td> 
  </tr> 
  <tr> 
   <td>getSeconds()</td> 
   <td>获取秒</td> 
  </tr> 
 </tbody> 
</table>

### 全局函数 ###

#### 什么是全局函数 ####

> 全局函数不需要对象就可以直接调用: 方法名();

#### 常用全局函数 ####

*  ###### 字符串与number之间的转换 ######
    
    <table> 
     <thead> 
      <tr> 
       <th>方法</th> 
       <th>说明</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>parseInt()</td> 
       <td>将字符串解析成一个整数。</td> 
      </tr> 
      <tr> 
       <td>parseFloat()</td> 
       <td>将字符串解析成一个浮点数。</td> 
      </tr> 
      <tr> 
       <td>isNaN()</td> 
       <td>判断是否是一个NaN类型的数据</td> 
      </tr> 
     </tbody> 
    </table>
    
        <script>
            console.log(parseInt("123.456"));//123
            console.log(parseInt("12abc3.456"));//12
        
            console.log(parseFloat("123.456"));//123.456
            console.log(parseFloat("123.45abc6"));//123.45
        
            console.log(parseInt("abc123"));//NaN : not a number 不是一个数字
        	
            console.log(isNaN("abc123"));//true
        </script>
    
    \[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mU5JHfug-1677607165227)(assets/image-20210130094255498.png)\]

注意事项

NaN 六亲不认，连自己都不认。
    如果要判断是否是一个NaN类型的数据，使用isNaN()

*  ###### 字符编码 ######
    
    \[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9uOhs94R-1677607165229)(assets/image-20210130095154503.png)\]
    
    <table> 
     <thead> 
      <tr> 
       <th>方法</th> 
       <th>说明</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>encodeURI()</td> 
       <td>把字符串编码为 URI</td> 
      </tr> 
      <tr> 
       <td>decodeURI()</td> 
       <td>解码某个编码的 URI</td> 
      </tr> 
     </tbody> 
    </table>
    
        <script>
        	let name = "明下午两点偷袭珍珠";
            let encodeName = encodeURI(name);//编码
            //%E6%98%8E%E4%B8%8B%E5%8D%88%E4%B8%A4%E7%82%B9%E5%81%B7%E8%A2%AD% E7%8F%8D%E7%8F%A0
            console.log(encodeName);
            // 对数据进行解码
            let resultStr = decodeURI(encodeName);//解码
            console.log(resultStr);//明下午两点偷袭珍珠    
        </script>
 *  ###### 普通字符串解析js代码 ######
    
    <table> 
     <thead> 
      <tr> 
       <th>方法</th> 
       <th>说明</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>eval()</td> 
       <td>接受一个js字符串,校验字符串中的内容是不是js代码(脚本)，如果是js代码就执行，如果不是就不执行</td> 
      </tr> 
     </tbody> 
    </table>
    
        eval("abc");//不执行
        eval("var a = 3; var b = 4; alert(a+b);");//执行
    
    #### URL 和 URI ####
    
    https://www.baidu.com/a/fdks/kdjs

http:// 网络传输协议

www 万维网

.baidu.com 域名

/a/fdks/kdjs 资源路径（资源：一个文件，一个程序，图片，视频，，，）

URL: 统一资源定位符 https://www.baidu.com

注意事项

NaN 六亲不认，连自己都不认。
    如果要判断是否是一个NaN类型的数据，使用isNaN()

*  ###### 字符编码 ######
    
    \[外链图片转存中…(img-9uOhs94R-1677607165229)\]
    
    <table> 
     <thead> 
      <tr> 
       <th>方法</th> 
       <th>说明</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>encodeURI()</td> 
       <td>把字符串编码为 URI</td> 
      </tr> 
      <tr> 
       <td>decodeURI()</td> 
       <td>解码某个编码的 URI</td> 
      </tr> 
     </tbody> 
    </table>
    
        <script>
        	let name = "明下午两点偷袭珍珠";
            let encodeName = encodeURI(name);//编码
            //%E6%98%8E%E4%B8%8B%E5%8D%88%E4%B8%A4%E7%82%B9%E5%81%B7%E8%A2%AD% E7%8F%8D%E7%8F%A0
            console.log(encodeName);
            // 对数据进行解码
            let resultStr = decodeURI(encodeName);//解码
            console.log(resultStr);//明下午两点偷袭珍珠    
        </script>
 *  ###### 普通字符串解析js代码 ######
    
    <table> 
     <thead> 
      <tr> 
       <th>方法</th> 
       <th>说明</th> 
      </tr> 
     </thead> 
     <tbody> 
      <tr> 
       <td>eval()</td> 
       <td>接受一个js字符串,校验字符串中的内容是不是js代码(脚本)，如果是js代码就执行，如果不是就不执行</td> 
      </tr> 
     </tbody> 
    </table>
    
        eval("abc");//不执行
        eval("var a = 3; var b = 4; alert(a+b);");//执行
    
    #### URL 和 URI ####
    
    https://www.baidu.com/a/fdks/kdjs

http:// 网络传输协议

www 万维网

.baidu.com 域名

/a/fdks/kdjs 资源路径（资源：一个文件，一个程序，图片，视频，，，）

URL: 统一资源定位符 https://www.baidu.com

URI：统一资源标识符 /a/fdks/kdjs