Java Script 02-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_57519357/article/details/126649916

JS 对象

JS对象有哪些分类

宿主对象（host Objects）：是由JS宿主环境提高的对象。它的行为完全由宿主环境决定，比如web浏览器。

内置对象：由JS语言提高的对象（Date对象，Math对象）

固有对象：由标准规定的随着JS运行而创建的对象实例

原生对象：可以由用户通过Array、RegExp建立的对象

普通对象：由{}语法或者Object构造器或者Class关键字创建的对象
JS中引用数据类型用什么关键字

Object类型

eg：var student = new Objetc();
如何访问对象的属性

对象.属性名

对象.['属性名']
JS的数据类型

基本数据类型：String Number Boolean Undefined Null

引用数据类型

注意：Java中String是引用数据类型，但是JS中String是基本数据类型
JS的数据在栈和堆中的存储方式

栈内存中用来保存变量和基本类型，堆中存的对象

声明一个变量实际上就是在栈内存中创建一个空间来保存变量

JS函数
什么是JS的函数

函数由一连串子程序组成，可以被外部程序调用，可以向函数传入参数，函数可以返回一定值。
JS函数的执行顺序

如果只对函数进行声明，其中的代码是不会执行的，只有调用这个函数，函数才能执行。JS的执行顺序是从上到下，从左到右，但是函数不是。

JS函数也是一个对象，可以在创建Object对象时让一个属性指向一个函数。
函数声明的方式

第一种：function 函数名（...参数）{

方法体

}

第二种： var 函数名 = function（...参数）{

方法体

}

注意：JS所有的参数传递都是按值传递
JS 立即执行函数

（function(...参数){

方法语句

}）（）；

这个函数会一颗在渲染页面后立刻执行
this关键字的作用

解析器在调用函数时每次都会向函数的内部传递一个隐含的参数就是this ，this执行是一个对象，这个对象被称为函数执行的上下文对象，根据函数调用方式不同this会指向不同的对象，函数式形式调用时 this是window，以方法的形式调用时 this就是调用方的的那个对象。比如：
```
function Kunkun(name,sex) {    
    this.name = name;    
    this.sex = sex;    
    this.behavior = function () {console.log("我叫"+name+","+sex+",喜欢唱跳rap！");}
}
var kunkun2 = new Kunkun("kunkun2","男");
  kunkun2.behavior();
```

JS创建对象的两种方式（通过函数）

第一种：使用工厂模式建立对象（参考java的工厂模式）

function createKunKun(name,sex) {    
    var kunkun = new Object();    
    kunkun.name = name;    
    kunkun.sex = sex;    
    kunkun.behavior = function () { 
        console.log("我叫"+name+","+sex+",喜欢唱跳rap！");    
    }    
    return kunkun;
}
var kunkun1 = createKunKun("kunkun1","男");
kunkun1.behavior();

第二种：构造方法（常用）

构造方法就是一个普通的函数。我们人为的规定构造函数的方法名的首字母要大写。通过new关键字来创建对象。参考10中的代码

JS的内置对象

JS的Date对象的常用方法

var date = new Date(); //建立一个当前时间的对象 console.log(date.getFullYear()); // 获取当前时间的对象的年数据 console.log(date.getMonth()); // 获取当前时间的对象的月数据 0-11 console.log(date.getDate()); // 获取当前时间的对象的日数据 1-31 console.log(date.getHours()); // 获取当前时间的对象的小时数据 0-23 console.log(date.getMinutes()); // 获取当前时间的对象的分钟数据 0-59 console.log(date.getSeconds()); // 获取当前时间的对象的秒数据 0-59 console.log(date.getMilliseconds()); // 获取当前时间的对象的毫秒数据 0-999

JS的Math对象的常用方法

Math.PI //获取圆周率3.1415926...... Math.floor(2.6); //向下取整 2 Math.ceil(2.6); //向上取整 3 Math.round(2.4); //四舍五入 2 Math.max(-1,-100,-5); // -1 Math.min(-1, -100,-5); // -100

Math.Random(); // 生成一个随机数

练习：猜数游戏

var num = Math.ceil(Math.random(10)*10);
console.log(num);
for(var i = 0; i < 10 ; i ++){    
    var caice = prompt("请输入一个数据",'');    
    if(num == caice){        
        document.write(num);        
        alert("猜对了");        
        break;    
    }else if (num > caice){        
        alert("小了");    }
    else {        
        alert("大了");    
    }
}

