javascript基础语法-2019年1月16日 20:00 - 作业

Home > List of blog posts > javascript基础语法-2019年1月16日 20:00

Blogger Information

Blog 22

fans 0

comment 0

visits 13131

Special Recommendation

More>

Related recommendations

实例

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>

运行实例 »

点击 "运行实例" 按钮查看在线实例

Correction status：Uncorrected

Teacher's comments：

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

关于DOM

2019-01-21 09:01:57