您的位置：首页 > Web前端 > JavaScript

JavaScript（一）

2015-09-30 11:23 609 查看

一、JavaScript的组成部分：

　1、核心（ECMAScript）描述了该语言的语法和基本对象

　2、文档对象模型(DOM)描述了处理网页内容的方法和接口

　3、浏览器对象模型(BOM)描述了与浏览器进行交互的方法和接口

　

　　　　　　　　　　　　js主要是操作DOM

二、简单实例

js一般是要插入HTML中的，动态的改变网页内容

<script type="text/javascript">
alert("hello");
document.write("向文档中写入一句话");
</script>

打开网页，显示如下：

三、基础语法

1.引入方式：分为内部引入和外部引入，内部引入就是把js放入< head >和< body > 中。外部引入就是新建一个.js文件，外部文件通常包含被多个网页使用的代码。

myJs中代码：

alert("外部引入的js");

NewFile中的代码：

<script type="text/javascript" src="myJs.js"></script>

如果显示乱码，要将js和html的编码方式统一为utf-8

2.注释：单行// 多行/* */

3.变量：js是弱类型的语言，变量统一用var

4.基本数据类型：Undefined(未赋值)，Null(变量值为空)，其他数据类型和java差不多。

var e;
document.write(e+" ");
var f="hello";
f=null;
document.write(f);

输出结果为：undefined null

5.运算符：

<script type="text/javascript">
var x = 5;
document.write((x == 5) + "<br/>");
document.write((x == '5') + "<br/>")
document.write((x === '5') + "<br/>")
</script>

输出结果为true true false，两个等于号不区分数据类型，三个等于号比较严格，区分数据类型

6.js函数：

<script type="text/javascript">
function fun1() {
alert("第一个方法");
}
function fun2(p2) {
alert(p2);
}
fun1();
fun2(2);
</script>

输出结果为：第一个方法，2

四、JavaScript操作DOM节点

1.处理DOM事件

<body>
<script type="text/javascript">
function fun1() {
alert("js处理事件成功");
}
</script>
<input type="button" value="点击" onclick="fun1()" />
</body>

2.操作DOM节点

<body>
<script type="text/javascript">
function fun1() {
//表单元素用value，非表单元素用innerHTML，input有value属性
document.getElementById("txt").innerHTML = "用户名：";
document.getElementById("username").value = "tom";
}
</script>
<font id="txt">字体</font>
<input type="text" id="username" />
<input type="button" value="点击" onclick="fun1()" />
</body>

初始页面：

点击后：

3.修改DOM节点CSS样式

<body>
<script type="text/javascript">
function fun1() {
document.getElementById("p1").style.color = "red";
}
</script>
<p id="p1">修改DOM节点颜色</p>
<input type="button" value="点击修改" onclick="fun1()" />
</body>

点击按钮后段落字体变为红色

五、JavaScript对象

1.动态的添加属性或方法

<body>
<script type="text/javascript">
function sayHello(word) {
alert(word);
}
var p = new Object();
p.name = "tom";
p.fun1 = sayHello;
alert(p.name);
p.fun1("Hello");
</script>
</body>

2.动态的删除属性和方法

第一种方式：

delete p.name;
alert(p.name);
delete p.fun1;
p.fun1("Hello");

弹出窗口会显示undefined，然后会报错fun1不是一个方法

第二种方式：

p.name=undefined;
p.fun1=undefined;
alert(p.name);
p.fun1("Hello");

弹出窗口显示的和第一种方式一样

3.使用对象构造器来构造对象

使用函数构造对象：

<script type="text/javascript">
function person(name, age) {
this.name = name;
this.age = age;
this.fun1 = sayHello;
function sayHello(word) {
alert(word);
}
}
var p = new person("tom", 21);
alert(p.name);
p.fun1("Hello");
</script>

JavaScript 是面向对象的语言，但 JavaScript 不使用类。

在 JavaScript 中，不会创建类，也不会通过类来创建对象。

JavaScript 基于 prototype，而不是基于类的。

4.JavaScript 中的所有事物都是对象：字符串、数值、数组、函数…下面研究一下数组

<script type="text/javascript">
var arr = new Array(3);
arr[0] = 1;
arr[1] = 2;
arr[2] = 3;
//js中的for...in循环遍历数组
for (n in arr) {
document.write(arr
+ "</br>");
}
//将数组元素组合成字符串,并以.号隔开
document.write(arr.join(".") + "</br>");
//颠倒数组元素
document.write(arr.reverse());
</script>

5.js常用函数

全局函数：不属于任何一个内置对象，如escape(),eval()…

var str = "1+2+3";
alert(eval(str));//eval用来执行代码，输出为6

window对象常用方法及事件：

<script type="text/javascript">
function fun1() {
alert("5秒后执行");
}
//延时执行，单位为毫秒，只执行一次
window.setTimeout("fun1()", 5000);
</script>

<body>
<script type="text/javascript">
function fun2() {
var date = new Date();
var time = date.getHours() + ":" + date.getMinutes() + ":"+ date.getSeconds();
document.getElementById("time").innerHTML = time;
}
//周期执行，单位为毫秒
window.setInterval("fun2()", 1000);
</script>
<div id="time"></div>
</body>

打开一个窗口window.open(“http://www.baidu.com“);

当文档加载完毕时执行window.onload=function(){}

当窗口大小发生变化时执行window.onresize=function(){}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航