JavaScript 对象Object基础知识

JavaScript 中的所有事物都是对象:字符串、数字、数组、日期,等等。

在 JavaScript 中,对象是拥有属性和方法的数据。

属性和方法

属性是与对象相关的值。

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

举例:汽车就是现实生活中的对象。

汽车的属性:

car.name=Fiat

car.model=500

car.weight=850kg

car.color=white 

汽车的方法:

car.start()

car.drive()

car.brake()

汽车的属性包括名称、型号、重量、颜色等。

所有汽车都有这些属性,但是每款车的属性都不尽相同。

汽车的方法可以是启动、驾驶、刹车等。

所有汽车都拥有这些方法,但是它们被执行的时间都不尽相同。

JavaScript 中的对象

在 JavaScript 中,对象是数据(变量),拥有属性和方法。

当您像这样声明一个 JavaScript 变量时:

var txt = "Hello";

您实际上已经创建了一个 JavaScript 字符串对象。字符串对象拥有内建的属性 length。对于上面的字符串来说,length 的值是 5。字符串对象同时拥有若干个内建的方法。

属性:

txt.length=5

方法:

txt.indexOf()

txt.replace()

txt.search()

提示:在面向对象的语言中,属性和方法常被称为对象的成员。

在本教程稍后的章节中,您将学到有关字符串对象的更多属性和方法。

创建 JavaScript 对象

JavaScript 中的几乎所有事务都是对象:字符串、数字、数组、日期、函数,等等。

你也可以创建自己的对象。

本例创建名为 “person” 的对象,并为其添加了四个属性:

<!DOCTYPE html>
<html>
<body>

<script>
person=new Object();
person.firstname=”Bill”;
person.lastname=”Gates”;
person.age=56;
person.eyecolor=”blue”;
document.write(person.firstname + ” is ” + person.age + ” years old.”);
</script>

</body>
</html>

创建新 JavaScript 对象有很多不同的方法,并且您还可以向已存在的对象添加属性和方法。

您将在本教程稍后的章节学到更多相关的内容。

访问对象的属性

访问对象属性的语法是:

objectName.propertyName

本例使用 String 对象的 length 属性来查找字符串的长度:

var message="Hello World!";
var x=message.length;

在以上代码执行后,x 的值是:

12

访问对象的方法

您可以通过下面的语法调用方法:

objectName.methodName()

这个例子使用 String 对象的 toUpperCase() 方法来把文本转换为大写:

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

在以上代码执行后,x 的值是:

HELLO WORLD!

HTML5结合JS,让DIV层逐渐消失(隐藏)

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
<title>无标题文档</title>
</head>

<body>
<script>
var index=1;
function myFunction(){
if(index <= 6){
document.getElementById(“div”+index).style.display=”none”
index++;
}
}
</script>
<div id=”div1″>这是一</div>
<div id=”div2″>这是二</div>
<div id=”div3″>这是三</div>
<div id=”div4″>这是四</div>
<div id=”div5″>这是五</div>

<button type=”button” onclick=”myFunction()”>点击这里</button>

</body>
</html>

使用了遍历。

 

JavaScript 数据类型及要点

字符串、数字、布尔、数组、对象、Null、Undefined

JavaScript 拥有动态类型

JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型:

实例

var x                // x 为 undefined
var x = 6;           // x 为数字
var x = "Bill";      // x 为字符串

JavaScript 字符串

字符串是存储字符(比如 “Bill Gates”)的变量。

字符串可以是引号中的任意文本。您可以使用单引号或双引号:

实例

var carname="Bill Gates";
var carname='Bill Gates';

您可以在字符串中使用引号,只要不匹配包围字符串的引号即可:

实例

var answer="Nice to meet you!";
var answer="He is called 'Bill'";
var answer='He is called "Bill"';

这里面,引号不能重复,比如,

var answer='He is called "Bill"';
var answer="He is called 'Bill'"

但就是不能

var answer=”He is called ‘”Bill”‘”

相当于,单引号和双引号,只能出现一次。

JavaScript 数字

JavaScript 只有一种数字类型。数字可以带小数点,也可以不带:

