![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Correction status：Uncorrected
Teacher's comments：
Collection
Collection
javascript
JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言，最早是在HTML（标准通用标记语言下的一个应用）网页上使用，用来给HTML网页增加动态功能。
三大特点:
* 语法灵活,表达力强
* 支持编译运行
* 事件驱动和非阻塞设计
---------------------------------------------------
# js引入方式
1.直接在元素的事件方法属性上写js代码
2.将js脚本写script标签中,仅限当前页面使用
3.将js脚本写到外部的js文件中
js数组的常用函数(slice()和splice())
定义和用法
slice() 方法可从已有的数组中返回选定的元素。
var arr = new Array(3) arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" document.write(arr.slice(1) + "<br />")
输出结果：
John,Thomas
定义和用法
splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。
var arr = new Array(6) arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" arr[3] = "James" arr[4] = "Adrew" arr[5] = "Martin" arr.splice(2,0,"William")
输出结果：
George,John,William,Thomas,James,Adrew,Martin
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js脚本的引入方式</title>
</head>
<body>
<!-- 1.直接在元素的事件方法属性上写js代码 -->
<!-- onclick是click事件对应的方法,this默认指向当前元素对象,可以省略 -->
<h3 id="tips" onclick="alert(this.id)">JavaScript很好玩的</h3>
<h3 id="tips" onclick="alert(id)">JavaScript很好玩的</h3>
<!-- 在表单中,事件方法属性可以直接使用表单元素的name属性访问同一个form标签内的元素 -->
<form action="">
<input type="text" name="site" value="php中文网">
<button type="button" onclick="alert(site.value)">显示站点</button>
</form>
<!-- 更多情形下, 事件方法属性的值是一个JS函数(函数我们后面会专门讨论) -->
<form action="">
<input type="text" name="username" placeholder="用户名">
<button type="button" onclick="check(username)">验证</button>
</form>
<!-- 2.将js脚本写script标签中,仅限当前页面使用 -->
<script>
function check(username) {
// js中的注释写法: 单行
/*
该函数用来验证用户名是否为空
*/
if (username.value.length === 0) {
alert('用户名空空如也');
} else {
alert('验证通过');
}
}
</script>
<!-- 3. 将js脚本写到外部的js文件中 -->
<!-- 在页面放一个小球,然后让他运行起来,我们将对应的js脚本写到外部 -->
<style>
#ball {
width: 80px;
height: 80px;
background-color: lightgreen;
border-radius: 50%;
box-shadow: 2px 2px 2px #888;
/* 小球相于对原始位置发生位移 */
position: relative;
}
</style>
<div id="ball"></div>
<script>
// 获取小球
var ball = document.getElementById('ball');
// 设置动画函数
function running(){
var count = 0; // 设置计数器并初始化
// 设置定时器方法,每隔100毫秒间歇调用
var timer = setInterval(function (){
// 当运行次数小于100时,自动递增左和上的坐标值
if (count < 100) {
ball.style.left = ball.style.top = count + 'px';
count++;
} else { // 否则就清除定时器终止运动
clearInterval(timer);
}
}, 100);
}
// 给小球添加点击事件, 并指定事件对应的方法函数
// ball.onclick = running;
// 事件也可以这样添加, 设置事件监听器, 这样写的优点是可以同时设置多个事件方法
// false 是指是冒泡阶段触发该事件, true 是指是捕获阶段触发,感兴趣同学可查阅相关资料, 这不在教学计划中
ball.addEventListener('click', running, false);
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
# 语法概述
## 1. 基本句法和变量
### 1.1 语句
`var a = 1 + 3;`执行过程
* `var`声明变量`a`
* 将表达式`1 + 3`的运算结果赋值给变量`a`
* 语句以可选的分号`;`结尾
* 表达式和语句很像,但是有区别的:
* 表达式必须且一定返回一个值,语句不一定
* 语句可以包括多个表达式
* 表达式不需要分号结束:`1+3;`,`abc;`这样的语句虽有返回值但无意义
---------------------------------------------------------------
### 1.2 变量
* 变量是对`值`的引用,使用变量等同于引用一个值
* 每一个变量,都必须要有一个变量名称
`var a = 1;` 语句的解析:
* 先声明变量`a`,在变量`a`与数值`1`之间建议引用关系
* `var`是变量声明, 通过js解释器,创建一个变量`a`并分配内存
* 变量的声明和赋值(初始化)是可以独立分开的二个步骤
* 上面的代码也可以分解为:
* `var a;`
* `a = 1;`
* 如果仅声明未赋值:`var a;`,则`a = undefined;`
* js允许省略`var`,对未声明的变量赋值:`b = 2`,会创建全局变量污染全局环境
* 所以应该始终使用`var`声明变量并赋值,因为`var`会自动将变量与当前上下文绑定
* 如果变量未声明直接使用,如`x`,js引擎会直接报错`x is not defined(x变量未定义)`
* js是动态语言, 变量可赋予任何类型的值: `var a = 1; a = 'abc';` 均正确
* `var a = 1;`已经声明过了, 再用时不需要再声明`a='abc';`,如果再用`var`则又声明一个变量
* `var`声明的变量名允许重复,后面声明的会覆盖掉前面的同名变量
---------------------------------------------------------------
### 1.3 变量提升
* JS引擎工作时,先解析代码获取到所有的变量声明,并提升到代码的顶部,再一行一行的执行代码
* 造成的结果就是所有的变量声明会被提升所有语句的最前后, 这种现象叫:**变量提升**(hoising)
console.log(a); // undefined var a = 1;
根据前面知识,第一行语句应该出错才对,但却输出了`undefined`,这是为什么呢?
* 输出`undefined`表示变量`a`已声明,只是未初始化(赋值)罢了,究竟在哪声明了变量`a`呢?
* 原因在于第二条语句:`var a = 1;`,引擎自动将变量`a`的声明提前到了代码的顶部第一行
* 所以以上二行代码与下面的代码段是等价的:
var a; console.log(a); // undefined var a = 1;
* 变量提升仅针对使用了`var`关键字声明的变量
console.log(b); // ReferenceError: b is not defined b = 1;
### 1.4 标识符
* 标识符(identifier)是用来识别具体对象的一个名称,最常见的就是变量名和函数名(后面介绍)
* js对标识符大小是敏感的: `name`和`Name`是二个完全不同的标识符
* 标识符有一套自己的命名规则,必须严格遵守
* 第一个字符可以是任何的`Unicode字母`,以及`$`和下划线`_`
* 第二个字符以及后面的字符,可以使用`数字`
* 合法:`args1, _var, $ele`, 非法: `1w, 89, a-b, -y`
* 中文是合法标识符:`var 姓名 = 'Pete';`,但不推荐这样使用
* JavaScript有一些保留字，不能用作标识符
* `arguments、break、case、catch、class、const、continue、debugger、default、delete、do、else、enum、eval、export、extends、false、finally、for、function、if、implements、import、in、instanceof、interface、let、new、null、package、private、protected、public、return、static、super、switch、this、throw、true、try、typeof、var、void、while、with、yield`
* `undefined, Infinity, NaN`虽不是保留字,但有特殊意义,也不要用做标识符
---------------------------------------------------------------
### 1.5 注释
* 代码中被js引擎忽略不解析的部分叫`注释`
* `注释`虽然会使源代码变长,但会增强代码的可读性与可维护性,必须给予重视
* 写注释是很好的编程习惯,很多优秀商业源码, 注释会占到二分之一
* 注释分为单行和多行注释二类
* 单行注释以: `//`开始
* 多行注释以: `/*`开始, `*/`结束, 注释文本放在`/* 注释 */` 之间
// 单行注释 /* 多行注释 ...... */
> 历史原因, js会兼容html注释`<!-- 注释 -->`(解析为单行)
---------------------------------------------------------------
### 1.6 区块
* js可以使用大括号`{...}`将多条相关语句组织在一起,称为`区块`
* 与其它编程语言不同,js`区块`不能创建独立的作用域(scope)
* 但是, js中的函数会创建出一个独立的作用域,这和其它语言是类似的
{
var a = 1;
}
console.log(a);* 以上是一个单独的区块,其实这样的区块没有实际意义,应该与语法结构配合(判断/循环)
* 区块内声明的变量`a`并未创建作用域,所以区块外部仍能访问到,与没有使用区块没有区别
---------------------------------------------------------------
### 1.7 条件语句
js 使用 `if` 和 `switch` 二种结构,完成判断
#### 1.7.1 if 结构
判断表达式生成的布尔值,根据这个值的***,执行不同的语句
var grade = 70;
if ( grade >= 60 ) {
console.log('合格');
}* 表达式必须放在一对圆括号内,才可以进行运算求值
* `()`是js中的计算表达式的语法,非常重要,以后只要看到`()`就意味着执行或调用
* `(a<100)`表示对表达式`a<100`求值, 结果是一个`布尔值`(只有`true真`和`false假`)
* 其实上面的大括号中执行体只有一条语句,可以省略大括号的:`if (a<100) console.log(a);`
* 但是建议加上大括号,以方便以后添加新语句
### 1.7.2 if ~ else 结构
`if` 代码块后面再跟一个`else`代码块,表示当表达式为假值`false`时要执行的代码
var grade = 70;
if ( grade >= 60 ) {
console.log('合格');
} else {
console.log('补考');
}如果需要对一个变量进行多次判断,可以将多个`if ~ else`语句连接在起
var grade = 70;
if ( grade >= 60 && grade < 80 ) {
console.log('合格');
} else if (grade >= 80 && grade < 90) {
console.log('良好');
} else if (grade >= 90) {
console.log('优秀');
} else {
console.log('补考');
}`else`总是跟在离它最近`if`配对
var grade = 70;
if ( grade >= 60) {
if (grade < 80) {
console.log('合格');
} else {
if (grade < 90) {
console.log('良好');
} else {
console.log('优秀');
}
}
} else {
console.log('补考');
}### 1.7.3 switch 结构
当多个`if ~ else if`一起使用时, 转变为`switch`结构会使业务逻辑更加的清晰和方便
还是以上面的案例,用`switch`改写:
> 注意switch()的参数是**true**, 思考这是为什么?
var grade = 70;
var grade = 70;
// 这里必须传入true,否则内部除了default外,不会执行任何分支
// 这种情形适用于case 条件是一个条件表达式,而不是一个离散的具体值
switch (true) {
case (grade >= 60 && grade < 80):
console.log('合格');
break;
case (grade >= 80 && grade < 90):
console.log('良好');
break;
case (grade >= 90):
console.log('优秀');
break;
default:
console.log('补考');
}switch()`更多应用于如下场景
// 根据语言英文名称,输出对应的中文解释
var lang = 'javascript';
// 去掉前后误输的空格并强制全部转为小写,以便于判断
switch(lang.trim().toLowerCase()) {
case 'html':
console.log('超文本标记语言');
break;
case 'css':
console.log('层叠样式表');
break;
case 'javascript':
console.log('前端脚本语言');
break;
default:
console.log('输入错误');
}---------------------------------------------------------------
### 1.8 循环语句
#### 1.8.1 while 结构
`while结构`用于循环: `while(条件){循环体}`,只要条件为`true`就不断循环
while (expression) {
statement //由一条或多条语句组成循环体
}var i = 0;
while (i<10) {
console.log(i);
i++; // 必须要设置循环终止的条件,否则会陷入死循环
}#### 1.8.2 for 结构
语法:
```javascript
for (循环条件初始化; 判断循环条件; 更新循环条件) {
循环体内的语句
}
```
1. 循环条件初始化: 只在循环开始时执行一次
2. 判断循环条件: 检查条件,只要为真就执行循环体内的语句,会执行多次
3. 更新循环条件: 大多是自增/自减操作,更新条件后返回到中间部分继续判断并执行
// 循环遍历数组
var arr = ['html', 'css', 'javascript'];
for (var i = 0; i < arr.length; i++) {
console.log(arr[i]);
}`for 循环`很容易改写成 `while 循环`:
// 循环遍历数组
var arr = ['html', 'css', 'javascript'];
var i = 0;
while (i < arr.length) {
console.log(arr[i]);
i++;
}#### 1.8.3 do ~ while 结构
与`while循环`唯一区别在于循环条件的判断时间,它是在执行出口再判断,所以至少会执行一次循环体
基本语法:
```javascript
do {
statement //由一条或多条语句组成循环体
} while (expression)
改写上面的`while`案例
// 如果将循环条件修改为假值,例如: var i = 15,你会发现至少会执行一次
var i = 0;
do {
console.log(i);
i++;
} while (i<10);#### 1.8.4 break / continue 语句
* `break`跳出代码块或循环
* `continue`立即终止本次循环,开始下一次循环
// 只输出奇数
var arr = [12,5,3,18,9,72];
for (var i = 0; i < arr.length; i++) {
// 当模除为0时(即能被2整除)则为偶数,应该跳过
if (arr[i] % 2 === 0) continue;
console.log(arr[i]); // 输出: 5, 3, 9
}#### 1.8.5 label 标签语句
`标签`通常与`break`和`continue`配合跳出特定的循环
// 跳出双重循环
top:
for (var i=0;i<3;i++){
for (var j=0;j<3;j++){
if (i===1 && j===1) break top;
console.log("i="+i+",j="+j);
}
}
// i=0,j=0
// i=0,j=1
// i=0,j=2
// i=1,j=0这里也可以换成`continue`:
// 跳出双重循环
top:
for (var i=0;i<3;i++){
for (var j=0;j<3;j++){
//如果这里不使用标签,只退本层循环, 外层仍是继续执行
if (i===1 && j===1) continue top;
console.log("i="+i+",j="+j);
}
}
// i=0,j=0
// i=0,j=1
// i=0,j=2
// i=1,j=0
// i=2,j=0
// i=2,j=1
// i=2,j=2## 2. 数据类型
### 2.1 概述
* js中的每一个值必须属于某一个类型,如同每一个人必须要有一个身份与之对应
* js中数据类型共有6个类型和2个特殊值
* 基本6种类型又可以分为: 原始类型(primitive type),合成类型(complex type)
* 原始类型:
* `Number`: 数值, 如 `1,20,3.14`
* `String`: 字符串, 如 `'hello',"javascript"`
* `Boolean`: 布尔型, 只有二个值`true`和`false`
* 合成型:
* `Object`: 对象, 如`var obj = {x:10, y: 20}`
* `Array`: 数组, 如 `var arr = [1,2,3,4]`
* `Function`: 函数, 如 `function sum(x, y){return x + y;}`
* 对象和数组是**数据组合的方式**
* 函数是**数据处理的方法**/过程
* js将函数做为数据类型,可以将函数当做**表达式**进行赋值和传递,体现**函数式语言**本质
* js所有数据都可看成对象,包括原始类型(Number/String/Boolean)都可以像对象一样调用
* 除6个类型之外, 还有2个特殊值: `null`和`undefined`,分别属于`Null`和`Undefined`类型
#### 2.1.1 用字面量创建各种类型的数据
// 1.原始类型
var num = 150; // 数值型
var name = 'peter'; // 字符串
var isMarried = true; // 布尔值
// 2.数组
var arr = [35, 'php', true];
console.log(arr.length); // 查看元素数量
var arr = ['peter',['html','css','javascript']]; // 可嵌套
//访问(包括读写)
console.log(arr[1]);
arr[0] = 50;
console.log(arr[0]);
// 遍历,forEach(callback)
arr.forEach(function(value,index,arr){
console.log(value);
console.log(arr[index]);
})
//常用的函数
// FIFO,先进出的栈操作
//尾部增删
var arr = [];
arr.push(1);
arr.push(2);
arr.push(3);
arr.pop(); // 3
arr.pop(); // 2
arr.pop(); // 1
//头部增删
var arr = [];
arr.unshift('a');
arr.unshift('b');
arr.unshift('c');
arr.shift(); // 'c'
arr.shift(); // 'b'
arr.shift(); // 'a'
// 获取部分元素,返回Array
var arr = [1,2,3,4,5,6]; // 返回从索引2到4之间元素(不含索引4)
console.log( arr.slice(1,4) ); // [2,3,4]
console.log( arr.slice(1,-2) ); // [2,3,4],尾部从-1开始
// 增加和删除元素,返回删除的元素数组
// splice(开始索引, 要删除的数量(0表示不删除), 要添加的元素(多个逗号分开))
var arr = [1,2,3,4,5,6,7,8];
arr.splice(2,0,'a'); // 从第三个位置添加一个元素,非删除操作,返回空数组
console.log(arr); // [1, 2, "a", 3, 4, 5, 6, 7, 8]
arr.splice(4,2); // 从第5个位置删除2个,返回 [4, 5]
console.log(arr); // [1, 2, "a", 3, 6, 7, 8]
// 更新,实际上分二步完成:1.删除:是先删除指定元素, 2.添加: 再添加新元素到这个位置上
arr.splice(2,1,'php'); // ['a']
console.log(arr); // [1, 2, "php", 3, 6, 7, 8]
// 数组与字符串之间的转换
// Array -> String
arr.join(); // 默认逗号分隔: "1,2,php,3,6,7,8"
arr.join('-'); // 可自定义分隔符: "1-2-php-3-6-7-8"
// String -> Array
var str = 'html, css, javascript';
var arr = str.split(','); // 用逗号切割:["html", " css", " javascript"]
// 排序,默认全部转为字符串方式,按字母表自然顺序排序
arr.sort(); // [" css", " javascript", "html"]// 3.对象
var obj = {x: 10, y: 'die', z: 30};
console.log(obj.x);
console.log(obj['x']);
obj.y = 'live';
console.log(obj.y);
//遍历
console.log(Object.keys(obj)); // 返回对象属性/键名数组
Object.keys(obj).forEach(function(key){
console.log(key, '=>', obj[key]);
})
// 遍历所有属性(包括原型链上的属性): js是基于原型链继承,这与其它语言是不同的,进阶课程再讨论
// 使用 for in 遍历所有属性
for (key in obj) {
console.log(key, '=>', obj[key]);
}
//对象属性值可以是任何类型
var obj = {id: 10, name: 'jack', course: ['php','java']};
console.log(obj.course[0]);
// 对象的操作非常复杂,功能也很强大, 更多的方法和属性,大家可课后查阅相关资料扩展// 4.函数也可以使用字面量声明
function hello(name) {
return 'Hello ', name;
}
// 调用,函数名(实参)
console.log(hello('Peter Zhu'));
// 如果没传参,可设置默认参数
function hello(name) {
var who = name || '朱老师';
return 'Hello ', who;
}
console.log(hello())
// js是函数式语言,函数可以看成一个普通的数据类型,可以当作值使用,可以给其它变量赋值,传递
// 所以,可以将函数赋值给一个变量,通过这个变量来调用这个函数
// sum叫函数表达式, 它的值是一个匿名函数
var sum = function (a,b) {
return a + b;
}
console.log('sum = ', sum(10,20));### 2.2 typeof 运算符
* js有三种方式确定一个值到底属于什么类型?
* `typeof`运算符
* `instanceof`运算符
* `Object.prototype.toString()`方法
* 本节先学习: `typeof`运算符,它可以返回一个值的类型
#### 2.2.1 类型检测
// 原始类型
typeof 100; // 'number'
typeof 'css'; // 'string'
typeof true; // 'boolean'
// 函数类型
typeof function (){}; // 'function'
// 特殊值undefined
typeof undefined; // 'undefined'
// 其它类型全部返回'object'
typeof {}; // 'object'
typeof []; // 'object'
typeof null; // 'object'#### 2.2.2 `undefine`类型的一个应用
* `undefined` 类型有一个特殊应用:
* 已声明,但尚未初始化(赋值)的变量,它的值就是`undefinec`
* 而`typeof undefined;`是不会报错的,会返回`undefined`
* 所以可以用`typeof`来检测变量是否已声明过
age; // 出错: ReferenceError: age is not defined
typeof age; // 'undefined' 不会报错
// 以下是一种非常稳妥的变量赋值技巧
if (typeof age === 'undefined') {
var age = 30;
}
console.log(age);#### 2.2.3 如果正确判断`Array`类型
* 数组与对象数据,都返回`object`对象类型,如何进行区分呢?
* 使用`instanceof`运算符或者数组构造器`Array.isArray()`方法
[] instanceof Array; // true Array.isArray([]); // true
#### 2.2.4 如果正确判断`null`类型
* `null`其实应该返回`null`类型才正确, 为什么返回`object`,这是历史遗留问题,已经不可更改了
* 使用以下代码,可以正确的判断一个变量是否有`null`类型
// 可以将n换成除null以外的任何类型的值进行测试,通过排除法确定它的类型
var n = null;
if (!n && typeof(n)!='undefined' && n!=0) {
console.log('n is null');
}点击 "运行实例" 按钮查看在线实例
#### 2.2.5 `null`与`undefined`的区别与联系
* `null`和`undefined`是很多场景下,可认为同义,几乎没有区别
console.log(null == undefined); // true // 都可以自动转为false console.log(!null ? true : false); // true console.log(!undefined ? true : false); // true
* 正因为如此相似,Google开发的`JavaScript`替代语言`Dart`放弃了`undefined`,只保留了`null`
* 即然如此, 为什么还要有`undefined`呢? (外国也有"既生瑜,何生亮"的事)
* 这主要是由历史原因造成的
* 1995年,`JavaScript`设计者`Brendan Eich(布兰登.艾希)`一开始只设计了`null`表示`无`
* 这个`null`也可像其它语言一样,自动转为`0`,但他觉得这还不够
* `null`在`java`中是一个对象,而`js`有原始类型和对象类型二大类,表示`无`的最好不是`对象`
* 所以这位仁兄设置了一个`undefined`
* 'Brendan Eich'是这样来区分的:
* `null`表示`无`的对象,转为数值时为`0`
* `undefined`表示`无`的原始值, 转为数值时为`NaN`
Number(undefined); // NaN 100 + undefined; // NaN
* 事实证明这样更混乱,目前`null`和`undefined`基本同义,只有细微差别
##### 2.2.5.1 null 的使用场景
`null`表示**没有对象**, 即这个地方就不应该有值,典型场景:
* 做为函数的参数, 表示该参数不是对象
* 做为对象原型连的终点(原型链后面会学到)
##### 2.2.5.2 undefined 的使用场景
`undefined`表示**缺少值**,即这里应该有一个值,但是未定义,典型场景:
* 变量被`var`声明了,但没有赋值,所以目前变量的值就是`undefined`,正等着初始化
* 调用函数时,应该提供的实际参数而没有提供,该参数值就自动等于`undefined`
* 对象中没有被初始化赋值的属性,该属性值默认就是`undefined`
* 函数没有返回值时(无`return`语句),默认会返回`undefined`
var i;
i // undefined
function f(x){console.log(x)}
f() // undefined
var o = new Object();
o.p // undefined
var x = f();
x // undefined---------------------------------------------------------------
### 2.3 布尔值
* 布尔值域只有`true`和`false`二个值,分别表示`真`和`假`
* 下列的运算符会返回布尔类型的值:
* 二元逻辑运算符: `&&`, `||`
* 前置一元素逻辑运算符: `!`
* 相等运算符: `==`, `===`, `!=`, `!==`
* 比较运算符: `>`,`>=`,`<`,`<=`
* 如果在某个位置上应该返回布尔值,那么引擎就是将该处表达式的运算结果自动转为布尔值
* 除了以下6个值之外, 全部转为`true`
* `undefined`
* `null`
* `false`
* `0`
* `NaN`
* `""`/`''` : (空字符串)
* 布尔值主要用于流程控制
if (!'') {console.log('空字符串')} // '空字符串'### 2.4 分号真的可有可无吗
* `JavaScript`语句是允许省略结尾处的`;`分号的,引擎会自动添加上
* 但是省略这个分号,有时会引发一些匪夷所思的事情,建议最好添加上
* 特别是在代码压缩时,如果没有分号,会保留原格式
* 具体是哪些场景下必须加分号,哪些场景下允许省略,建议看相关教程,此处略过
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js脚本的引入方式</title>
<link rel="stylesheet" href="style01.css">
</head>
<body>
<!-- 1.直接在元素的事件方法属性上写js代码 -->
<!-- onclick是click事件对应的方法,this默认指向当前元素对象,可以省略 -->
<h3 id="tips" onclick="alert(this.id)">JavaScript很好玩的</h3>
<h3 id="tips" onclick="alert(id)">JavaScript很好玩的</h3>
<!-- 在表单中,事件方法属性可以直接使用表单元素的name属性访问同一个form标签内的元素 -->
<form action="">
<input type="text" name="site" value="php中文网">
<button type="button" onclick="alert(site.value)">显示站点</button>
</form>
<!-- 更多情形下, 事件方法属性的值是一个JS函数(函数我们后面会专门讨论) -->
<form action="">
<input type="text" name="username" placeholder="用户名">
<button type="button" onclick="check(username)">验证</button>
</form>
<!-- 2.将js脚本写script标签中,仅限当前页面使用 -->
<script>
function check(username) {
// js中的注释写法: 单行
/*
该函数用来验证用户名是否为空
*/
if (username.value.length === 0) {
alert('用户名空空如也');
} else {
alert('验证通过');
}
}
</script>
<div id="ball"></div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
