Javascript基础

一、全部变量和局部变量

1.局部 JavaScript 变量

在 JavaScript 函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它。(该变量的作用域是局部的)。

您可以在不同的函数中使用名称相同的局部变量,因为只有声明过该变量的函数才能识别出该变量。

只要函数运行完毕,本地变量就会被删除。

2. 全局 JavaScript 变量

在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。

JavaScript 变量的生存期

JavaScript 变量的生命期从它们被声明的时间开始。

3. 局部变量会在函数运行以后被删除。

全局变量会在页面关闭后被删除。

二、JavaScript对象

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

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

var txt = "Hello";

属性:txt.length=5

方法:txt.indexOf()

txt.replace()

txt.search()

 

2.创建 JavaScript 对象

person=new Object();

person.firstname="Bill";

person.lastname="Gates";

person.age=56;

person.eyecolor="blue";

 

三、javaScript操作

1.写入 HTML 输出

document.write("<h1>This is a heading</h1>");

2.通过指定的 id 来访问 HTML 元素,并改变其内容:

document.getElementById("demo").innerHTML="我的第一段 JavaScript";

3. 改变 HTML 元素的图片、样式,属于改变 HTML 属性的变种。

x=document.getElementById("demo")  //找到元素

x.style.color="#ff0000";           //改变样式

4. 验证输入

if isNaN(x) {alert("Not Numeric")};

5.对事件作出反应

<button type="button" onclick="alert('Welcome!')">点击这里</button>

<img id="myimage" onclick="changeImage()" src="/i/eg_bulboff.gif">

 

四、自定义错误 try  throw catch

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

{

var y=document.getElementById("mess");

y.innerHTML="错误:" + err + "。";

}

}

</script>

五、HTML DOM (文档对象模型)

当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model)。

HTML DOM 模型被构造为对象的树。

Javascript基础

通过可编程的对象模型,JavaScript 获得了足够的能力来创建动态的 HTML。

 •JavaScript 能够改变页面中的所有 HTML 元素

 •JavaScript 能够改变页面中的所有 HTML 属性

 •JavaScript 能够改变页面中的所有 CSS 样式

 •JavaScript 能够对页面中的所有事件做出反应

 

5.1查找 HTML 元素

通过 id 查找 HTML 元素

var x=document.getElementById("main");

通过标签名查找 HTML 元素

var y=x.getElementsByTagName("p");

 

5.2 HTML DOM 允许 JavaScript 改变 HTML 元素的内容。

1)改变 HTML 输出流

document.write(Date());

2)改变 HTML 内容

document.getElementById(‘p1’).innerHTML= ="New text!";

3) 改变 HTML 属性

document.getElementById("image").src="landscape.jpg";

4) 改变 HTML 样式

document.getElementById("p2").style.color="blue";

 

5.3 HTML DOM 事件

HTML 事件的例子:

 •当用户点击鼠标时  onclick, onmousedown, onmouseup

onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时,会触发 onmousedown 事件,当释放鼠标按钮时,会触发 onmouseup 事件,最后,当完成鼠标点击时,会触发 onclick 事件。

 •当网页已加载时 onload和 onunload

        onload 和 onunload 事件会在用户进入或离开页面时被触发。

onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。

onload 和 onunload 事件可用于处理 cookie。

 •当图像已加载时

 •当鼠标移动到元素上时  onmouseover 和 onmouseout 事件

onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

 •当输入字段被改变时 onchange 事件

onchange 事件常结合对输入字段的验证来使用

 •当提交 HTML 表单时

 •当用户触发按键时

六、cookies

1. 什么是cookie?

cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时,就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。

2. 有关cookie的例子:

名字 cookie

当访问者首次访问页面时,他或她也许会填写他/她们的名字。名字会存储于 cookie 中。当访问者再次访问网站时,他们会收到类似 "Welcome John Doe!" 的欢迎词。而名字则是从 cookie 中取回的。

密码 cookie

当访问者首次访问页面时,他或她也许会填写他/她们的密码。密码也可被存储于 cookie 中。当他们再次访问网站时,密码就会从 cookie 中取回。

日期 cookie

当访问者首次访问你的网站时,当前的日期可存储于 cookie 中。当他们再次访问网站时,他们会收到类似这样的一条消息:"Your last visit was on Tuesday August 11, 2005!"。日期也是从 cookie 中取回的。

3.创建和存储 cookie

在这个例子中我们要创建一个存储访问者名字的 cookie。当访问者首次访问网站时,他们会被要求填写姓名。名字会存储于 cookie 中。当访问者再次访问网站时,他们就会收到欢迎词。

首先,我们会创建一个可在 cookie 变量中存储访问者姓名的函数:

function setCookie(c_name,value,expiredays)
{
var exdate=new Date()
exdate.setDate(exdate.getDate()+expiredays)
document.cookie=c_name+ "=" +escape(value)+
((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
}

上面这个函数中的参数存有 cookie 的名称、值以及过期天数。

在上面的函数中,我们首先将天数转换为有效的日期,然后,我们将 cookie 名称、值及其过期日期存入 document.cookie 对象。