JavaScript基础
------学习网站https://www.runoob.com/js/js-tutorial.html
Javascript语言的特点：
- 安全性；2.易用性；3.动态交互性；跨平台性；
- 第一个javascript程序：
基本语法：<script type=”text/javascript”>
</script>
第一个程序：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
<script>
function displayDate(){
document.getElementById("demo").innerHTML=Date();
}
</script>
</head>
<body>
<h1>我的第一个 JavaScript 程序</h1>
<p id="demo">这是一个段落</p>
<button type="button" onclick="displayDate()">显示日期</button>
</body>
</html>
学习历程
JavaScript 会在页面加载时向 HTML 的 <body> 写文本：
<script> document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落</p>"); </script>
- HTML 输出流中使用 document.write，相当于添加在原有html代码中添加一串html代码。而如果在文档加载后使用（如使用函数），会覆盖整个文档
- 外部 javascript 文件不使用 <script> 标签，直接写 javascript 代码
JavaScript 输出
JavaScript 没有任何打印或者输出的函数。
JavaScript 显示数据
JavaScript 可以通过不同的方式来输出数据：
- 使用 window.alert() 弹出警告框。
- 使用 document.write() 方法将内容写到 HTML 文档中。
- 使用 innerHTML 写入到 HTML 元素。
- 使用 console.log() 写入到浏览器的控制台。
JavaScript 语句标识符
JavaScript 语句通常以一个 语句标识符 为开始，并执行该语句。
语句标识符是保留关键字不能作为变量名使用。
下表列出了 JavaScript 语句标识符 (关键字) ：
|
语句 |
描述 |
|
break |
用于跳出循环。 |
|
catch |
语句块，在 try 语句块执行出错时执行 catch 语句块。 |
|
continue |
跳过循环中的一个迭代。 |
|
do ... while |
执行一个语句块，在条件语句为 true 时继续执行该语句块。 |
|
for |
在条件语句为 true 时，可以将代码块执行指定的次数。 |
|
for ... in |
用于遍历数组或者对象的属性（对数组或者对象的属性进行循环操作）。 |
|
function |
定义一个函数 |
|
if ... else |
用于基于不同的条件来执行不同的动作。 |
|
return |
退出函数 |
|
switch |
用于基于不同的条件来执行不同的动作。 |
|
throw |
抛出（生成）错误 。 |
|
try |
实现错误处理，与 catch 一同使用。 |
|
var |
声明一个变量。 |
|
while |
当条件语句为 true 时，执行语句块。 |
HTML 事件
HTML 事件可以是浏览器行为，也可以是用户行为。
以下是 HTML 事件的实例：
- HTML 页面完成加载
- HTML input 字段改变时
- HTML 按钮被点击
通常，当事件发生时，你可以做些事情。
在事件触发时 JavaScript 可以执行一些代码。
HTML 元素中可以添加事件属性，使用 JavaScript 代码来添加 HTML 元素。
单引号:
<some-HTML-element some-event='JavaScript 代码'>
双引号:
<some-HTML-element some-event="JavaScript 代码">
JavaScript 可以做什么?
事件可以用于处理表单验证，用户输入，用户行为及浏览器动作:
- 页面加载时触发事件
- 页面关闭时触发事件
- 用户点击按钮执行动作
- 验证用户输入内容的合法性
- 等等 ...
可以使用多种方法来执行 JavaScript 事件代码：
- HTML 事件属性可以直接执行 JavaScript 代码
- HTML 事件属性可以调用 JavaScript 函数
- 你可以为 HTML 元素指定自己的事件处理程序
- 你可以阻止事件的发生。
- 等等 ...
JavaScript HTML DOM 事件
HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。
https://www.runoob.com/js/js-htmldom-events.html
HTML 事件的例子：
- 当用户点击鼠标时
- 当网页已加载时
- 当图像已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当提交 HTML 表单时
- 当用户触发按键时