实例

var x1=34.00;      //使用小数点来写
var x2=34;         //不使用小数点来写

极大或极小的数字可以通过科学(指数)计数法来书写:

实例

var y=123e5;      // 12300000
var z=123e-5;     // 0.00123

JavaScript 布尔值

布尔(逻辑)只能有两个值:true 或 false。

var x=true
var y=false

只有正和反两面。举个例子。

<!DOCTYPE html>
<html>
<head>
<script>
var x=false;
function myFunction()
{if(x){
document.getElementById(“demo”).innerHTML=”您选择的是A”;
}else{
document.getElementById(“demo”).innerHTML=”您选择的是B”;
}
x=!x;
}
</script>
</head>

<body>

<h1>My Web Page</h1>

<p id=”demo”>A Paragraph.</p>

<button type=”button” onclick=”myFunction()”>点击这里</button>

</body>
</html>

上面实例可以看出,点一下,就是一个结果,再点一下,就成另一个结果。对于制作播放器的开关等案例适用。

JavaScript 数组

下面的代码创建名为 cars 的数组:

var cars=new Array();
cars[0]="Audi";
cars[1]="BMW";
cars[2]="Volvo";

或者

var cars=new Array("Audi","BMW","Volvo");

或者

var cars=["Audi","BMW","Volvo"];

数组下标是基于零的,所以第一个项目是 [0],第二个是 [1],以此类推。

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 来清空变量。

声明变量类型

当您声明新变量时,可以使用关键词 “new” 来声明其类型:

var carname=new String;
var x=new Number;
var y=new Boolean;
var cars=new Array;
var person= new Object;

 

 

 

 

 

 

 

JavaScript 变量教程

JavaScript 变量

与代数一样,JavaScript 变量可用于存放值(比如 x=2)和表达式(比如 z=x+y)。

变量可以使用短名称(比如 x 和 y),也可以使用描述性更好的名称(比如 age, sum, totalvolume)。

  • 变量必须以字母开头
  • 变量也能以 $ 和 _ 符号开头(不过我们不推荐这么做)
  • 变量名称对大小写敏感(y 和 Y 是不同的变量)

提示:JavaScript 语句和 JavaScript 变量都对大小写敏感。

JavaScript 数据类型

JavaScript 变量还能保存其他数据类型,比如文本值 (name=”Bill Gates”)。

在 JavaScript 中,类似 “Bill Gates” 这样一条文本被称为字符串。

JavaScript 变量有很多种类型,但是现在,我们只关注数字和字符串。

当您向变量分配文本值时,应该用双引号或单引号包围这个值。

当您向变量赋的值是数值时,不要使用引号。如果您用引号包围数值,该值会被作为文本来处理。

例子

<!DOCTYPE html>
<html>
<body>

<script>
var pi=3.14;
var name=”Bill Gates”;
var answer=’Yes I am!’;

document.write(pi + “<br>”);
document.write(name + “<br>”);
document.write(answer + “<br>”);
</script>

</body>
</html>

声明(创建) JavaScript 变量

在 JavaScript 中创建变量通常称为“声明”变量。

我们使用 var 关键词来声明变量:

var carname;

变量声明之后,该变量是空的(它没有值)。

如需向变量赋值,请使用等号:

carname="Volvo";

不过,您也可以在声明变量时对其赋值:

var carname="Volvo";

例子

在下面的例子中,我们创建了名为 carname 的变量,并向其赋值 “Volvo”,然后把它放入 id=”demo” 的 HTML 段落中:

<!DOCTYPE html>
<html>
<body>

<p>点击这里来创建变量,并显示结果。</p>

<button onclick=”myFunction()”>点击这里</button>

<p id=”demo”></p>

<script>
function myFunction()
{
var carname=”Volvo”;
document.getElementById(“demo”).innerHTML=carname;
}
</script>

</body>
</html>

提示:一个好的编程习惯是,在代码开始处,统一对需要的变量进行声明。

一条语句,多个变量

您可以在一条语句中声明很多变量。该语句以 var 开头,并使用逗号分隔变量即可:

var name="Gates", age=56, job="CEO";

