JavaScript学习笔记（3）

最新推荐文章于 2024-07-12 09:36:48 发布

暮w光

最新推荐文章于 2024-07-12 09:36:48 发布

阅读量164

点赞数

分类专栏：前端文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/qi_SJQ_/article/details/119871640

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

四、js对象：

1.所有事物都是对象（字符串、数值、函数…）！

JavaScript 提供多个内建对象，比如 String、Date、Array 等等。 对象只是带有属性和方法的特殊数据类型！

布尔型可以是一个对象。
数字型可以是一个对象。
字符串也可以是一个对象。
日期是一个对象。
数学和正则表达式也是对象。
数组是一个对象。
甚至函数也可以是对象。

2.访问对象属性：

访问对象属性的语法是：

objectName.propertyName

如length属性：

var message="Hello World!";//字符串属于对象！
var x=message.length;

3.访问对象的方法：

方法是能够在对象上执行的动作。

语法：

objectName.methodName()

如toUpperCase（）方法：

var message="Hello world!";
var x=message.toUpperCase();

4.创建 JavaScript 对象：

创建新对象有两种方法：

使用 Object 定义并创建对象的实例。
使用函数来定义对象，然后创建新的对象实例。

在这里插入图片描述
（1）两种构造对象格式：

<script>
var person=new Object();
person.firstname="John";
person.lastname="Doe";
person.age=50;
person.eyecolor="blue"; 
document.write(person.firstname + " is " + person.age + " years old.");
</script>

也可以如下结构：

{ name1 : value1, name2 : value2,...nameN : valueN }

显然后一个更简洁：

<script>
person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"}
document.write(person.firstname + " is " + person.age + " years old.");
</script>

（2）也可以用函数来构造对象：

<script>
function person(firstname,lastname,age,eyecolor){
	this.firstname=firstname;
	this.lastname=lastname;
	this.age=age;
    this.eyecolor=eyecolor;
}
myFather=new person("John","Doe",50,"blue");
document.write(myFather.firstname + " is " + myFather.age + " years old.");
</script>

这样称为对象构造器，由此可以创建新的对象实例！

（3）
可以把方法添加到 JavaScript 对象中：

<script>
function person(firstname,lastname,age,eyecolor){
    this.firstname=firstname;
    this.lastname=lastname;
    this.age=age;
    this.eyecolor=eyecolor;
    this.changeName=changeName;
	function changeName(name){  //changeName() 函数 name 的值即“Doe”赋给 person 的 lastname 属性。
		this.lastname=name;
	}
}
myMother=new person("Sally","Rally",48,"green");
myMother.changeName("Doe");
document.write(myMother.lastname);
</script>

5.JavaScript 类：

JavaScript 是面向对象的语言，但 JavaScript 不使用类。

在 JavaScript 中，不会创建类，也不会通过类来创建对象（就像在其他面向对象的语言中那样）。

JavaScript 基于 prototype，而不是基于类的。

6.for…in 语句：

循环遍历对象的属性。

语法：

for (variable in object)
{
    执行的代码……
}

实例：

<script>
function myFunction(){
	var x;
	var txt="";
	var person={fname:"Bill",lname:"Gates",age:56}; 
	for (x in person){
		txt=txt + person[x];
	}
	document.getElementById("demo").innerHTML=txt;
}
</script>

7.js对象是可变的！它们是通过引用来传递的。

在这里插入图片描述

8.new 和不 new的区别：

如果 new 了函数内的 this 会指向当前这个 person 并且就算函数内部不 return 也会返回一个对象。
如果不 new 的话函数内的 this 指向的是 window。

function person(firstname,lastname,age,eyecolor)
{
    this.firstname=firstname;
    this.lastname=lastname;
    this.age=age;
    this.eyecolor=eyecolor;
    return [this.firstname,this.lastname,this.age,this.eyecolor,this] 
}

var myFather=new person("John","Doe",50,"blue");
var myMother=person("Sally","Rally",48,"green");
console.log(myFather) // this 输出一个 person 对象
console.log(myMother) // this 输出 window 对象

9.prototype（原型对象）：

所有的 JavaScript 对象都会从一个 prototype（原型对象）中继承属性和方法。而且在一个已存在构造器的对象中是不能添加新的属性的，要添加一个新的属性需要在在构造器函数中添加。

Date 对象从 Date.prototype 继承。
Array 对象从 Array.prototype 继承。
Person 对象从 Person.prototype 继承。

