JavaWeb_JavaScript(JS)第二天笔记

回顾

• js 代码有哪两种引入方式

  <script>
  	//js
  </script>
  
  // js 代码写在 *.js文件中
  <script src="js文件的路径"></script>
  

• 声明变量和常量

  let 变量名;
  
  const 常量名;
  

• 六种基本类型

  number 
  boolean
  null
  string
  undefined
  bigint
  

• == (比较值) 与 === （比较类型和值）

• 数组

  let array = []; // 长度可变
  // 索引遍历
  array[0]  =  值;
  array.push(值);
  array.pop();
  array.splice(索引, 个数);
  

• 函数

  • 定义函数

    function 函数名(参数) {
        // js 代码
        // return 返回值
    }
    

  • 调用函数

    函数名(实参)
    

  • 匿名函数

    function (参数) {
        // js 代码
        // return 返回值
    }
    

• 查找标签

  document.getElementById(id值);
  
  document.getElementsByTagName(标签名);
  
  document.getElementsByClassName(class值);
  
  document.getElementsByName(name值);
  
  子.parentElement // 找父亲
  

• 增加标签

  document.createElement(标签名);
  父.appendChild(子);
  

• 删除标签

  父.removeChild(子);
  

• 管理属性

  元素.属性名
  元素.属性名=值
  元素.removeAttribute("属性名")
  
  元素.style.样式
  元素.style.display = "none|block"
  
  元素.className  // 对应标签的 class 属性
  

• 标签内容

  元素.innerText
  元素.innerHTML
  

• 定义事件

  <button onclick="函数名()">
      
  </button>
  
  <script>
  	function 函数名() {
          
      }
  </script>
  

  <button id="id值">
      
  </button>
  <script>
  	document.getElementById("id值").onclick = function() {
          
      }
  </script>
  

今日内容

1. 面向对象(了解)

• 字面量对象的定义方式(重点)

let person = {
    name: "张三",
    hobby: ["xx","yy"],
    address: {
        city:"北京",
        street:"西二旗"
    },
    
    方法名: function(参数) {
        
    },
    
    方法名(参数) {
        
    }
}

person.address.city 

2. 内置对象

参考网址：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects

Number

• parseInt
• NaN 代表非数字

Math

• random
• floor

Date

• getFullYear
• getMonth (要+1)
• date.getTime() 获取毫秒值
• 可以根据构造方法创建日期对象 new Date(毫秒值)

正则表达式(重点，会用，不需要从头写)

• 对字符串格式进行校验

• 验证邮件地址

  • aaa@bbb.net
  • /^\w+@\w+\.\w+$/
  • [a-zA-Z0-9_] 可以简化为 \w

  量词

  • {n} 固定n次
  • {m,n} 最小m次，最多 n 次
  • {m,} 最小m次，最多不限
  • {1, } 简化为 +, 最小1次
  • {0, } 简化为 *，可以0，可以无限
  • {0,1} 简化为 ?
  • . 表示任意字符，真正的小数点 \.

• 年龄 18~60 竖线代表或者 一对圆括号代表一组

  /^([2-5][0-9])|(60)|(1[89])$/             20~59|60|18|19
  

• 中文

  [a-z]

  [\u4e00-\u9fa5]

数组

• push
• pop
• shift
• includes
• sort - （原来是数字）排序是把元素当成了字符串 let arr = [1,2,3,4,5,11];
  • 解决： arr.sort( (a,b) => { return a-b } );

Set

* keys() .next.value

Map

• set(key, value)
• get(key)
• delete(key)

遍历方式

// let arr = [1,2,3,4,5];
/*let arr = new Set();
    arr.add(1);
    arr.add(2);
    arr.add(3);
    arr.add(4);
    for(let x of arr) {
        console.log(x);
    }*/
let map = new Map();
map.set("bj", "北京");
map.set("sh", "上海");

for(let [k,v] of map) {
    console.log(k, v);
}

JSON.stringify(js对象) => json 的字符串

JSON.parse(json字符串) => js 对象

浏览器和服务器交换数据，很多时候会用 json

• name=value
• {“name”:“value”} json 格式的参数

服务器返回的数据格式

• ... html格式响应
• {“name”:“value”} json 格式响应

json格式

{
	"名称":值（string, number, boolean, null）
	没有方法
	并且不能省略名字两步的双引号
}

3. 表单校验案例

<form onsubmit="return 函数()">
    <!-- 函数执行返回 false 则不会提交，否则提交 -->
</form>

<form id="form1">
    
</form>
<script>
	document.getElementById("form1").onsubmit = function() {
        
        //return false;  表单不会提交
        //return true; 表单提交
    }
</script>

4. BOM（个别方法重要）

let t = window.setTimeOut(函数, 毫秒值);
window.clearTimeOut(t);

let t = window.setInterval(函数, 间隔毫秒值);
window.clearInterval(t);

// 事件的定义window.不能省略
window.onload = function() { // 此函数会在页面所有内容都加载完毕后被值
    // 初始化代码（不会存在找不到标签的情况）
}

location.href="要跳转的新的地址";

location.reload();