声明也可横跨多行:

var name="Gates",
age=56,
job="CEO";

Value = undefined

在计算机程序中,经常会声明无值的变量。未使用值来声明的变量,其值实际上是 undefined。

在执行过以下语句后,变量 carname 的值将是 undefined:

var carname;

重新声明 JavaScript 变量

如果重新声明 JavaScript 变量,该变量的值不会丢失:

在以下两条语句执行后,变量 carname 的值依然是 “Volvo”:

var carname="Volvo";
var carname;

 

 

 

 

 

JavaScript 语句基础

JavaScript 语句

JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。

下面的 JavaScript 语句向 id=”demo” 的 HTML 元素输出文本 “Hello World”:

document.getElementById("demo").innerHTML="Hello World";

分号 ;

分号用于分隔 JavaScript 语句。

通常我们在每条可执行的语句结尾添加分号。

使用分号的另一用处是在一行中编写多条语句。

提示:您也可能看到不带有分号的案例。

在 JavaScript 中,用分号来结束语句是可选的。

JavaScript 代码

JavaScript 代码(或者只有 JavaScript)是 JavaScript 语句的序列。

浏览器会按照编写顺序来执行每条语句。

本例将操作两个 HTML 元素:

实例

document.getElementById("demo").innerHTML="Hello World";
document.getElementById("myDIV").innerHTML="How are you?";

JavaScript 代码块

JavaScript 语句通过代码块的形式进行组合。

块由左花括号开始,由右花括号结束。

块的作用是使语句序列一起执行。

JavaScript 函数是将语句组合在块中的典型例子。

下面的例子将运行可操作两个 HTML 元素的函数:

<!DOCTYPE html>
<html>
<body>

<h1>My Web Page</h1>

<p id=”myPar”>I am a paragraph.</p>
<div id=”myDiv”>I am a div.</div>

<p>
<button type=”button” onclick=”myFunction()”>点击这里</button>
</p>

<script>
function myFunction()
{
document.getElementById(“myPar”).innerHTML=”Hello World”;
document.getElementById(“myDiv”).innerHTML=”How are you?”;
}
</script>

<p>当您点击上面的按钮时,两个元素会改变。</p>

</body>
</html>

JavaScript 对大小写敏感。

JavaScript 对大小写是敏感的。

当编写 JavaScript 语句时,请留意是否关闭大小写切换键。

函数 getElementById 与 getElementbyID 是不同的。

同样,变量 myVariable 与 MyVariable 也是不同的。

空格

JavaScript 会忽略多余的空格。您可以向脚本添加空格,来提高其可读性。下面的两行代码是等效的:

var name="Hello";
var name = "Hello";

对代码行进行折行

您可以在文本字符串中使用反斜杠对代码行进行换行。下面的例子会正确地显示:

document.write("Hello \
World!");

不过,您不能像这样折行:

document.write \
("Hello World!");

 

 

HTML5 中JavaScript 输出document.write语句注意事项

JavaScript 通常用于操作 HTML 元素。

操作 HTML 元素

如需从 JavaScript 访问某个 HTML 元素,您可以使用 document.getElementById(id) 方法。

请使用 “id” 属性来标识 HTML 元素:

例子

通过指定的 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>

JavaScript 由 web 浏览器来执行。在这种情况下,浏览器将访问 id=”demo” 的 HTML 元素,并把它的内容(innerHTML)替换为 “My First JavaScript”。

写到文档输出

下面的例子直接把 <p> 元素写到 HTML 文档输出中:

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>

<script>
document.write(“<p>My First JavaScript</p>”);
</script>

</body>
</html>

警告

请使用 document.write() 仅仅向文档输出写内容。

如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖:

<!DOCTYPE html>
<html>
<body>

<h1>My First Web Page</h1>

<p>My First Paragraph.</p>

<button onclick=”myFunction()”>点击这里</button>

<script>
function myFunction()
{
document.write(“糟糕!文档消失了。”);
}
</script>

</body>
</html>

 

JavaScript 使用基础常识

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。

脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。

<script> 标签

如需在 HTML 页面中插入 JavaScript,请使用 <script> 标签。

