java基础
<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "段落被更改。";
}
</script>
</head>
<body>
<h1>一张网页</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">试一试</button>
</body>
</html>
js定义代码,可放在网页代码的head/body/footer任意位置。单双引号都可以。
还可以作为外部文件,让许多网页共用。
外部脚本
脚本可放置与外部文件中:
外部文件:myScript.js
如需使用外部脚本,请在 <script> 标签的 src (source) 属性中设置脚本的名称:
实例
<script src="myScript.js"></script>
可同时放几个,当前目录、外网、本网其它目录
<script src="myScript1.js"></script> <script src="myScript2.js"></script>
<script src="https://www.w3school.com.cn/js/myScript1.js"></script>
<script src="/js/myScript1.js"></script>
JavaScript 能够以不同方式“显示”数据:
- 使用 window.alert() 写入警告框
- 使用 document.write() 写入 HTML 输出 出于测试目的,使用 document.write() 比较方便,注意:在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML :
- 使用 innerHTML 写入 HTML 元素
- 使用 console.log() 写入浏览器控制台
如需访问 HTML 元素,JavaScript 可使用 document.getElementById(id) 方法。
id 属性定义 HTML 元素。innerHTML 属性定义 HTML 内容:
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML = 5 + 6;
</script>
显示结果:
我的第一张网页
我的第一个段落。
11
在 HTML 中,JavaScript 语句是由 web 浏览器“执行”的“指令”。
<script>
var a, b, c;
a = 5;
b = 6;
c = a + b;
document.getElementById("demo1").innerHTML = c;
</script>
JavaScript 代码块
JavaScript 语句可以用花括号({...})组合在代码块中。
代码块的作用是定义一同执行的语句。
您会在 JavaScript 中看到成块组合在一起的语句:
实例
function myFunction() {
document.getElementById("demo").innerHTML = "I am readming";
document.getElementById("myDIV").innerHTML = "www.yuanscn.com";
}
JavaScript 关键词
JavaScript 语句常常通过某个关键词来标识需要执行的 JavaScript 动作。
下面的表格列出了一部分将在教程中学到的关键词:
| 关键词 | 描述 |
|---|---|
| break | 终止 switch 或循环。 |
| continue | 跳出循环并在顶端开始。 |
| debugger | 停止执行 JavaScript,并调用调试函数(如果可用)。 |
| do ... while | 执行语句块,并在条件为真时重复代码块。 |
| for | 标记需被执行的语句块,只要条件为真。 |
| function | 声明函数。 |
| if ... else | 标记需被执行的语句块,根据某个条件。 |
| return | 退出函数。 |
| switch | 标记需被执行的语句块,根据不同的情况。 |
| try ... catch | 对语句块实现错误处理。 |
| var | 声明变量。 |
注释:JavaScript 关键词指的是保留的单词。保留词无法用作变量名。
var x, y; // 声明变量
x = 7; y = 8; // 赋值
z = x + y; // 计算值
双斜杠 // 或 /* 与 */ 之间的代码被视为注释。
注释会被忽略,不会被执行
| 运算符 | 描述 |
|---|---|
| + | 加法 |
| - | 减法 |
| * | 乘法 |
| / | 除法 |
| % | 系数 |
| ++ | 递加 |
| -- |
递减 |
| 运算符 | 描述 |
|---|---|
| == | 等于 |
| === | 等值等型 |
| != | 不相等 |
| !== | 不等值或不等型 |
| > | 大于 |
| < | 小于 |
| >= | 大于或等于 |
| <= | 小于或等于 |
| ? | 三元运算符 |
注释:JS 比较这一章中完整描述了比较运算符。
JavaScript 逻辑运算符
| 运算符 | 描述 |
|---|---|
| && | 逻辑与 |
| || | 逻辑或 |
| ! | 逻辑非 |
JavaScript 数据类型
JavaScript 变量能够保存多种数据类型:数值、字符串值、数组、对象等等:
var length = 7; // 数字 var lastName = "Gates"; // 字符串 var cars = ["Porsche", "Volvo", "BMW"]; // 数组 var x = {firstName:"Bill", lastName:"Gates"}; // 对象
真实生活中的对象、属性和方法
在真实生活中,汽车是一个对象。
汽车有诸如车重和颜色等属性,也有诸如启动和停止的方法:
常见的 HTML 事件
下面是一些常见的 HTML 事件:
| 事件 | 描述 |
|---|---|
| onchange | HTML 元素已被改变 |
| onclick | 用户点击了 HTML 元素 |
| onmouseover | 用户把鼠标移动到 HTML 元素上 |
| onmouseout | 用户把鼠标移开 HTML 元素 |
| onkeydown | 用户按下键盘按键 |
| onload | 浏览器已经完成页面加载 |
JavaScript 能够做什么?
事件处理程序可用于处理、验证用户输入、用户动作和浏览器动作:
- 每当页面加载时应该做的事情
- 当页面被关闭时应该做的事情
- 当用户点击按钮时应该被执行的动作
- 当用户输入数据时应该被验证的内容
- 等等
让 JavaScript 处理事件的不同方法有很多:
- HTML 事件属性可执行 JavaScript 代码
- HTML 事件属性能够调用 JavaScript 函数
- 您能够向 HTML 元素分配自己的事件处理函数
- 您能够阻止事件被发送或被处理
- 等等

浙公网安备 33010602011771号