JavaScript学习笔记一 js基础
总结自http://www.w3school.com.cn
操作 HTML 元素
如需从 JavaScript 访问某个 HTML 元素,您可以使用 document.getElementById(id) 方法。
请使用 "id" 属性来标识 HTML 元素:
<!DOCTYPE html>
<html>
<body>
<h1>My First Web Page</h1>
<p id="demo">My First Paragraph.</p>
<script>
document.getElementById("demo").innerHTML="My First JavaScript";
</script>
</body>
</html>
浏览器将访问 id="demo" 的 HTML 元素,并把它的内容(innerHTML)替换为 "My First JavaScript"。
写到文档输出
下面的例子直接把 <p> 元素写到 HTML 文档输出中:
<script>
document.write("<p>我的第一段 JavaScript</p>");
</script>
警告
请使用 document.write() 仅仅向文档输出写内容。
如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖:
<!DOCTYPE html>
<html>
<body><h1>我的第一张网页</h1><p>我的第一个段落。</p><button οnclick="myFunction()">点击这里</button><script>
function myFunction()
{
document.write("糟糕!文档消失了。");
}
</script></body>
</html>
分号 ;
分号用于分隔 JavaScript 语句。
通常我们在每条可执行的语句结尾添加分号。
使用分号的另一用处是在一行中编写多条语句。
提示:您也可能看到不带有分号的案例。
在 JavaScript 中,用分号来结束语句是可选的。
对代码行进行折行
您可以在文本字符串中使用反斜杠对代码行进行换行。下面的例子会正确地显示:
document.write("Hello \
World!");
JavaScript 变量
与代数一样,JavaScript 变量可用于存放值(比如 x=2)和表达式(比如 z=x+y)。
变量可以使用短名称(比如 x 和 y),也可以使用描述性更好的名称(比如 age, sum, totalvolume)。
- 变量必须以字母开头
- 变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做)
- 变量名称对大小写敏感(y 和 Y 是不同的变量)
提示:JavaScript 语句和 JavaScript 变量都对大小写敏感。
声明(创建) JavaScript 变量
在 JavaScript 中创建变量通常称为“声明”变量。
我们使用 var 关键词来声明变量:
var carname;
变量声明之后,该变量是空的(它没有值), 是 undefined。
一条语句,多个变量
您可以在一条语句中声明很多变量。该语句以 var 开头,并使用逗号分隔变量即可:
var name="Gates", age=56, job="CEO";
重新声明 JavaScript 变量
如果重新声明 JavaScript 变量,该变量的值不会丢失:
在以下两条语句执行后,变量 carname 的值依然是 "Volvo":
var carname="Volvo"; var carname;
JavaScript 数字
JavaScript 只有一种数字类型。数字可以带小数点,也可以不带:
实例
var x1=34.00; //使用小数点来写 var x2=34; //不使用小数点来写
极大或极小的数字可以通过科学(指数)计数法来书写:
实例
var y=123e5; // 12300000 var z=123e-5; // 0.00123
JavaScript 数组
下面的代码创建名为 cars 的数组:
var cars=new Array(); cars[0]="Audi"; cars[1]="BMW"; cars[2]="Volvo";
或者 (condensed array):
var cars=new Array("Audi","BMW","Volvo");
或者 (literal array):
实例
var cars=["Audi","BMW","Volvo"];
JavaScript 对象
对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔:
var person={firstname:"Bill", lastname:"Gates", id:5566};
上面例子中的对象 (person) 有三个属性:firstname、lastname 以及 id。
空格和折行无关紧要。声明可横跨多行:
var person={ firstname : "Bill", lastname : "Gates", id : 5566 };
对象属性有两种寻址方式:
实例
name=person.lastname; name=person["lastname"];
Undefined 和 Null
Undefined 这个值表示变量不含有值。
可以通过将变量的值设置为 null 来清空变量。
var cars; //undefined cars=null; //null
创建 JavaScript 对象
JavaScript 中的几乎所有事务都是对象:字符串、数字、数组、日期、函数,等等。
你也可以创建自己的对象。
本例创建名为 "person" 的对象,并为其添加了四个属性:
实例
person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";
JavaScript 函数语法
function functionname()
{
这里是要执行的代码
}
JavaScript 对大小写敏感。关键词 function 必须是小写的。
调用带参数的函数
在调用函数时,您可以向其传递值,这些值被称为参数。
这些参数可以在函数中使用。
您可以发送任意多的参数,由逗号 (,) 分隔。 注:var1,var2前不能加var:
myFunction(argument1,argument2)
//以下代码有错误:1. 函数参数声明时不能带var 2. 引用函数时,因为外层有双引号"", 故内层参数不能再用双引号"", 可以改为外双内单,或外单内双
//下面的函数会当按钮被点击时提示 "Welcome Bill Gates, the CEO"。<!DOCTYPE html>
<html>
<body><p>点击这个按钮,来调用带参数的函数。</p>
<button type="button" onClick="func("Bill Gates", "CEO")">点击这里</button><script>
function func(var name,var job){
alert(name +", the " + job);
}
</script></body>
</html>
改成后的代码应为:
<!DOCTYPE html>
<html>
<body><p>点击这个按钮,来调用带参数的函数。</p>
<button type="button" onClick="func('Bill Gates', 'CEO')">点击这里</button><script>
function func(name,job){
alert(name +", the " + job);
}
</script></body>
</html>
带有返回值的函数
有时,我们会希望函数将值返回调用它的地方。
通过使用 return 语句就可以实现。
在使用 return 语句时,函数会停止执行,并返回指定的值。
语法
function myFunction()
{
var x=5;
return x;
}
//示例:计算两数的乘法并输出:
<!DOCTYPE html>
<html>
<body><p>本例调用的函数会执行一个计算,然后返回结果:</p><p id="demo"></p><script>
function func(a, b){
return a*b;
}document.getElementById("demo").innerHTML = func(5,4);
</script></body>
</html>
局部 JavaScript 变量
在 JavaScript 函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它。(该变量的作用域是局部的)。
您可以在不同的函数中使用名称相同的局部变量,因为只有声明过该变量的函数才能识别出该变量。
只要函数运行完毕,本地变量就会被删除。
全局 JavaScript 变量
在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。
JavaScript 变量的生存期
JavaScript 变量的生命期从它们被声明的时间开始。
局部变量会在函数运行以后被删除。
全局变量会在页面关闭后被删除。
向未声明的 JavaScript 变量来分配值
如果您把值赋给尚未声明的变量,该变量将被自动作为全局变量声明。
这条语句:
carname="Volvo";
将声明一个全局变量 carname,即使它在函数内执行。
例如:以下代码中的x变量将成为全局变量;如果前有var修饰,这为函数内部局部变量。
<script>
function myFunction()
{
x=document.getElementById("demo"); // 找到元素
x.innerHTML="Hello JavaScript!"; // 改变内容
}
</script>
相加运算符:如果把数字与字符串相加,结果将成为字符串。
比较运算符
比较运算符在逻辑语句中使用,以测定变量或值是否相等。
给定 x=5:
=== | 全等(值和类型) | x===5 为 true;x==="5" 为 false |
If 语句
注意:请使用小写的 if。使用大写字母(IF)会生成 JavaScript 错误!
示例:如果当前时间小于20:00,则输出"Good day hahaha":
<!DOCTYPE html>
<html>
<body><p>如果时间早于 20:00,会获得问候 "Good day"。</p>
<button type="button" onClick="func()">点击这里</button>
<p id="demo"></p><script>
function func(){
var hour = new Date().getHours();
if(hour < 20){
document.getElementById("demo").innerHTML = "Good day hahaha";
}
}
</script>
</body>
</html>
Switch 语句
实例
显示今日的周名称。请注意 Sunday=0, Monday=1, Tuesday=2, 等等:
<!DOCTYPE html>
<html>
<body><p>点击下面的按钮来显示今天是周几:</p>
<button onClick="func()">点击这里</button>
<p id= "demo"></p>
<script>
function func(){
var result="Today it's ";
switch(new Date().getDay()){
case 0:result += "Sunday";break;
case 1:result += "周一Monday";break;
case 2:result += "周二Tuesday";break;
case 3:result += "周三Wednesday";break;
default: result +="other";
}document.getElementById("demo").innerHTML = result;
}
</script>
</body>
</html>
注:js中的switch 语句可以用于字符串,而且能用不是常量的值说明情况:
switch(new Date().getDay()+""){
case "0":result += "Sunday";break;
case "1":result += "周一Monday";break;
case "2":result += "周二Tuesday";break;
case "3":result += "周三Wednesday";break;
default: result +="other";
}
不同类型的循环
JavaScript 支持不同类型的循环:
- for - 循环代码块一定的次数
- for/in - 循环遍历对象的属性
- while - 当指定的条件为 true 时循环指定的代码块
- do/while - 同样当指定的条件为 true 时循环指定的代码块
For 循环
for 循环是您在希望创建循环时常会用到的工具。
下面是 for 循环的语法:
for (语句 1; 语句 2; 语句 3){被执行的代码块}
语句 1 在循环(代码块)开始前执行
语句 2 定义运行循环(代码块)的条件
语句 3 在循环(代码块)已被执行之后执行
语句 1
通常我们会使用语句 1 初始化循环中所用的变量 (var i=0)。
语句 1 是可选的,也就是说不使用语句 1 也可以。
您可以在语句 1 中初始化任意(或者多个)值:
实例:
cars=["BMW","Volvo","Saab","Ford"];
for (var i=0,len=cars.length; i<len; i++)
{
document.write(cars[i] + "<br>");
}
同时您还可以省略语句 1(比如在循环开始前已经设置了值时):
实例:
cars=["BMW","Volvo","Saab","Ford"];
var i=2,len=cars.length;
for (; i<len; i++)
{
document.write(cars[i] + "<br>");
}
语句 2
通常语句 2 用于评估初始变量的条件。
语句 2 同样是可选的。
如果语句 2 返回 true,则循环再次开始,如果返回 false,则循环将结束。
提示:如果您省略了语句 2,那么必须在循环内提供 break。否则循环就无法停下来。这样有可能令浏览器崩溃。
语句 3
通常语句 3 会增加初始变量的值。
语句 3 也是可选的。
语句 3 有多种用法。增量可以是负数 (i--),或者更大 (i=i+15)。
语句 3 也可以省略(比如当循环内部有相应的代码时):
实例:
var i=0,len=cars.length;
for (; i<len; )
{
document.write(cars[i] + "<br>");
i++;
}
For/In 循环
JavaScript for/in 语句循环遍历对象的属性:
实例
<!DOCTYPE html>
<html>
<body>
<p>点击下面的按钮,循环遍历对象 "person" 的属性。</p>
<button οnclick="myFunction()">点击这里</button>
<p id="demo"></p>
<script>
function myFunction(){
var person = {firstName:"Bill", lastName:"Gates", age: 58};
var result = "";
for(x in person){
result += person[x];
}
document.getElementById("demo").innerHTML = result;
}
</script>
</body>
</html>
while循环示例代码:
<!DOCTYPE html>
<html>
<body><script>
cars=["BMW","Volvo",undefined, "Saab","Ford"];
var i=0;
//不为undefined、null
//for (;cars[i];) //for循环方式
while (cars[i]) //while方式{
document.write(cars[i] + "<br>");
i++;
}
</script></body>
</html>
JavaScript 标签
正如您在 switch 语句那一章中看到的,可以对 JavaScript 语句进行标记。
如需标记 JavaScript 语句,请在语句之前加上冒号:
label: 语句
break 和 continue 语句仅仅是能够跳出代码块的语句。
语法
break labelname; continue labelname;
continue 语句(带有或不带标签引用)只能用在循环中。
break 语句(不带标签引用),只能用在循环或 switch 中。
通过标签引用,break 语句可用于跳出任何 JavaScript 代码块:
实例
<!DOCTYPE html>
<html>
<body><script>
cars=["BMW","Volvo","Saab","Ford"];
list:
{
document.write(cars[0] + "<br>");
document.write(cars[1] + "<br>");
document.write(cars[2] + "<br>");
break list;
document.write(cars[3] + "<br>");
document.write(cars[4] + "<br>");
document.write(cars[5] + "<br>");
}
</script></body>
</html>
如果将 break list;注释掉,则输出为:
JavaScript 错误-Throw、Try和Catch
try 语句测试代码块的错误。
catch 语句处理错误。
throw 语句创建自定义错误。
错误一定会发生
当 JavaScript 引擎执行 JavaScript 代码时,会发生各种错误:
可能是语法错误,通常是程序员造成的编码错误或错别字。
可能是拼写错误或语言中缺少的功能(可能由于浏览器差异)。
可能是由于来自服务器或用户的错误输出而导致的错误。
当然,也可能是由于许多其他不可预知的因素。
JavaScript 抛出错误
当错误发生时,当事情出问题时,JavaScript 引擎通常会停止,并生成一个错误消息。
描述这种情况的技术术语是:JavaScript 将抛出一个错误。
语法
try{//在这里运行代码} catch(err){//在这里处理错误}
实例
在下面的例子中,我们故意在 try 块的代码中写了一个错字。
catch 块会捕捉到 try 块中的错误,并执行代码来处理它。
<!DOCTYPE html>
<html>
<head>
<script>
var txt="";
function message()
{
try{adddlert("Welcome guest!");}
catch(err){txt="本页有一个错误。\n\n";txt+="错误描述:" + err.message + "\n\n";txt+="点击确定继续。\n\n";alert(txt);}
}
</script>
</head><body>
<input type="button" value="查看消息" οnclick="message()" />
</body></html>
Throw 语句
throw 语句允许我们创建自定义错误。
正确的技术术语是:创建或抛出异常(exception)。
如果把 throw 与 try 和 catch 一起使用,那么您能够控制程序流,并生成自定义的错误消息。
语法
throw exception
异常可以是 JavaScript 字符串、数字、逻辑值或对象。
实例
本例检测输入变量的值。如果值是错误的,会抛出一个异常(错误)。catch 会捕捉到这个错误,并显示一段自定义的错误消息:
<!DOCTYPE html>
<html>
<body><script>
function myFunction()
{
try
{
var x=document.getElementById("demo").value;
if(x=="") throw "值为空";
if(isNaN(x)) throw "不是数字";
if(x>10) throw "太大";
if(x<5) throw "太小";
}
catch(err)//异常err可以是 JavaScript 字符串、数字、逻辑值或对象。
{
var y=document.getElementById("mess");
y.innerHTML="错误:" + err + "。";
}
}
</script><h1>我的第一个 JavaScript 程序</h1>
<p>请输入 5 到 10 之间的数字:</p>
<input id="demo" type="text">
<button type="button" οnclick="myFunction()">测试输入值</button>
<p id="mess"></p></body>
</html>
JavaScript HTML DOM
通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素。
HTML DOM (文档对象模型)
当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。
HTML DOM 模型被构造为对象的树。
HTML DOM 树
通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应
查找 HTML 元素
通常,通过 JavaScript,您需要操作 HTML 元素。
为了做到这件事情,您必须首先找到该元素。有三种方法来做这件事:
- 通过 id 找到 HTML 元素
- 通过标签名找到 HTML 元素
- 通过类名找到 HTML 元素
通过 id 查找 HTML 元素
在 DOM 中查找 HTML 元素的最简单的方法,是通过使用元素的 id。
document.getElementById(id);
如果找到该元素,则该方法将以对象的形式返回该元素。如果未找到该元素,则 x 将包含 null。
通过标签名查找 HTML 元素
实例
本例查找 id="main" 的元素,然后查找 "main" 中的所有 <p> 元素:
<!DOCTYPE html>
<html>
<body><p>Hello World!</p>
<div id="main">
<p>The DOM is very useful.</p>
<p>本例演示<b>getElementsByTagName</b>方法。</p>
</div>
<p id="output"></p>
<script>
x = document.getElementById("main");
y = x.getElementsByTagName("p");
document.getElementById("output").innerHTML = 'id 为"main"的div中的第一段文本是:' + y[0].innerHTML;
</script>
</body>
</html>
提示:通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。
改变 HTML 属性
如需改变 HTML 元素的属性,请使用这个语法:
document.getElementById(id).attribute=new value
实例
本例改变了 <img> 元素的 src 属性:
<!DOCTYPE html>
<html>
<body><img id="image" src="smiley.gif"><script>
document.getElementById("image").src="landscape.jpg";
</script></body>
</html>
改变 HTML 样式
如需改变 HTML 元素的样式,请使用这个语法:
document.getElementById(id).style.property=new style
例子 1
下面的例子会改变 <p> 元素的样式:
<!DOCTYPE html>
<html>
<body><p id="p1">Hello World!</p>
<p id="p2">Hello World!</p><script>
document.getElementById("p2").style.color="red";
document.getElementById("p2").style.fontFamily="宋体";
document.getElementById("p2").style.fontSize="larger";
</script><p>上面的段落已被一段脚本修改。</p></body>
</html>
例子 2
本例改变了 id="id1" 的 HTML 元素的样式,当用户点击按钮时:
<!DOCTYPE html>
<html>
<body><h1 id="id1">My Heading 1</h1>
<button type="button"
οnclick="document.getElementById('id1').style.color='red'">
点击这里!</button></body>
</html>
例子3 隐藏和显示
<!DOCTYPE html>
<html>
<body><p id="p1">这是一段文本。</p><input type="button" value="隐藏文本" οnclick="document.getElementById('p1').style.visibility='hidden'" />
<input type="button" value="显示文本" οnclick="document.getElementById('p1').style.visibility='visible'" /></body>
</html>
JavaScript HTML DOM 事件
HTML 事件的例子:
- 当用户点击鼠标时
- 当网页已加载时
- 当图像已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当提交 HTML 表单时
- 当用户触发按键时
注:在标签中的函数参数有this,this指当前标签。
示例:
<!DOCTYPE html>
<html>
<head>
<script>
function changetext(id)
{
id.innerHTML="谢谢!";
}
</script>
</head>
<body><h1 οnclick="changetext(this)">请点击该文本</h1></body>
</html>
使用 HTML DOM 来分配事件
HTML DOM 允许您通过使用 JavaScript 来向 HTML 元素分配事件:
实例
向 button 元素分配 onclick 事件:
<!DOCTYPE html>
<html>
<head>
</head>
<body><p>点击按钮就可以执行 <em>displayDate()</em> 函数。</p><button id="myBtn" >点击这里</button> <script>
document.getElementById("myBtn").onclick = function(){displayDate()}; //注: 这里只能是onclick而不能是onClick,否则不生效;而在标签中定义点击事件,onClick和onclick都可以function displayDate(){
document.getElementById("demo").innerHTML = Date();
}
</script><p id="demo"></p></body>
</html>
在上面的例子中,名为 displayDate 的函数被分配给 id=myButn" 的 HTML 元素。
当按钮被点击时,会执行该函数。
onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
实例
<!DOCTYPE html>
<html>
<body οnlοad="checkCookies()">
<script>
function checkCookies(){if(navigate.cookieEnabled){alert("cookie已启用");}else{alert("cookie未启用");}
}
</script>
</body><p>提示框会告诉你,浏览器是否已启用 cookie。</p>
</body>
</html>
onchange 事件
onchange 事件常结合对输入字段的验证来使用。
下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时,会调用 upperCase() 函数。
实例
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
var x=document.getElementById("fname");
x.value =x.value.toUpperCase();
}
</script>
</head>
<body>请输入英文字符:<input type="text" id="fname" οnchange="myFunction()">
<p>当您离开输入字段时,会触发将输入文本转换为大写的函数。</p></body>
</html>
onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
实例
一个简单的 onmousedown-onmouseup 实例:
<!DOCTYPE html>
<html><body><div οnmοuseοver="mOver(this)" οnmοuseοut="mOut(this)" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">把鼠标移到上面</div><script>
function mOver(obj)
{
obj.innerHTML="谢谢"
}function mOut(obj)
{
obj.innerHTML="把鼠标移到上面"
}
</script></body>
</html>
onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时,会触发 onmousedown 事件,当释放鼠标按钮时,会触发 onmouseup 事件,最后,当完成鼠标点击时,会触发 onclick 事件。
实例
一个简单的 onmousedown-onmouseup 实例:
<!DOCTYPE html>
<html>
<body><div οnmοusedοwn="mDown(this)" οnmοuseup="mUp(this)" style="background-color:green;color:#ffffff;width:90px;height:20px;padding:40px;font-size:12px;">请点击这里</div><script>
function mDown(obj)
{
obj.style.backgroundColor="#1ec5e5";
obj.innerHTML="请释放鼠标按钮"
}function mUp(obj)
{
obj.style.backgroundColor="green";
obj.innerHTML="请按下鼠标按钮"
}
</script></body>
</html>
JavaScript HTML DOM 元素(节点)
添加和删除节点(HTML 元素)。
创建新的 HTML 元素
如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素。
实例
<!DOCTYPE html>
<html>
<body><div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div><script>
var para=document.createElement("p");//创建新的 <p> 元素
var node=document.createTextNode("这是新段落。");//如需向 <p>元素添加文本,您必须首先创建文本节点。这段代码创建了一个文本节点:
para.appendChild(node); //向 <p> 元素追加这个文本节点var element=document.getElementById("div1");
element.appendChild(para); //向这个已有的元素追加新元素
</script></body>
</html>
删除已有的 HTML 元素
如需删除 HTML 元素,您必须首先获得该元素的父元素:
实例
<!DOCTYPE html>
<html>
<body><div id="div1">
<p id="p1">这是一个段落。</p>
<p id="p2">这是另一个段落。</p>
</div><script>
var div = document.getElementById("div1");
var p2 = document.getElementById("p2");
div.removeChild(p2);//从父元素中删除子元素
</script></body>
</html>
提示:如果能够在不引用父元素的情况下删除某个元素,就太好了。
不过很遗憾。DOM 需要清楚您需要删除的元素,以及它的父元素。
这是常用的解决方案:找到您希望删除的子元素,然后使用其 parentNode 属性来找到父元素:
var child = document.getElementById("p1");
child.parentNode.removeChild(child);
JavaScript 中的所有事物都是对象:字符串、数值、数组、函数...
此外,JavaScript 允许自定义对象。
JavaScript 对象
JavaScript 提供多个内建对象,比如 String、Date、Array 等等。此外,JavaScript 允许自定义对象。
对象只是带有属性和方法的特殊数据类型。
创建 JavaScript 对象
通过 JavaScript,您能够定义并创建自己的对象。
创建新对象有两种不同的方法:
- 定义并创建对象的实例
- 使用函数来定义对象,然后创建新的对象实例
创建直接的实例
这个例子创建了对象的一个新实例,并向其添加了四个属性:
person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.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("Bill","Gates",56,"blue");
var myMother=new person("Steve","Jobs",48,"green");
把属性添加到 JavaScript 对象
您可以通过为对象赋值,向已有对象添加新属性:
假设 personObj 已存在 - 您可以为其添加这些新属性:firstname、lastname、age 以及 eyecolor:
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";x=person.firstname;
在以上代码执行后,x 的值将是:Bill
把方法添加到 JavaScript 对象
方法只不过是附加在对象上的函数。
在构造器函数内部定义对象的方法:
<!DOCTYPE html>
<html>
<body>
<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)
{
this.lastname=name;
}}
myMother=new person("Steve","Jobs",56,"green");
myMother.changeName("nike");
document.write(myMother.lastname);
</script></body>
</html>
JavaScript 类
JavaScript 是面向对象的语言,但 JavaScript 不使用类。
在 JavaScript 中,不会创建类,也不会通过类来创建对象(就像在其他面向对象的语言中那样)。
JavaScript 基于 prototype,而不是基于类的。
JavaScript for...in 循环
JavaScript for...in 语句循环遍历对象的属性。
实例
循环遍历对象的属性:
var person={fname:"Bill",lname:"Gates",age:56};
for (x in person){txt=txt + person[x];
}
所有 JavaScript 数字均为 64 位
JavaScript 不是类型语言。与许多其他编程语言不同,JavaScript 不定义不同类型的数字,比如整数、短、长、浮点等等。
JavaScript 中的所有数字都存储为根为 10 的 64 位(8 比特),浮点数。
精度
整数(不使用小数点或指数计数法)最多为 15 位。
小数的最大位数是 17,但是浮点运算并不总是 100% 准确:
实例
<!DOCTYPE html>
<html>
<body><script>var x=12345678901234567890;
document.write("<p>只有 17 位: "+ x + "</p>");x=0.2+0.1;
document.write("<p>0.2 + 0.1 = " + x + "</p>");x=(0.2*10+0.1*10)/10;
document.write("<p>可分别乘以 10 并除以 10 : " + x +"</p>");</script></body>
</html>
八进制和十六进制
如果前缀为 0,则 JavaScript 会把数值常量解释为八进制数,如果前缀为 0 和 "x",则解释为十六进制数。
实例
var y=0377;
var z=0xFF;
提示:绝不要在数字前面写零,除非您需要进行八进制转换。
数字属性和方法
属性:
- MAX VALUE
- MIN VALUE
- NEGATIVE INFINITIVE
- POSITIVE INFINITIVE
- NaN
- prototype
- constructor
方法:
- toExponential()
- toFixed()
- toPrecision()
- toString()
- valueOf()
JavaScript String(字符串)对象 实例
为字符串添加样式
<script type="text/javascript">var txt="Hello World!"document.write("<p>Big: " + txt.big() + "</p>")
document.write("<p>Small: " + txt.small() + "</p>")document.write("<p>Bold: " + txt.bold() + "</p>")
document.write("<p>Italic: " + txt.italics() + "</p>")document.write("<p>Blink: " + txt.blink() + " (does not work in IE)</p>")
document.write("<p>Fixed: " + txt.fixed() + "</p>")
document.write("<p>Strike: " + txt.strike() + "</p>")document.write("<p>Fontcolor: " + txt.fontcolor("Red") + "</p>")
document.write("<p>Fontsize: " + txt.fontsize(16) + "</p>")document.write("<p>Lowercase: " + txt.toLowerCase() + "</p>")
document.write("<p>Uppercase: " + txt.toUpperCase() + "</p>")document.write("<p>Subscript: " + txt.sub() + "</p>")
document.write("<p>Superscript: " + txt.sup() + "</p>")document.write("<p>Link: " + txt.link("http://www.w3school.com.cn") + "</p>")
</script>
结果:
Big: Hello World!
Small: Hello World!
Bold: Hello World!
Italic: Hello World!
Blink: Hello World! (does not work in IE)
Fixed: Hello World!
Strike: Hello World!
Fontcolor: Hello World!
Fontsize: Hello World!
Lowercase: hello world!
Uppercase: HELLO WORLD!
Subscript: Hello World!
Superscript: Hello World!
Link: Hello World!
match() 方法
使用 match() 来查找字符串中特定的字符,并且如果找到的话,则返回这个字符。
<html>
<body><script type="text/javascript">var str="Hello world!"
document.write(str.match("world") + "<br />")
document.write(str.match("World") + "<br />")
document.write(str.match("worlld") + "<br />")
document.write(str.match("world!"))</script></body>
</html>
JavaScript Date(日期)对象
日期对象用于处理日期和时间。
JavaScript Date(日期)对象 实例
- 返回当日的日期和时间
- 如何使用 Date() 方法获得当日的日期。
- getTime()
- getTime() 返回从 1970 年 1 月 1 日至今的毫秒数。
- setFullYear()
- 如何使用 setFullYear() 设置具体的日期。
<html>
<body><script type="text/javascript">var d = new Date()
d.setFullYear(1992,10,3) //注意:表示月份的参数介于 0 到 11 之间。这里是11月。
document.write(d)</script></body>
</html>
toUTCString()如何使用 toUTCString() 将当日的日期(根据 UTC)转换为字符串。
<html>
<body>
<script type="text/javascript">
var d = new Date()
document.write (d.toUTCString())
</script>
</body>
</html>
getDay()如何使用 getDay() 和数组来显示星期,而不仅仅是数字。
<html>
<body>
<script type="text/javascript">
var d=new Date()
var weekday=new Array(7)
weekday[0]="星期日"
weekday[1]="星期一"
weekday[2]="星期二"
weekday[3]="星期三"
weekday[4]="星期四"
weekday[5]="星期五"
weekday[6]="星期六"document.write("今天是" + weekday[d.getDay()])
</script>
</body>
</html>
显示一个钟表如何在网页上显示一个钟表。
<html>
<head>
<script type="text/javascript">
function startTime()
{
var today=new Date()
var h=today.getHours()
var m=today.getMinutes()
var s=today.getSeconds()
// add a zero in front of numbers<10
m=checkTime(m)
s=checkTime(s)
document.getElementById('txt').innerHTML=h+":"+m+":"+s
t=setTimeout('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>
在下面的例子中,我们将日期对象设置为 5 天后的日期:
var myDate=new Date()
myDate.setDate(myDate.getDate()+5)
注意:如果增加天数会改变月份或者年份,那么日期对象会自动完成这种转换。
比较日期
日期对象也可用于比较两个日期。
下面的代码将当前日期与 2008 年 8 月 9 日做了比较:
var myDate=new Date();
myDate.setFullYear(2008,8,9);
var today = new Date();
if (myDate>today){
alert("Today is before 9th August 2008");
}else{
alert("Today is after 9th August 2008");
}
JavaScript Array(数组)对象
数组对象的作用是:使用单独的变量名来存储一系列的值。
- 合并两个数组 - concat()
-
如何使用 concat() 方法来合并两个数组。
<html>
<body>
<script type="text/javascript">
var arr = new Array(3)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"var arr2 = new Array(3)
arr2[0] = "James"
arr2[1] = "Adrew"
arr2[2] = "Martin"
document.write(arr.concat(arr2))
</script>
</body>
</html>
用数组的元素组成字符串 - join()
如何使用 join() 方法将数组的所有元素组成一个字符串。
<html>
<body>
<script type="text/javascript">
var arr = new Array(3);
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr.join());
document.write("<br />");document.write(arr.join("."));
</script>
</body>
</html>
文字数组 - sort()
如何使用 sort() 方法从字面上对数组进行排序。
<html>
<body>
<script type="text/javascript">var arr = new Array(6)
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
arr[3] = "James"
arr[4] = "Adrew"
arr[5] = "Martin"document.write(arr + "<br />")
document.write(arr.sort())</script>
</body>
</html>
数字数组 - sort()如何使用 sort() 方法从数值上对数组进行排序。
<html>
<body><script type="text/javascript">
function sortFunc(a, b){
return a-b;
}var arr = new Array(6)
arr[0] = "10"
arr[1] = "5"
arr[2] = "40"
arr[3] = "25"
arr[4] = "1000"
arr[5] = "1"document.write(arr + "<br />")
document.write(arr.sort(sortFunc) + "<br />")</script>
</body>
</html>
JavaScript Boolean(逻辑)对象
- 检查逻辑值
- 检查逻辑对象是 true 还是 false。
<html>
<body><script type="text/javascript">
var b1=new Boolean( 0)
var b2=new Boolean(1)
var b3=new Boolean("")
var b4=new Boolean(null)
var b5=new Boolean(NaN)
var b6=new Boolean("false")document.write("0 是逻辑的 "+ b1 +"<br />")
document.write("1 是逻辑的 "+ b2 +"<br />")
document.write("空字符串是逻辑的 "+ b3 + "<br />")
document.write("null 是逻辑的 "+ b4+ "<br />")
document.write("NaN 是逻辑的 "+ b5 +"<br />")
document.write("字符串 'false' 是逻辑的 "+ b6 +"<br />")
</script></body>
</html>
Boolean 对象
您可以将 Boolean 对象理解为一个产生逻辑值的对象包装器。
Boolean(逻辑)对象用于将非逻辑值转换为逻辑值(true 或者 false)。
创建 Boolean 对象
使用关键词 new 来定义 Boolean 对象。下面的代码定义了一个名为 myBoolean 的逻辑对象:
var myBoolean=new Boolean()
注释:如果逻辑对象无初始值或者其值为 0、-0、null、""、false、undefined 或者 NaN,那么对象的值为 false。否则,其值为 true(即使当自变量为字符串 "false" 时)!
下面的所有的代码行均会创建初始值为 false 的 Boolean 对象。
var myBoolean=new Boolean();
var myBoolean=new Boolean(0);
var myBoolean=new Boolean(null);
var myBoolean=new Boolean("");
var myBoolean=new Boolean(false);
var myBoolean=new Boolean(NaN);
下面的所有的代码行均会创初始值为 true 的 Boolean 对象:
var myBoolean=new Boolean(1); var myBoolean=new Boolean(true); var myBoolean=new Boolean("true"); var myBoolean=new Boolean("false"); var myBoolean=new Boolean("Bill Gates");
JavaScript Math(算数)对象
Math(算数)对象的作用是:执行常见的算数任务。
- round() 把一个数字舍入为最接近的整数。
<html>
<body>
<script type="text/javascript">
document.write(Math.round(0.60) + "<br />")
document.write(Math.round(0.50) + "<br />")
document.write(Math.round(0.49) + "<br />")
document.write(Math.round(-4.40) + "<br />")
document.write(Math.round(-4.60))
</script>
</body>
</html>
- random()
- 如何使用 random() 来返回 0 到 1 之间的随机数
- max()
- 返回两个给定的数中的较大的数。(在 ECMASCript v3 之前,该方法只有两个参数。)
- min()
- 返回两个给定的数中的较小的数。(在 ECMASCript v3 之前,该方法只有两个参数。)
Math 对象
Math(算数)对象的作用是:执行普通的算数任务。
Math 对象提供多种算数值类型和函数。无需在使用这个对象之前对它进行定义。
算数值
JavaScript 提供 8 种可被 Math 对象访问的算数值:
- 常数
- 圆周率
- 2 的平方根
- 1/2 的平方根
- 2 的自然对数
- 10 的自然对数
- 以 2 为底的 e 的对数
- 以 10 为底的 e 的对数
这是在 Javascript 中使用这些值的方法:(与上面的算数值一一对应)
- Math.E
- Math.PI
- Math.SQRT2
- Math.SQRT1_2
- Math.LN2
- Math.LN10
- Math.LOG2E
- Math.LOG10E
JavaScript RegExp 对象
RegExp 对象用于规定在文本中检索的内容。
什么是 RegExp?
RegExp 是正则表达式的缩写。
当您检索某个文本时,可以使用一种模式来描述要检索的内容。RegExp 就是这种模式。
简单的模式可以是一个单独的字符。
更复杂的模式包括了更多的字符,并可用于解析、格式检查、替换等等。
您可以规定字符串中的检索位置,以及要检索的字符类型,等等。
定义 RegExp
RegExp 对象用于存储检索模式。
通过 new 关键词来定义 RegExp 对象。以下代码定义了名为 patt1 的 RegExp 对象,其模式是 "e":
var patt1 = new RegExp("e");
当您使用该RegExp对象在一个字符串中检索时,将寻找的是字符"e"。
RegExp 对象的方法
RegExp 对象有 3 个方法:test()、exec() 以及 compile()。
test()
test() 方法检索字符串中的指定值。返回值是 true 或 false。
例子:
var patt1 = new RegExp("e");
document.write(patt1.test("The best things in lift are free"));
由于该字符串中存在字母 "e",以上代码的输出将是:true
exec()
exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配,则返回 null。
例子 1:
var patt1 = new RegExp("e");
document.write(patt1.exec("The best things in life are free"));
由于该字符串中存在字母 "e",以上代码的输出将是:e
例子 2:
您可以向 RegExp 对象添加第二个参数,以设定检索。例如,如果需要找到所有某个字符的所有存在,则可以使用 "g" 参数 ("global")。
在使用 "g" 参数时,exec() 的工作原理如下:
- 找到第一个 "e",并存储其位置
- 如果再次运行 exec(),则从存储的位置开始检索,并找到下一个 "e",并存储其位置
var patt1 = new RegExp("e", "g");
do{
result = patt1.exec("The best things in life are free");
document.write(result);
}while(result != null)
由于这个字符串中 6 个 "e" 字母,代码的输出将是:eeeeeenull
compile()
compile() 方法用于改变 RegExp。
compile() 既可以改变检索模式,也可以添加或删除第二个参数。
例子:
由于字符串中存在 "e",而没有 "d",以上代码的输出是:
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));
patt1.compile("d");
document.write(patt1.test("The best things in life are free"));
由于字符串中存在 "e",而没有 "d",以上代码的输出是:truefalse
JavaScript学习笔记一 js基础相关推荐
- JavaScript学习笔记02【基础——对象(Function、Array、Date、Math)】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
- JavaScript学习笔记01【基础——简介、基础语法、运算符、特殊语法、流程控制语句】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
- 前端学习笔记(js基础知识)
前端学习笔记(js基础知识) JavaScript 输出 JavaScript 数据类型 常见的HTML事件 DOM 冒泡与捕获 流程控制语句 for..in 计时器 let,var,const的区别 ...
- JavaScript学习笔记03【基础——对象(RegExp、Global)】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
- JavaScript学习笔记:AJAX基础
文章目录 一.准备工作 任务1.安装`phpstudy_pro`并启动`Apache`服务 任务2.下载HBuilder X,创建HBuilder项目 任务3.输入城市代码,返回城市天气预报信息 1. ...
- 【学习笔记】JS基础语法一小时通
内容整理自<从0到1Javascript快速上手>上半部分-基础语法篇
- JavaScript学习笔记:JS运算符重载
1.定义 在了解运算符重载之前,先了解一下重载.重载是指可使函数.运算符等处理不同类型数据或者接受不同个数参数的一种方法. 函数重载是指函数名相同,函数参数个数或者参数类型不同,以至于返回类型 ...
- JavaScript学习笔记04【高级——DOM和事件的简单学习、BOM对象】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
- JavaScript学习笔记07【6个经典案例——电灯开关、轮播图、自动跳转首页、动态表格、表格全选、表单验证】
Java后端 学习路线 笔记汇总表[黑马程序员] w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符. ...
最新文章
- 如何在android中创建自定义对话框?
- python 利用 whoosh 搭建轻量级搜索
- php mssql 错误,PHP致命错误:调用未定义的函数mssql_connect()
- 【微信小程序企业级开发教程】页面的生命周期和参数传递
- 模拟一个连接来自搜索引擎
- Maven基础及概念
- opencv 任意角度旋转图像
- mysql 分组查出来横向展示_实战MySql查询
- mysql多线程导出_MySQL多线程导入导出工具Mydumper
- 用代码复杂度分析风险
- kindlefire刷安卓系统_Kindle Fire平板刷入原生Android 4.0系统教程
- 笔记本安装黑苹果MacOS BigSur记录
- 电商api数据接口,淘宝item_cat_get,淘宝API接口分类!!!
- 【协议森林】基于DPDK的原生态协议栈DPDK-ANS
- HTML5期末大作业:动漫电网站设计——动漫电影《你的名字》(7页) HTML+CSS大作业: 动漫电网页制作作业_动漫电网页设计...
- 推荐一个视频网站-播布客
- IT视频课程集(包含各类Oracle、DB2、Linux、Mysql、Nosql、Hadoop、BI、云计算、编程开发、网络、大数据、虚拟化
- 计算机组成原理-基本组成
- JetBrain系列软件的学生授权认证及认证到期重新申请授权
- 马悦凌:从初级护士到“民间奇医”[6]
热门文章
- Overfitting机器学习中过度拟合问题
- 第一节 安装Matlab 2016a Win64
- 相关性算法BM25的python实现
- 除了音乐和养猪,网易更懂培养人才
- python循环总结
- js正则验证弱密码(大小写,特殊字符,数字不少于8位) element-plus 表单验证
- 京东首页302 Found报错 监控宝教你如何第一时间发现 1
- vue+xlsx插件实现table表格的简单导出——技能提升
- 用户与用户互发红包/支付宝C2C/B2C现金红包php源码示例/H5方式/兼容苹果/安卓
- 打开Excel,原有的数字内容都自动转换成日期格式的问题