<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。

<script> 和 </script> 之间的代码行包含了 JavaScript:

<script>
alert("My First JavaScript");
</script>

您无需理解上面的代码。只需明白,浏览器会解释并执行位于 <script> 和 </script> 之间的 JavaScript。

那些老旧的实例可能会在 <script> 标签中使用 type=”text/javascript”。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。

<body> 中的 JavaScript

在本例中,JavaScript 会在页面加载时向 HTML 的 <body> 写文本:

实例

<!DOCTYPE html>
<html>
<body>

<p>
JavaScript 能够直接写入 HTML 输出流中:
</p>

<script>
document.write(“<h1>This is a heading</h1>”);
document.write(“<p>This is a paragraph.</p>”);
</script>

<p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它(比如在函数中),会覆盖整个文档。
</p>

</body>
</html>

JavaScript 函数和事件

上面例子中的 JavaScript 语句,会在页面加载时执行。

通常,我们需要在某个事件发生时执行代码,比如当用户点击按钮时。

如果我们把 JavaScript 代码放入函数中,就可以在事件发生时调用该函数。

您将在稍后的章节学到更多有关 JavaScript 函数和事件的知识。

<head> 或 <body> 中的 JavaScript

您可以在 HTML 文档中放入不限数量的脚本。

脚本可位于 HTML 的 <body> 或 <head> 部分中,或者同时存在于两个部分中。

通常的做法是把函数放入 <head> 部分中,或者放在页面底部。这样就可以把它们安置到同一处位置,不会干扰页面的内容。

<head> 中的 JavaScript 函数

在本例中,我们把一个 JavaScript 函数放置到 HTML 页面的 <head> 部分。

该函数会在点击按钮时被调用:

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
document.getElementById(“demo”).innerHTML=”My First JavaScript Function”;
}
</script>
</head>

<body>

<h1>My Web Page</h1>

<p id=”demo”>A Paragraph.</p>

<button type=”button” onclick=”myFunction()”>点击这里</button>

</body>
</html>

<body> 中的 JavaScript 函数

把一个 JavaScript 函数放置到 HTML 页面的 <body> 部分。也可以执行该脚本。

提示:我们把 JavaScript 放到了页面代码的底部,这样就可以确保在 <p> 元素创建之后再执行脚本。所以通常情况下,建议把JS放置于BODY后。

在 <head> 或 <body> 中引用脚本文件都是可以的。实际运行效果与您在 <script> 标签中编写脚本完全一致。

提示:外部脚本不能包含 <script> 标签。

 

 

javascript中的innerHTML

innerHTML在JS是双向功能:获取对象的内容或向对象插入内容;
如:<div id="aa">这是内容</div> ,我们可以通过  document.getElementById('aa').innerHTML 来获取id为aa的对象的内嵌内容;
也可以对某对象插入内容,如  document.getElementById('abc').innerHTML='这是被插入的内容';   这样就能向id为abc的对象插入内容。

比如下面实例。

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
document.getElementById(“demo”).innerHTML=”My First JavaScript Function”;
alert(document.getElementById(“shuchu”).innerHTML)
}
</script>
</head>
<body>

document.getElementById(‘aa’).innerHTML

<h1>My Web Page</h1>

<p id=”demo”>A Paragraph.</p>
<p id=”shuchu”>taoshaw</p>

<button type=”button” onclick=”myFunction()”>点击这里</button>

</body>
</html>

 

 

 

HTML5初始化加载JS代码。

 

<html>
<head>
<script type=”text/javascript”>
window.onload=function(){
message()
}
function message()
{
alert(“该提示框是通过 onload 事件调用的。”)
}
</script>
</head>

<body >

</body>
</html>

也可以,在body时加载。<body onload=”message()”>

当JS需要在页面加载时运行时,则需要将代码置于 body 后面。如

<html>
<head>
</head>

<body>

<script type=”text/javascript”>
document.write(“该消息在页面加载时输出。”)
</script>

</body>
</html>

加载外部JS,只需要链接相对地址。

<script src=”/js/example_externaljs.js”>

 

JS获取HTML中鼠标的X 、Y座标。