JS的String方法

var str = "HELLO,world";
console.log(str.charAt(4));//根据索引读取指定位置的字符
console.log(str.concat("!","kunkun"));//可以将两个或 多个字符串进行拼接
console.log(str.indexOf("o")); //寻找对应字符串  并返回下标
console.log(str.lastIndexOf("o")); //寻找对应字符串  并返回下标
console.log(str.slice(1,6)); //可以从字符串中截取指定的内容,不影响原有字符串，将返回截取内容
console.log(str.substring(1,6)); //可以从字符串中截取指定的内容,影响原有字符串，将返回截取后的结果
console.log(str.toLowerCase()); //将字符串全部转为小写
console.log(str.toUpperCase()); //将字符串全部转为大写

正则表达式

什么是正则表达式

一些字符串的规则，计算机可以根据正则表达式来检查一个字符串是否适合标准。

格式：var 变量名 = new RegExp('正则表达式','匹配模式');

匹配模式：

i: 忽略大小写

g: 全局匹配功能

ig: 忽略大小写并且全局匹配
正则表达式的基础字符含义

| 或者

[a-gA-G0-9] 区间判断 *A-Z 除了A-Z之间的内容

[35879] 可以为 3 5 8 7 9

\d : 任意的数字相当于[0-9]

\D ：非数字

\w 任意的字母数字下划线相当于[A-Za-z0-9_]

\W 除了字母数字下划线相当于A-Za-z0-9_

\s 空格

\S 除了空格

{} 向前匹配一次

{n} 最少出现n次

{n,} 最少出现n次,最多无上线

{n,m} 最少出现n次,最多出现m次

+至少一次相当于{1,}

*0或多个相当于{0,}

? 0或1个相当于{0,1}

. 表示 .

\\ 表示 \

^[\u4e00-\u9fa5]{0,}$ 汉字

一些正则表达式的练习

//邮箱
var reg =/^\w+@[A-Za-z0-9]+(\.+[comn]{2,3})+(\.+[comn]{2,3})*$/
var str1 = "574246986@qq.com";
console.log(reg.test(str1));
//用户名 4-16 位 字母，下划线，数字，-号
var reg2 = /^[\w-*]{4,16}$/;
var str2 = "sun5742469_86-";
console.log(reg2.test(str2));
//密码强度
var reg3 = /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[.!@#$%*]).{6,}$/
var str3 = "aaaaA1234567.";
console.log(reg3.test(str3));

JS DOM基础

什么是JS DOM

DOM 是 Document Object Model(文档对象模型)的缩写。文档对象模型 (DOM) 是HTML和XML文档的编程接口。它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构，样式和内容。
什么是节点

节点Node : 是构成网页的最基本的组成，网页中每一个部分都可称为节点

文档节点（Document）：代表整合HTML文档，网页中所有的节点都是它的子节点

元素节点（Element）：各类标签都是元素节点

属性节点（Attribut）：标签中的一个属性就是一个元素节点

文本节点（Text）：表示HTML标签以外的文本内容

在文件节点定义中，<p value ="我是例外"></p>，<p>标签因为value属性就是给标签外的文本内容赋值，但value是一个元素节点

操作节点，改变HTML文件的一些练习

<!DOCTYPE html>
<html lang="en">
<head>    
    <meta charset="UTF-8">    
        <title>Title</title>
</head>
<body>
<p id="p1">这是p1的段落</p>
<p id="p2">这是p2的段落</p>
<a id="a1" href="test09.html">快点我</a>
<ul id="ul1">    
    <li>我</li>    
    <li>爱</li>    
    <li>kun</li>    
    <li>kun</li>
</ul>
<div id="div1" style="width: 200px;height: 100px;background-color: aqua"></div>
<script>    
    var p = document.getElementsByTagName("p");    
    console.log(p);    
    var p1 = document.getElementById("p1");    
    // p1.innerText = "这是改变的p1段落";    
    p1.innerHTML = "<strong>这是加了CSS的p1段落 </strong>";  

    var a1 = document.getElementById("a1");    
    a1.href = "https://taobao.com";

    var div1 = document.getElementById("div1");    
    // div1.style = "";

    var ul1 = document.querySelectorAll("#ul1 li")    
    console.log(ul1);
</script>
</body>
</html>