Javascript 入门
- HTML 定义了网页的内容
- CSS 描述了网页的布局
- JavaScript 网页的行为
1. 什么是 JavaScript
- JavaScript 被设计用来向 HTML 页面添加交互行为。
- JavaScript 是一种脚本语言(脚本语言是一种轻量级的编程语言)。
- JavaScript 由数行可执行计算机代码组成。
- JavaScript 通常被直接嵌入 HTML 页面。
- JavaScript 是一种解释性语言(就是说,代码执行不进行预编译)。
2.Java 和 JavaScript 是相同的吗
- 不同!
- 在概念和设计方面,Java 和 JavaScript 是两种完全不同的语言。
- Java(由太阳微系统公司开发)很强大,同时也是更复杂的编程语言,就像同级别的 C 和 C++。
3. JavaScript 用法
3.1 内部调用
- HTML 中的脚本必须位于
<script>
与</script>
标签之间。 - 脚本可被放置在 HTML 页面的
<body>
和<head>
部分中。那些老旧的实例可能会在
<script>
标签中使用type="text/javascript"
。现在已经不必这样做了。JavaScript
是所有现代浏览器以及 HTML5 中的默认脚本语言。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script>
alert("这是我的第一个JavaScript");
</script>
</head>
<body>
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落</p>");
</script>
</body>
</html>
3.2 外部的 JavaScript
- 也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。
- 外部
JavaScript
文件的文件扩展名是.js
。 - 如需使用外部文件,请在
<script>
标签的"src"
属性中设置该.js
文件:外部 javascript 文件不使用
<script>
标签,直接写javascript
代码。
3.3 JavaScript 注释
- 不是所有的 JavaScript 语句都是”命令”。双斜杠 // 后的内容将会被浏览器忽略:
// 我不会执行
- 多行注释以
/*
开始,以*/
结尾。
<script>
/* 下面的这些代码会输出 一个标题和一个段落 并将代表主页的开始 */
alert("这是我的第一个JavaScript");
</script>
3.4 JavaScript 字母大小写
JavaScript
对大小写是敏感的。- 当编写
JavaScript
语句时,请留意是否关闭大小写切换键。 - 函数
Myfunction
与MyFunction
是不同的。 - 同样,变量
myVar
与MyVar
也是不同的。
3.5 JavaScript 变量
- 变量必须以字母开头
- 变量也能以
$
和_
符号开头(不过我们不推荐这么做) - 变量名称对大小写敏感(
y
和Y
是不同的变量) - 在 JavaScript 中创建变量通常称为”声明”变量。
- 使用
var
关键词来声明变量:var name="Nicola";
- 在一条语句中声明很多变量。该语句以
var
开头,并使用逗号分隔变量即可:var name="Nicola", age=18, job="boss";
在计算机程序中,经常会声明无值的变量。未使用值来声明的变量,其值实际上是
undefined
3.6 JavaScript 输出
JavaScript
可以通过不同的方式来输出数据:- 使用
window.alert()
弹出警告框。 - 使用
document.write()
方法将内容写到HTML
文档中。 - 使用
innerHTML
写入到HTML
元素。 - 使用
console.log()
写入到浏览器的控制台。
3.7 JavaScript 作用域
- 在 JavaScript 中, 对象和函数同样也是变量。在 JavaScript 中, 作用域为可访问变量,对象,函数的集合。
JavaScript 局部作用域
- 变量在函数内声明,变量为局部作用域。局部变量:只能在函数内部访问。
// 此处不能调用 Name 变量
function myFunction() {
var Name = "Volvo";
// 函数内可调用 Name 变量
}
JavaScript 全局变量
- 变量在函数外定义,即为全局变量。全局变量: 网页中所有脚本和函数均可使用
var Name = " Volvo";
// 此处可调用 Name 变量
function myFunction() {
// 函数内可调用 Name 变量
}
JavaScript 变量生命周期
- JavaScript 变量生命周期在它声明时初始化。局部变量在函数执行完毕后销毁。全局变量在页面关闭后销毁。
3.8 JavaScript 变量提升
- 变量未定义之前就可以使用
<script>
// 变量声明提升: 变量未定义之前就可以使用了
// 声明
var email;
// 访问在前
console.log(email);
// 声明在后
// var email = "admin@php.cn";
// 初始化,第一次赋值
email = "admin@php.cn";
console.log(email);
// var username;
// console.log(username);
</script>
变量提升:函数声明和变量声明总是会被解释器悄悄地被”提升”到方法体的最顶部。
4. 总结
JavaScript
的出现,可以使得信息和用户之间不仅只是一种显示和浏览的关系,而是实现了一种实时的、动态的、可交互的表达能力。从而基于 CGI 静态的 HTML 页面将被可提供动态实时信息,并对客户操作进行反应的 Web 页面取代。JavaScript
脚本正是满足这种需求而产生的语言。