<!doctype html>
<html>
<head>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0″ />
<meta name=”format-detection” content=”telephone=yes” />
<meta name=”apple-mobile-web-app-capable” content=”yes” />
<meta name=”apple-mobile-web-app-status-bar-style” content=”black”>
<meta name=”author” content=”duanliang, duanliang920.com” />
<title>手机网站</title>
<style>
body{font-size:82.5%;font-family:”Microsoft YaHei”,Arial; overflow-x:hidden; overflow-y:auto;}
#div1{background:url(../qieshuiguo/images/backgroundnew.jpg);
width:750px;height:400px;
color:#FFF;
font-size:24px;
position: absolute;
};
.showText{
margin-left:30px;
}
</style>
</head>

<body>
<div id=”div1″>
大家好!我是沙子,欢迎光临淘沙网。
<div id= “showText” class=”showText” ></div>
</div>
<script>

var input = document.createElement(“input” );
input.type = “text” ;
input.id = “inputText” ;
input.value = “这个文本框是JS创建的” ;
input.style.width = “500px”;
document.getElementById(“showText” ).appendChild(input);

var canvas=document.getElementById(‘div1’);
canvas.addEventListener(“mousedown”,doMouseDown,false);
canvas.addEventListener(‘mousemove’, doMouseMove,false);
canvas.addEventListener(‘mouseup’, doMouseUp, false);

function mousePosition(ev){
if(ev.pageX || ev.pageY){//firefox、chrome等浏览器
return {x:ev.pageX,y:ev.pageY};
}
return {// IE浏览器
x:ev.clientX + document.body.scrollLeft – document.body.clientLeft,
y:ev.clientY + document.body.scrollTop – document.body.clientTop
};
}
function mouseMove(ev){
ev = ev || window.event;
var mousePos = mousePosition(ev);
//document.getElementById(‘x’).innerHTML = mousePos.x;
// document.getElementById(‘y’).innerHTML = mousePos.y;
input.value= “当前鼠标的X座标是:”+mousePos.x+” y座标是:”+mousePos.y
}
document.onmousemove = mouseMove;
function doMouseDown(e){//给canvas添加点击事件
e=e||event;//获取事件对象
// window.open(‘http://www.taoshaw.com’);//打开指定链接
//window.alert(“欢迎光临淘沙网。”);

input.value = “这afsf的” ;
}
function doMouseMove(e){
//window.alert(“欢迎光临淘沙网。鼠标移动。”);

}
function doMouseUp(e){
//window.alert(“欢迎光临淘沙网。鼠标抬起。”);
}
</script>
<script>
window.onload = function(){
function box(){
//获取DIV为‘box’的盒子
var oBox = document.getElementById(‘div1′);
//获取元素自身的宽度
var L1 = oBox.offsetWidth;
//获取元素自身的高度
var H1 = oBox.offsetHeight;
//获取实际页面的left值。(页面宽度减去元素自身宽度/2)
var Left = (document.documentElement.clientWidth-L1)/2;
//获取实际页面的top值。(页面宽度减去元素自身高度/2)
var top = (document.documentElement.clientHeight-H1)/2;
oBox.style.left = Left+’px’;
oBox.style.top = top+’px’;
}
box();
//当浏览器页面发生改变时,DIV随着页面的改变居中。
window.onresize = function(){
box();
}
}
</script>
</body>
</html>

核心代码:

<script type=”text/javascript”>
function mousePosition(ev){
if(ev.pageX || ev.pageY){//firefox、chrome等浏览器
return {x:ev.pageX,y:ev.pageY};
}
return {// IE浏览器
x:ev.clientX + document.body.scrollLeft – document.body.clientLeft,
y:ev.clientY + document.body.scrollTop – document.body.clientTop
};
}
function mouseMove(ev){
ev = ev || window.event;
var mousePos = mousePosition(ev);

//mousPos.x,mousePos.y就是当前鼠标座标。
document.getElementById(‘x’).innerHTML = mousePos.x;
document.getElementById(‘y’).innerHTML = mousePos.y;
}
document.onmousemove = mouseMove;
</script>