JavaScript 对象有一个指向一个原型对象的链。当试图访问一个对象的属性时，它不仅仅在该对象上搜寻，还会搜寻该对象的原型，以及该对象的原型的原型，依次层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末尾。

function Person(first, last, age, eyecolor) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eyecolor;
}
 
Person.prototype.nationality = "English";//若不带prototype属性是无法在对象中添加的，会报undefined，只能添到函数中。

也可以使用 prototype 属性就可以给对象的构造函数添加新的方法：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h2>JavaScript 对象</h2>

<p id="demo"></p>

<script>
function Person(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
}

Person.prototype.name = function() {
  return this.firstName + " " + this.lastName
};

var myFather = new Person("John", "Doe", 50, "blue");
document.getElementById("demo").innerHTML =
"我的父亲是 " + myFather.name(); 
</script>

</body>
</html>

通常使用构造器（函数体）定义属性，使用原型对象（prototype）定义方法。
如此，构造器只包含属性定义，而方法则分装在不同的代码块，使代码更具可读性：

// 构造器内定义属性
function Fun(a, b) {
  this.a = a;
  this.b = b;
}

// 原型属性定义方法
Fun.prototype.c = function() {
  return this.a + this.b;
}

// etc...
注意，千万不要使用字面量方式来定义属性和方法，否则原有属性和方法会被重写：

function Fn() {};

// 定义属性
Fn.prototype.a = 1;
Fn.prototype.b = 2;

// 字面量定义方法，原型被重写，原有属性和方法被更新
Fn.prototype = {
  c : function() {
    return this.a + this.b;
  }
}

var foo = new Fn();
foo.c();  // NaN
foo.a;  // undefined
foo.b;  // undefined

10.Number对象：

NaN
(-)Infinity
js中所有数字都是浮点型

11.String对象：

使用位置（索引）可以访问字符串中任何的字符：

var carname="Volvo XC60";
var character=carname[7];

使用 indexOf() 来定位字符串中某一个指定的字符首次出现的位置：

var str="Hello world, welcome to the universe.";
var n=str.indexOf("welcome");

使用split()函数将字符串转为转为数组:

txt="a,b,c,d,e"   // String
txt.split(",");   // 中间使用逗号分隔
txt.split(" ");   // 使用空格分隔
txt.split("|");   // 使用竖线分隔

<body>

<p id="demo">单击按钮显示数组。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
	var str="a,b,c,d,e,f";
	var n=str.split(",");
	document.getElementById("demo").innerHTML=n[1];
}
</script>

</body>

参考：https://www.runoob.com/js/js-obj-string.html

12.Date对象：

创建+设置：

var myDate=new Date();
myDate.setFullYear(2010,0,14);

13.Array对象：

数组对象的作用是：使用单独的变量名来存储一系列的值。

三个方法创建数组：
在这里插入图片描述
https://www.runoob.com/js/js-obj-array.html

14.Boolean对象：

var myBoolean=new Boolean();

15.Math（算数）对象：

作用：执行常见的算数任务。

Math 对象提供多种算数值类型和函数。无需在使用这个对象之前对它进行定义。

round()
random()
max()
min()
参考：https://www.runoob.com/jsref/jsref-obj-math.html

16.RegExp (正则)对象：

语法：

var patt=new RegExp(pattern,modifiers);

或更简单的方法

var patt=/pattern/modifiers;

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

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

var re = /\w+/;

实现：

<script>
var str = "Visit RUnoob";
var patt1 = /runoob/i;//i修饰符执行不区分大小写的匹配
document.write(str.match(patt1));
</script>

test()函数和exec()函数。

五、js BOM：

Bom（浏览器对象模型），与浏览器进行交互。

Window 对象：
1.所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。

在这里插入图片描述
3.
Window Screen：

window.screen 对象包含有关用户屏幕的信息。编写时可以不使用 window 这个前缀。

screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度

4.Window Location：
用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口（80 或 443）
location.protocol 返回所使用的 web 协议（http: 或 https:）

这个应该可以用于xss漏洞中，实现重定向！

如：Window Location Assign()函数：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function newDoc(){
    window.location.assign("https://www.runoob.com")
}
</script>
</head>
<body>
<input type="button" value="加载新文档" onclick="newDoc()">
</body>
</html>

window.location.assign(url) ：加载 URL 指定的新的 HTML 文档。就相当于一个链接，跳转到指定的url，当前页面会转为新页面内容，可以点击后退返回上一个页面。

