第六周学习周记——学习JavaScript
第六周学习周记
- 前言
- 一、JavaScript简介
- 二、JavaScript用法
- 三、JavaScript语法
-
- 1. JavaScript字面量
- 2. JavaScript变量
- 3. JavaScript操作符
- 4. JavaScript关键字
- 5. JavaScript数据类型
- 四、JavaScript对象
- 五、JavaScript函数
- 六、JavaScript事件
- 总结
前言
在上一周学习了BootStrap后，这一周将学习新的知识：JavaScript。
一、JavaScript简介
JavaScript是一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
在1995年时，由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript，但实际上它的语法风格与Self及Scheme较为接近。
为了取得技术优势，微软推出了JScript，CEnvi推出ScriptEase，与JavaScript同样可在浏览器上运行。为了统一规格，因为JavaScript兼容于ECMA标准，因此也称为ECMAScript。
二、JavaScript用法
代码：
<body>
<p>
JavaScript 能够直接写入 HTML 输出流中：
p>
<script>
document.write("这是一个标题
");
document.write("这是一个段落。
");
script>
<p>
您只能在 HTML 输出流中使用 <strong>document.writestrong>。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
p>
body>
运行结果：
三、JavaScript语法
JavaScript是一个程序语言，其语法规则定义了语言结构。
JavaScript是一个脚本语言,是一个轻量级，但功能强大的编程语言。
1. JavaScript字面量
代码：
<p id="demo">p>
<script>
document.getElementById("demo").innerHTML = 5 * 9;
script>
运行结果：
2. JavaScript变量
代码：
<p id="demo">p>
<script>
var length;
length = 9;
document.getElementById("demo").innerHTML = length;
script>
运行结果：
3. JavaScript操作符
代码：
<p id="demo">p>
<script>
var x, y, z;
x = 2;
y = 4;
z = (x + y) * 7;
document.getElementById("demo").innerHTML = z;
script>
运行结果：
4. JavaScript关键字
JavaScript关键字用于标识要执行的操作，和其他任何编程语言一样，JavaScript保留了一些关键字为自己所用。
以下是JavaScript中最重要的保留字：
5. JavaScript数据类型
var length = 20; // Number 通过数字字面量赋值
var points = x * 5; // Number 通过表达式字面量赋值
var lastName = "Jim"; // String 通过字符串字面量赋值
var cars = ["Saab", "Volvo", "BMW"]; // Array 通过数组字面量赋值
var person = {firstName:"John", lastName:"Doe"}; // Object 通过对象字面量赋值
四、JavaScript对象
在JavaScript中，几乎所有的事物都是对象，对象是非常重要的，当你理解了对象，就可以了解 JavaScript。
对象也是一个变量，但对象可以包含多个值（多个变量），每个值以name:value对呈现。
代码：
<p>创建 JavaScript 对象。p>
<p id="demo">p>
<script>
var person = {
firstName : "Jim",
lastName : "Doe",
age : 20,
eyeColor : "blue"
};
document.getElementById("demo").innerHTML =
person.firstName + " 现在 " + person.age + " 岁。";
script>
运行结果：
五、JavaScript函数
函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
代码：
<p>点击这个按钮，来调用带参数的函数。p>
<button onclick="myFunction('Harry Potter','Wizard')">点击这里button>
<script>
function myFunction(name,job){
alert("Welcome " + name + ", the " + job);
}
script>
运行结果：
六、JavaScript事件
HTML事件可以是浏览器行为，也可以是用户行为。
在事件触发时JavaScript可以执行一些代码。
HTML元素中可以添加事件属性，使用JavaScript代码来添加HTML元素。
代码：
<body>
<button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?button>
<p id="demo">p>
运行结果：
常见的HTML事件：
| 事件 | 描述 |
|---|---|
| onchange | HTML元素改变 |
| onclick | 用户点击HTML元素 |
| onmouseover | 用户在一个HTML元素上移动鼠标 |
| onmouseout | 用户从一个HTML元素上移开鼠标 |
| onkeydown | 用户按下键盘按键 |
| onload | 浏览器已完成页面的加载 |
总结
在这一周学习了JavaScript，了解了JavaScript是如何与HTML和CSS一起工作的，是互联网上最流行的脚本语言，这门语言可用于HTML和web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。