一、JavaScript简介
JavaScript 是互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
javascript因为兼容于ECMA标准,因此也称为ECMAScript。JavaScript作为一种脚本语言,已经被广泛地应用于Web页面当中,通过嵌入HTML来实现各种酷炫的动态效果,为用户提供赏心悦目的浏览效果。除此之外,也可以用于控制cookies以及基于Node.js技术进行服务器端编程。
javascript是甲骨文公司的注册商标,完整的JavaScript实现包含三个部分:ECMAScript,文档对象模型和浏览器对象模型。发展初期,JavaScript的标准并未确定,同期有Netscape的JavaScript,微软的JScript和CEnvi的ScriptEase三足鼎立。1997年,在ECMA(欧洲计算机制造商协会)的协调下,由Netscape、Sun、微软、Borland组成的工作组确定统一标准:ECMA-262。
JavaScript 是脚本语言
- JavaScript 是一种轻量级的编程语言。
- JavaScript 是可插入 HTML 页面的编程代码。
- JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。
二、如何使用JavaScript
在HTML,JavaScript代码必须插入<script> 和 <script> 之间
脚本可以放在<body>里面,或放在一个HTML页面的<head>部分,或者二者都可以。
JavaScript 在<head>里面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "段落被改变.";
}
</script>
</head>
<body>
<h1>JavaScript在Head里面</h1>
<p id="demo">一个段落.</p>
<button type="button" onclick="myFunction()">试试</button>
</body>
</html>
JavaScript 在<body>里面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h1>JavaScript 在Body里面</h1>
<p id="demo">一个段落.</p>
<button type="button" onclick="myFunction()">试试</button>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "段落被改变.";
}
</script>
</body>
</html>
外部JavaScript
function myFunction() {
document.getElementById("demo").innerHTML = "Paragraph changed.";
}
在HTML文件中引用:
<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>
外部JavaScript的优势
- 将HTML和代码代码分开
- 使HTML和JavaScript更容易阅读和维护
- 缓存JavaScript,可以加速页面加载JavaScript文件
三、JavaScript作用
JavaScript 最常用方法之一是getElementById()
1.JavaScript可以更改HTML内容
本例使用"find"方法找到(id=“demo”)的元素,并且将内容改为"Hello JavaScript":
document.getElementById("demo").innerHTML = "Hello JavaScript";
2.JavaScript可以改变HTML属性
document.getElementById('myImage').src="pic_bulbon.gif";
3.JavaScript可以改变HTML样式(CSS)
document.getElementById("demo").style.fontSize = "25px";
4.JavaScript可以隐藏的HTML元素
document.getElementById("demo").style.display = "none";
5.JavaScript可以显示HTML元素
document.getElementById("demo").style.display = "block";
四、JavaScript输出
- alert():使用警报框来显示数据
<script>
alert(5 + 6);
</script>
- document.write():出于测试目的,使用document.write()更方便
<script>
document.write(5 + 6);
</script>
document.write()方法只用于测试.
- innerHTML:访问一个HTML元素, JavaScript可以使用 document.getElementById(id) 方法,id属性定义HTML元素. innerHTML 属性定义HTML内容
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
- console.log():在浏览器中,可以使用console.log()方法显示数据
<script>
console.log(5 + 6);
</script>
五、JavaScript语法
JavaScript语句的组成:值、运算符、表达式、关键字和注释
JavaScript执行顺序:按照HTML文件中出现的顺序一次执行
JavaScript大小写敏感:JavaScript严格区分大小写
JavaScript语句分隔符:使用;结束语句,一行只有一个语句可加可不加,一行多个代码必须加
JavaScript命名:使用驼峰命名法,尽量避免保留字。
JavaScript注释
单行注释:使用//开始
var x = 5; // 声明 x, 并赋值为 5
var y = x + 2; // 声明 y,并赋值为 x + 2
多行注释:多行注释使用/*开头,使用 */结束
/*
The code below will change
下面代码将改变标题
用id = "myH"
并且改变段落
用id = "myp"
在这个页面里面:
*/
document.getElementById("myH").innerHTML = "我的第一个页面";
document.getElementById("myP").innerHTML = "我的第一个段落.";