window.location.replace(url) ：通过加载 URL 指定的文档来替换当前文档
，这个方法是替换当前窗口页面，前后两个页面共用一个窗口，所以是没有后退返回上一页的.

4.Window History:
window.history 对象包含浏览器的历史。

history.back() - 与在浏览器点击后退按钮相同。
history.forward() - 与在浏览器中点击向前按钮相同。
history.go()-改变参数也可实现前进后退刷新功能。

就是浏览器上边的前进后退按键！

5.Window Navigator：
包含有关访问者浏览器的信息。

<script>
txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
txt+= "<p>浏览器名称: " + navigator.appName + "</p>";
txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>";
txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
txt+= "<p>硬件平台: " + navigator.platform + "</p>";
txt+= "<p>用户代理: " + navigator.userAgent + "</p>";
txt+= "<p>用户代理语言: " + navigator.language + "</p>";
document.getElementById("example").innerHTML=txt;
</script>

在这里插入图片描述
6.弹窗：
1）警告框：

window.alert("sometext");

就是学xss是最常见的alert()函数，只有一个确定按钮。
2）确认框：可以点确定或取消。

window.confirm("sometext");

实例：

<body>

<p>点击按钮，显示确认框。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction(){
	var x;
	var r=confirm("按下按钮!");
	if (r==true){
		x="你按下了\"确定\"按钮!";
	}
	else{
		x="你按下了\"取消\"按钮!";
	}
	document.getElementById("demo").innerHTML=x;
}
</script>

</body>

3）提示框：用于提示用户在进入页面前输入某个值。

window.prompt("sometext","defaultvalue");

实例：

<body>

<p>点击按钮查看输入的对话框。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction(){
	var x;
	var person=prompt("请输入你的名字","Harry Potter");
	if (person!=null && person!=""){
	    x="你好 " + person + "! 今天感觉如何?";
	    document.getElementById("demo").innerHTML=x;
	}
}
</script>

</body>

7.计时事件：

设定一个时间间隔后来执行代码，即时间事件。如设置一个时钟。

setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
setTimeout() - 在指定的毫秒数后执行指定代码。

用法见：https://www.runoob.com/js/js-timing.html

8.js操作Cookie：
Cookie 用于存储 web 页面的用户信息。

https://www.runoob.com/js/js-cookies.html

六、js库（框架）：

1.jQuery：

jQuery 是目前最受欢迎的 JavaScript 框架。

它使用 CSS 选择器来访问和操作网页上的 HTML 元素（DOM 对象）。

jQuery 同时提供 companion UI（用户界面）和插件。

2.Prototype：

Prototype 是一种库，提供用于执行常见 web 任务的简单 API。

API 是应用程序编程接口（Application Programming Interface）的缩写。它是包含属性和方法的库，用于操作 HTML DOM。

Prototype 通过提供类和继承，实现了对 JavaScript 的增强。

3.MooTools：

MooTools 也是一个框架，提供了可使常见的 JavaScript 编程更为简单的 API。

MooTools 也含有一些轻量级的效果和动画函数。

4.其他框架：

在这里插入图片描述

5.CDN -内容分发网络：

您总是希望网页可以尽可能地快。您希望页面的容量尽可能地小，同时您希望浏览器尽可能多地进行缓存。

如果许多不同的网站使用相同的 JavaScript 框架，那么把框架库存放在一个通用的位置供每个网页分享就变得很有意义了。

CDN (Content Delivery Network) 解决了这个问题。CDN 是包含可分享代码库的服务器网络。

使用库/框架就直接src引入即可。

测试jquery：https://www.runoob.com/js/js-lib-jquery.html
测试prototype：https://www.runoob.com/js/js-lib-prototype.html

js参考手册：https://www.runoob.com/jsref/jsref-tutorial.html

ps：感觉知识记得未必熟，复制粘贴截图倒练地熟练地不行........

暮w光

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习笔记（3）

四、js对象：1.所有事物都是对象（字符串、数值、函数…）！JavaScript 提供多个内建对象，比如 String、Date、Array 等等。对象只是带有属性和方法的特殊数据类型！布尔型可以是一个对象。数字型可以是一个对象。字符串也可以是一个对象。日期是一个对象。数学和正则表达式也是对象。数组是一个对象。甚至函数也可以是对象。2.访问对象属性：访问对象属性的语法是：objectName.propertyName如length属性：var message="Hello
复制链接

扫一扫