x=document.getElementById("demo") //查找元素
x.innerHTML="Hello JavaScript"; //改变内容
与
标签之间。
和
部分中。
部分中,或者放在页面底部。这样就可以把它们安置到同一处位置,不会干扰页面的内容。
标签的 “src” 属性中设置该 .js 文件:
<html>
<body>
<script src="myScript.js">script>
body>
html>
标签。如需从 JavaScript 访问某个 HTML 元素,您可以使用 document.getElementById(id) 方法。
请使用 “id” 属性来标识 HTML 元素。
JavaScript 由 web 浏览器来执行。在这种情况下,浏览器将访问 id=”demo” 的 HTML 元素,并把它的内容(innerHTML)替换为 “My First JavaScript”。
<script>
document.getElementById("demo").innerHTML="My First JavaScript";
script>
元素写到 HTML 文档输出中<script>
document.write("My First JavaScript
");
script>
document.write("Hello \
World!");
"demo">
var carname="Volvo";
document.getElementById("demo").innerHTML=carname;
var name="Gates", age=56, job="CEO";
var carname="Volvo";
var carname;
var cars=new Array("Audi","BMW","Volvo");
var cars=["Audi","BMW","Volvo"];
var person={firstname:"Bill", lastname:"Gates", id:5566};
对象属性有两种寻址方式:
name=person.lastname;
name=person["lastname"];
objectName.propertyName
访问对象的方法:
objectName.methodName()
function functionname()
{
这里是要执行的代码
}
JavaScript 对大小写敏感。关键词 function 必须是小写的,并且必须以与函数名称相同的大小写来调用函数。`
if (条件)
{
当条件为 true 时执行的代码
}
else
{
当条件不为 true 时执行的代码
}
switch(n)
{
case 1:
执行代码块 1
break;
case 2:
执行代码块 2
break;
default:
n 与 case 1 和 case 2 不同时执行的代码
}
工作原理:首先设置表达式 n(通常是一个变量)。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配,则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。
for (语句 1; 语句 2; 语句 3)
{
被执行的代码块
}
如果您省略了语句 2,那么必须在循环内提供 break。否则循环就无法停下来。这样有可能令浏览器崩溃。
var person={fname:"John",lname:"Doe",age:25};
for (x in person)
{
txt=txt + person[x];
}
while (条件)
{
需要执行的代码
}
do
{
x=x + "The number is " + i + "
";
i++;
}
while (i<5);
label:
语句
try
{
//在这里运行代码
}
catch(err)
{
//在这里处理错误
}
function validate_required(field,alerttxt)
{
with (field)
{
if (value==null||value=="")
{alert(alerttxt);return false}
else {return true}
}
}
function validate_email(field,alerttxt)
{
with (field)
{
apos=value.indexOf("@")
dotpos=value.lastIndexOf(".")
if (apos<1||dotpos-apos<2)
{alert(alerttxt);return false}
else {return true}
}
}
var x=document.getElementById("intro");
<p>Hello World!p>
<div id="main">
<p>The DOM is very useful.p>
<p>本例演示 <b>getElementsByTagNameb> 方法。p>
div>
<script>
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write('id 为 "main" 的 div 中的第二段文本是:' + y[1].innerHTML);
script>
本例演示 getElementsByTagName 方法。
id 为 “main” 的 div 中的第二段文本是:本例演示 getElementsByTagName 方法。
document.write(Date());
提示:绝不要使用在文档加载之后使用 document.write()。这会覆盖该文档。
document.getElementById(id).innerHTML=new HTML
document.getElementById(id).attribute=new value
document.getElementById(id).style.property=new style
改变颜色:
<script>
document.getElementById("p2").style.color="blue";
script>
onclick=JavaScript
元素上点击时,会改变其内容:<h1 onclick="this.innerHTML='谢谢!'">请点击该文本h1>
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。
onchange 事件
下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时,会调用 upperCase() 函数。
<html>
<head>
<script>
function myFunction()
{
var x=document.getElementById("fname");
x.value=x.value.toUpperCase();
}
script>
head>
<body>
请输入英文字符:<input type="text" id="fname" onchange="myFunction()">
<p>当您离开输入字段时,会触发将输入文本转换为大写的函数。p>
body>
html>
这段代码创建新的 元素:
var para=document.createElement("p");
如需向 元素添加文本,您必须首先创建文本节点。这段代码创建了一个文本节点:
var node=document.createTextNode("这是新段落。");
然后您必须向 元素追加这个文本节点:
para.appendChild(node);
最后您必须向一个已有的元素追加这个新元素。
这段代码找到一个已有的元素:
var element=document.getElementById("div1");
这段代码向这个已有的元素追加新元素:
element.appendChild(para);
元素)的 元素:
<div id="div1">
<p id="p1">这是一个段落。p>
<p id="p2">这是另一个段落。p>
div>
找到 id=”div1” 的元素:
var parent=document.getElementById("div1");
从父元素中删除子元素:
parent.removeChild(child);
提示:如果能够在不引用父元素的情况下删除某个元素,就太好了。
不过很遗憾。DOM 需要清楚您需要删除的元素,以及它的父元素。
这是常用的解决方案:找到您希望删除的子元素,然后使用其 parentNode 属性来找到父元素:
var child=document.getElementById("p1");
child.parentNode.removeChild(child);
JavaScript 对象
- JavaScript 对象
JavaScript 提供多个内建对象,比如 String、Date、Array 等等。
对象只是带有属性和方法的特殊数据类型。
- 访问对象属性的语法是:
objectName.propertyName
- 访问对象的方法
objectName.methodName()
- 这个例子创建了对象的一个新实例,并向其添加了四个属性:
person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";
替代语法:
person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};
- 把属性添加到 JavaScript 对象
您可以通过为对象赋值,向已有对象添加新属性:
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";
- 把方法添加到 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;
}
}
hangeName() 函数 name 的值赋给 person 的 lastname 属性。
- JavaScript for…in 循环
for (对象中的变量)
{
要执行的代码
}
循环遍历对象的属性:
var person={fname:"Bill",lname:"Gates",age:56};
for (x in person)
{
txt=txt + person[x];
}
JavaScript Number 对象
- 极大或极小的数字可通过科学(指数)计数法来写:
var y=123e5; // 12300000
var z=123e-5; // 0.00123
JavaScript 中的所有数字都存储为根为 10 的 64 位(8 比特),浮点数。
精度
整数(不使用小数点或指数计数法)最多为 15 位。
小数的最大位数是 17,但是浮点运算并不总是 100% 准确。
- 八进制和十六进制
如果前缀为 0,则 JavaScript 会把数值常量解释为八进制数,如果前缀为 0 和 “x”,则解释为十六进制数。
JS 字符串
- indexOf() 方法
使用 indexOf() 来定位字符串中某一个指定的字符首次出现的位置。
<html>
<body>
<script type="text/javascript">
var str="Hello world!"
document.write(str.indexOf("Hello") + "
")
document.write(str.indexOf("World") + "
")
document.write(str.indexOf("world"))
script>
body>
html>
- match() 方法
使用 match() 来查找字符串中特定的字符,并且如果找到的话,则返回这个字符。
document.write(str.match("world!"))
- 使用 replace() 方法在字符串中用某些字符替换另一些字符。
document.write(str.replace(/Microsoft/,"W3School"))
JS 日期
- 使用 Date() 方法获得当日的日期。
- getTime() 返回从 1970 年 1 月 1 日至今的毫秒数。
- 如何使用 setFullYear() 设置具体的日期。
var d = new Date()
d.setFullYear(1992,10,3)
document.write(d)
- 使用 toUTCString() 将当日的日期(根据 UTC)转换为字符串。
- 使用 getDay() 和数组来显示星期,而不仅仅是数字。
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()])
- 在网页上显示一个钟表。
<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 onload="startTime()">
<div id="txt">div>
body>
html>
- 可以通过 new 关键词来定义 Date 对象。以下代码定义了名为 myDate 的 Date 对象:
var myDate=new Date()
- 在下面的例子中,我们为日期对象设置了一个特定的日期 (2008 年 8 月 9 日):
var myDate=new Date()
myDate.setFullYear(2008,7,9)
注意:表示月份的参数介于 0 到 11 之间。也就是说,如果希望把月设置为 8 月,则参数应该是 7。
- 在下面的例子中,我们将日期对象设置为 5 天后的日期:
var myDate=new Date()
myDate.setDate(myDate.getDate()+5)
注意:如果增加天数会改变月份或者年份,那么日期对象会自动完成这种转换。
日期对象也可用于比较两个日期。
JS 数组
- 创建数组,为其赋值
var mycars = new Array()
mycars[0] = "Saab"
mycars[1] = "Volvo"
mycars[2] = "BMW"
- 使用 for…in 声明来循环输出数组中的元素。
var x
var mycars = new Array()
mycars[0] = "Saab"
mycars[1] = "Volvo"
mycars[2] = "BMW"
for (x in mycars)
{
document.write(mycars[x] + "
")
}
- 使用 concat() 方法来合并两个数组。
document.write(arr.concat(arr2))
- 使用 join() 方法将数组的所有元素组成一个字符串。
var arr = new Array(3);
arr[0] = "George"
arr[1] = "John"
arr[2] = "Thomas"
document.write(arr.join());
document.write("
");
document.write(arr.join("."));
- 使用 sort() 方法从字面上对数组进行排序。
<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 + "
")
document.write(arr.sort())
script>
- 使用 sort() 方法从数值上对数组进行排序。
<script type="text/javascript">
function sortNumber(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 + "
")
document.write(arr.sort(sortNumber))
script>
JS 逻辑
- 创建 Boolean 对象的语法:
new Boolean(value); //构造函数
Boolean(value); //转换函数
返回值
当作为一个构造函数(带有运算符 new)调用时,Boolean() 将把它的参数转换成一个布尔值,并且返回一个包含该值的 Boolean 对象。
如果作为一个函数(不带有运算符 new)调用时,Boolean() 只将把它的参数转换成一个原始的布尔值,并且返回这个值。
注释:如果省略 value 参数,或者设置为 0、-0、null、""
、false、undefined 或 NaN,则该对象设置为 false。否则设置为 true(即使 value 参数是字符串 “false”)。
- 使用关键词 new 来定义 Boolean 对象。下面的代码定义了一个名为 myBoolean 的逻辑对象:
var myBoolean=new Boolean()
JS 算数
- 使用 round()四舍五入。
document.write(Math.round(-4.40) + "
")
- 使用 random() 来返回 0 到 1 之间的随机数。
document.write(Math.random())
- 使用 max() 来返回两个给定的数中的较大的数。(在 ECMASCript v3 之前,该方法只有两个参数。)
document.write(Math.max(5,7) + "
")
- 使用 min() 来返回两个给定的数中的较小的数。(在 ECMASCript v3 之前,该方法只有两个参数。)
document.write(Math.min(-3,5) + "
")
- 使用 Math 的属性和方法的语法:
var pi_value=Math.PI;
var sqrt_value=Math.sqrt(15);
注释:Math 对象并不像 Date 和 String 那样是对象的类,因此没有构造函数 Math(),像 Math.sin() 这样的函数只是函数,不是某个对象的方法。您无需创建它,通过把 Math 作为对象使用就可以调用其所有属性和方法。
- JavaScript 提供 8 种可被 Math 对象访问的算数值:
常数e—Math.E
圆周率—Math.PI
2 的平方根—Math.SQRT2
1/2 的平方根—Math.SQRT1_2
2 的自然对数—Math.LN2
10 的自然对数—Math.LN10
以 2 为底的 e 的对数—Math.LOG2E
以 10 为底的 e 的对数—Math.LOG10E
- 下面的例子使用了 Math 对象的 floor() 方法和 random() 来返回一个介于 0 和 10 之间的随机数:
document.write(Math.floor(Math.random()*11))
JS 正则表达式
- RegExp 对象用于存储检索模式。
- 通过 new 关键词来定义 RegExp 对象。以下代码定义了名为 patt1 的 RegExp 对象,其模式是 “e”:
var patt1=new RegExp("e");
当您使用该 RegExp 对象在一个字符串中检索时,将寻找的是字符 “e”。
test()
test() 方法检索字符串中的指定值。返回值是 true 或 false。
var patt1=new RegExp("e");
document.write(patt1.test("The best things in life are free"));
由于该字符串中存在字母 “e”,以上代码的输出将是:true
- exec()
exec() 方法检索字符串中的指定值。返回值是被找到的值。如果没有发现匹配,则返回 null。
var patt1=new RegExp("e");
document.write(patt1.exec("The best things in life are free"));
由于该字符串中存在字母 “e”,以上代码的输出将是:e
您可以向 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() 既可以改变检索模式,也可以添加或删除第二个参数。
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
JS Window