js复习笔记day6_myfather=new person("john","doe",50,"blue");-CSDN博客

本文链接：https://blog.csdn.net/huali_1995/article/details/77448836

JavaScript HTML DOM 元素(节点)

创建新的 HTML 元素

<div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("这是一个新段落。");
para.appendChild(node);

var element=document.getElementById("div1");
element.appendChild(para);
</script>

删除已有的 HTML 元素

<script>
var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);
</script>

JavaScript 对象

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...

所有事物都是对象

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

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

访问对象的方法

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

创建 JavaScript 对象

通过 JavaScript，您能够定义并创建自己的对象。

创建新对象有两种不同的方法：

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

person=new Object();
person.firstname="John";
person.lastname="Doe";
person.age=50;
person.eyecolor="blue";

替代语法（使用对象 literals）：

person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};

使用对象构造器

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

创建 JavaScript 对象实例

var myFather=new person("John","Doe",50,"blue");

var myMother=new person("Sally","Rally",48,"green");

把方法添加到 JavaScript 对象

方法只不过是附加在对象上的函数。

在构造器函数内部定义对象的方法：

function person(firstname,lastname,age,eyecolor)

{

this.firstname=firstname;

this.lastname=lastname;

this.age=age;

this.eyecolor=eyecolor;

this.changeName=changeName;

function changeName(name)

{

this.lastname=name;

}

myMother.changeName("Doe”);//changeName() 函数 name 的值赋给 person 的 lastname 属性。

JavaScript 类

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

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

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

<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>

JavaScript Number 对象

JavaScript 只有一种数字类型。

可以使用也可以不使用小数点来书写数字。

所有 JavaScript 数字均为 64 位

精度整数（不使用小数点或指数计数法）最多为 15 位。

八进制和十六进制

如果前缀为 0，则 JavaScript 会把数值常量解释为八进制数，如果前缀为 0 和 "x"，则解释为十六进制数。

//使用 toString() 方法 输出16进制、8进制、2进制。
var myNumber=128;
myNumber.toString(16);   // 返回 80
myNumber.toString(8);    // 返回 200
myNumber.toString(2);    // 返回 10000000

无穷大（Infinity）

当数字运算结果超过了JavaScript所能表示的数字上限（溢出），结果为一个特殊的无穷大（infinity）值，在JavaScript中以Infinity表示。同样地，当负数的值超过了JavaScript所能表示的负数范围，结果为负无穷大，在JavaScript中以-Infinity表示。无穷大值的行为特性和我们所期望的是一致的：基于它们的加、减、乘和除运算结果还是无穷大（当然还保留它们的正负号）。

NaN - 非数字值

NaN 属性是代表非数字值的特殊值。该属性用于指示某个值不是数字。可以把 Number 对象设置为该值，来指示其不是数字值。

数字可以是数字或者对象

<script>
var x = 123;              // x 是一个数字
var y = new Number(123);  // y 是一个对象
var txt = typeof(x) + " " + typeof(y);
document.getElementById("demo").innerHTML=txt;
</script>

JavaScript 字符串（String）对象

String 对象用于处理已有的字符块。

JavaScript 字符串

字符串（String）使用长度属性length来计算字符串的长度

//字符串（String）使用长度属性length来计算字符串的长度
var txt="Hello World!";
document.write(txt.length);

//字符串使用 indexOf() 来定位字符串中某一个指定的字符首次出现的位置：
var str="Hello world, welcome to the universe.";
var n=str.indexOf("welcome");
//如果没找到对应的字符函数返回-1

内容匹配

match()函数用来查找字符串中特定的字符，并且如果找到的话，则返回这个字符。

替换内容

replace() 方法在字符串中用某些字符替换另一些字符。

str="Please visit Microsoft!"
var n=str.replace("Microsoft","w3cschool");

字符串大小写转换

字符串大小写转换使用函数 toUpperCase() / toLowerCase():

var txt="Hello World!";       // String
var txt1=txt.toUpperCase();   // txt1 文本会转换为大写
var txt2=txt.toLowerCase();   // txt2 文本会转换为小写

字符串转为数组

<script>
function myFunction(){
	var str="a,b,c,d,e,f";
	var n=str.split(",");
	document.getElementById("demo").innerHTML=n[0];
}
</script>
//输出a

JavaScript Date（日期）对象

日期对象用于处理日期和时间。

getFullYear() 使用 getFullYear() 获取年份。

getTime() getTime() 返回从 1970 年 1 月 1 日至今的毫秒数。

<script>
function myFunction(){
	var d = new Date();
	var x = document.getElementById("demo");
	x.innerHTML=d.getTime();
}
</script>

setFullYear() 如何使用 setFullYear() 设置具体的日期。

<script>
function myFunction(){
	var d = new Date();
	var x = document.getElementById("demo");
	x.innerHTML=d.getFullYear();
}
</script>

toUTCString() 如何使用 toUTCString() 将当日的日期（根据 UTC）转换为字符串。

<script>
function myFunction(){
	var d = new Date();
	var x = document.getElementById("demo");
	x.innerHTML=d.toUTCString();
}
</script>

getDay() 如何使用 getDay() 和数组来显示星期，而不仅仅是数字。

<script>
function myFunction(){
	var d = new Date();
	var weekday=new Array(7);
	weekday[0]="周日";
	weekday[1]="周一";
	weekday[2]="周二";
	weekday[3]="周三";
	weekday[4]="周四";
	weekday[5]="周五";
	weekday[6]="周六";
	var x = document.getElementById("demo");
	x.innerHTML=weekday[d.getDay()];
}
</script>

Display a clock 如何在网页上显示一个钟表。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function startTime(){
	var today=new Date();
	var h=today.getHours();
	var m=today.getMinutes();
	var s=today.getSeconds();// 在小于10的数字前加一个‘0’
	m=checkTime(m);
	s=checkTime(s);
	document.getElementById('txt').innerHTML=h+":"+m+":"+s;
	t=setTimeout(function(){startTime()},500);
}
function checkTime(i){
	if (i<10){
		i="0" + i;
	}
	return i;
}
</script>
</head>
<body οnlοad="startTime()">
	
<div id="txt"></div>
	
</body>
</html>

创建日期

Date 对象用于处理日期和时间。

可以通过 new 关键词来定义 Date 对象。以下代码定义了名为myDate 的 Date 对象

有四种方式初始化日期:

new Date() // 当前日期和时间
new Date(milliseconds) //返回从 1970 年 1 月 1 日至今的毫秒数
new Date(dateString)
new Date(year, month, day, hours, minutes, seconds, milliseconds)

//实例化日期
var today = new Date()
var d1 = new Date("October 13, 1975 11:13:00")
var d2 = new Date(79,5,24)
var d3 = new Date(79,5,24,11,33,0)

设置日期
var myDate=new Date();
myDate.setFullYear(2010,0,14);//2010 年 1 月 14 日

var myDate=new Date();
myDate.setDate(myDate.getDate()+5);//将日期对象设置为 5 天后的日期

两个日期比较

var x=new Date();
x.setFullYear(2100,0,14);
var today = new Date();

if (x>today)
{
	alert("今天是2100年1月14日之前");
}
else
{
	alert("今天是2100年1月14日之后");
}

JavaScript Array（数组）对象

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

创建一个数组

//1: 常规方式:
var myCars=new Array(); 
myCars[0]="Saab";       
myCars[1]="Volvo";
myCars[2]="BMW";

//2: 简洁方式:
var myCars=new Array("Saab","Volvo","BMW");

//3: 字面:
var myCars=["Saab","Volvo","BMW"];

在一个数组中你可以有不同的对象

所有的JavaScript变量都是对象。数组元素是对象。函数是对象。

因此，你可以在数组中有不同的变量类型。

你可以在一个数组中包含对象元素、函数、数组：

myArray[0]=Date.now;
myArray[1]=myFunction;
myArray[2]=myCars;

创建新方法

原型是JavaScript全局构造函数。它可以构建新Javascript对象的属性和方法。

<script>
Array.prototype.myUcase=function(){
	for (i=0;i<this.length;i++){
		this[i]=this[i].toUpperCase();
	}
}
function myFunction(){
	var fruits = ["Banana", "Orange", "Apple", "Mango"];
	fruits.myUcase();
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>

//点击按钮将数组作为字符串输出。
<script>
function myFunction(){
	var fruits = ["Banana", "Orange", "Apple", "Mango"];
	var x=document.getElementById("demo");
	x.innerHTML=fruits.join();
}
</script>

//单击按钮将数组反转排序。
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
function myFunction(){
	fruits.reverse();
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>

//单击按钮升序排列数组。
<script>
function myFunction(){
	var points = [40,100,1,5,25,10];
	points.sort(function(a,b){return a-b});
	var x=document.getElementById("demo");
	x.innerHTML=points;
}
</script>

//点击按钮向数组添加元素。
//result:Banana,Orange,Lemon,Kiwi,Apple,Mango
<script>
function myFunction(){
	var fruits = ["Banana", "Orange", "Apple", "Mango"];
	fruits.splice(2,0,"Lemon","Kiwi");
	var x=document.getElementById("demo");
	x.innerHTML=fruits;
}
</script>

JavaScript Math（算数）对象

Math（算数）对象的作用是：执行常见的算数任务。

round()//

舍入与“2.5”最接近的整数即为3

<script>
function myFunction(){
	document.getElementById("demo").innerHTML=Math.round(2.5);
}
</script>

点击按钮显示一个随机数

Math.random();

//单击按钮返回5到10之间的最大值

document.getElementById("demo").innerHTML=Math.max(5,10);