JS = JavaScript
他是一种轻量级别的编程语言
可插入HTML的页面代码
插入HTML页面后,可由所有的现在浏览器执行
输出语句:
document.writie();
声明变量: var
赋值: = eg:a = 1;
Js的数据类型: 字符串 数字 布尔值 数组 对象 null undefined
字符串: var x = “Bill”;
数字: var x = 5;
布尔值: var x = true;
数组:
var x = new Array();x[0] = “Music”; x[1] = “BMW”;x[2] = “Hello”;
或者:
var cars=new Array("Audi","BMW","Volvo"); var cars=["Audi","BMW","Volvo"];
对象:var person={firstname:"Bill", lastname:"Gates", id:5566};
var person={
firstname : "Bill",
lastname : "Gates",
id : 5566
};
对象属性有两种寻址方式,例如:name=person.lastname;
name=person["lastname"];
eg: <script>
var person={
firstname : "Bill",
lastname : "Gates",
id : 5566
};
document.write(person.lastname + "<br />");
document.write(person["lastname"] + "<br />");
</script>
Undefined 这个值表示变量不含有值。
Null表示变量值设置为null
当声明新的变量时,可以使用关键字”new”来声明它的类型,例如:
var carname=new String;
var x= new Number;
var y= new Boolean;
var cars= new Array;
var person= new Object;
JS对象
JavaScript 中的所有事物都是对象:字符串、数字、数组、日期,等等。在 JavaScript 中,对象是拥有属性和方法的数据。
属性与方法
属性是与对象相关的值。
方法是能够在对象上执行的动作。
创建对象,例如:
person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";
这里person是对象,firstname、lastname、age、eyecolor是属性,等号右边是属性的值
如何访问对象?
语法:objectName.methodName()
函数:
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。关键词:function
语法:function functionname()
{
//这里是要执行的代码
}
注意,function必须是小写,如果οnclick=“方法名”,那么function 方法名()两个必须对应。
调用带参数的函数
在调用函数时,您可以向其传递值,这些值被称为参数。这些参数可以在函数中使用。还可以发送任意多的参数,由逗号 (,) 分隔:myFunction(argument1,argument2)
声明函数时,请把参数作为变量来声明:
function myFunction(var1,var2){ }
变量和参数必须以一致的顺序出现。第一个变量就是第一个被传递的参数的给定的值,以此类推。例如:
<button οnclick="myFunction('Bil')">点击这里</button>
<script>
function myFunction(name)
{
alert(name);
}
</script>
JavaScript 提供多个内建对象,比如 String、Date、Array 等等。
访问对象的属性,语法:
objectName.propertyName
访问对象的方法
方法是能够在对象上执行的动作,通过以下语法来调用方法:
objectName.methodName()
创建新对象有两种不同的方法:
1定义并创建对象的实例
person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";
2使用函数来定义对象,然后创建新的对象实例
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
}
Js数字
javaScript 只有一种数字类型。可以使用也可以不使用小数点来书写数字。例如:
var pi=3.14; // 使用小数点
var x=34; // 不使用小数点
精度
整数(不使用小数点或指数计数法)最多为 15 位。
小数的最大位数是 17,但是浮点运算并不总是 100% 准确
八进制和十六进制
前缀为 0,则 JavaScript 会把数值常量解释为八进制数
前缀为 0 和 "x",则解释为十六进制数。
注意:绝不要在数字前面写零,除非您需要进行八进制转换。
JS字符串
字符串对象用于处理已有的字符块。
比如使用字符串对象的长度属性来计算字符串的长度。
var txt="Hello world!"
document.write(txt.length)
用字符串对象的toUpperCase()方法将字符串转换为大写:
var txt="Hello world!"
document.write(txt.toUpperCase())
JS日期
Date 对象用于处理日期和时间。
可以通过 new 关键词来定义 Date 对象。以下代码定义了名为 myDate 的 Date 对象:
var myDate=new Date()
Date 对象自动使用当前的日期和时间作为其初始值。
操作日期
通过使用针对日期对象的方法,我们可以很容易地对日期进行操作。
在下面的例子中,我们为日期对象设置了一个特定的日期 (2008 年 8 月 9 日):
var myDate=new Date()
myDate.setFullYear(2008,7,9)
比较日期
日期对象也可用于比较两个日期。
下面的代码将当前日期与 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");
}
JS数组
定义数组
数组对象用来在单独的变量名中存储一系列的值。
我们使用关键词 new 来创建数组对象。下面的代码定义了一个名为 myArray 的数组对象:
var myArray=new Array()
有两种向数组赋值的方法(可以添加任意多的值,就像你可以定义你需要的任意多的变量一样)。
1:
var mycars=new Array()
mycars[0]="Saab"
mycars[1]="Volvo"
mycars[2]="BMW"
也可以使用一个整数自变量来控制数组的容量:
var mycars=new Array(3)
mycars[0]="Saab"
mycars[1]="Volvo"
mycars[2]="BMW"
2:
var mycars=new Array("Saab","Volvo","BMW")
JS逻辑
Boolean(逻辑)对象用于将非逻辑值转换为逻辑值(true 或者 false)。
创建 Boolean 对象
使用关键词 new 来定义 Boolean 对象。下面的代码定义了一个名为 myBoolean 的逻辑对象:
var myBoolean=new Boolean()
如果逻辑对象无初始值或者其值为 0、-0、null、""、false、undefined 或者 NaN,那么对象的值为 false。否则,其值为 true(即使当自变量为字符串 "false" 时)!
JS算数
Math(算数)对象的作用是:执行常见的算数任务。
Math 对象提供多种算数值类型和函数。无需在使用这个对象之前对它进行定义。
JavaScript RegExp 对象
RegExp 对象用于规定在文本中检索的内容。
定义 RegExp。
通过 new 关键词来定义 RegExp 对象。以下代码定义了名为 patt1 的 RegExp 对象,其模式是 "e":
var patt1=new RegExp("e");
RegExp 对象的方法
RegExp 对象有 3 个方法:
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
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
JavaScript Window - 浏览器对象模型
浏览器对象模型 (BOM)
浏览器对象模型(Browser Object Model)尚无正式标准。
由于现代浏览器已经(几乎)实现了 JavaScript 交互性方面的相同方法和属性,因此常被认为是 BOM 的方法和属性。
Window 对象
所有浏览器都支持 window 对象。它表示浏览器窗口。
所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
全局变量是 window 对象的属性。
全局函数是 window 对象的方法。
甚至 HTML DOM 的 document 也是 window 对象的属性之一:
window.document.getElementById("header");
Window 尺寸
有三种方法能够确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)。
<body>
<p id="demo"></p>
<script>
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
x=document.getElementById("demo");
x.innerHTML="浏览器的内部窗口宽度:" + w + ",高度:" + h + "。"
</script>
</body>
其他 Window 方法
一些其他方法:
window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveTo() - 移动当前窗口
window.resizeTo() - 调整当前窗口的尺寸
Window Screen
window.screen 对象在编写时可以不使用 window 这个前缀。一些属性:
screen.availWidth - 可用的屏幕宽度
screen.availHeight - 可用的屏幕高度
Window Screen 可用宽度
screen.availWidth 属性返回访问者屏幕的宽度,以像素计,减去界面特性,比如窗口任务栏。
<html>
<body>
<script>
document.write("可用宽度:" + screen.availWidth);
</script>
</body>
</html>
Window Screen 可用高度
screen.availHeight 属性返回访问者屏幕的高度,以像素计,减去界面特性,比如窗口任务栏。
<html>
<body>
<script>
document.write("可用高度:" + screen.availHeight);
</script>
</body>
</html>
Window History
window.history 对象在编写时可不使用 window 这个前缀。
为了保护用户隐私,对 JavaScript 访问该对象的方法做出了限制。
一些方法:
history.back() - 与在浏览器点击后退按钮相同
<html>
<head>
<script>
function goBack()
{
window.history.back()
}
</script>
</head>
<body>
<input type="button" value="Back" οnclick="goBack()">
</body>
</html>
history.forward() - 与在浏览器中点击按钮向前相同
<html>
<head>
<script>
function goForward()
{
window.history.forward()
}
</script>
</head>
<body>
<input type="button" value="Forward" οnclick="goForward()">
</body>
</html>
JavaScript 消息框:可以在 JavaScript 中创建三种消息框:警告框、确认框、提示框。
警告框:alert("xxx")
警告框经常用于确保用户可以得到某些信息。
当警告框出现后,用户需要点击确定按钮才能继续进行操作。
确认框:confirm("xxx")
确认框用于使用户可以验证或者接受某些信息。
当确认框出现后,用户需要点击确定或者取消按钮才能继续进行操作。
如果用户点击确认,那么返回值为 true。如果用户点击取消,那么返回值为 false。
提示框:prompt("文本","默认值")
提示框经常用于提示用户在进入页面前输入某个值。
当提示框出现后,用户需要输入某个值,然后点击确认或取消按钮才能继续操纵。
如果用户点击确认,那么返回值为输入的值。如果用户点击取消,那么返回值为 null。
JavaScript 计时
通过使用 JavaScript,我们有能力作到在一个设定的时间间隔之后来执行代码,而不是在函数被调用后立即执行。我们称之为计时事件。
在 JavaScritp 中使用计时事件是很容易的,两个关键方法是:
setTimeout() eg:var t=setTimeout("javascript语句",毫秒)
setTimeout() 方法会返回某个值。在上面的语句中,值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout(),你可以使用这个变量名来指定它。
setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')",或者对函数的调用,诸如 alertMsg()"。
第二个参数指示从当前起多少毫秒后执行第一个参数。1000毫秒=1秒
eg:<html>
<head>
<script type="text/javascript">
function timedMsg()
{
var t=setTimeout("alert('5 seconds!')",5000)
}
</script>
</head>
<body>
<form>
<input type="button" value="Display timed alertbox!" onClick="timedMsg()">
</form>
</body>
</html>
未来的某时执行代码
clearTimeout()
取消setTimeout() eg:clearTimeout(setTimeout_variable)
all 集合返回对文档中所有 HTML 元素的引用。
document.all[i]document.all[name]document.all.tags[tagname]