JavaScript :语法 和 句法

一,语法

JavaScript特点:

  • JavaScript 是一门脚本语言。
  • JavaScript 是一种轻量级的编程语言。
  • JavaScript 是可插入 HTML 页面的编程代码。
  • JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。
  • JavaScript 很容易学习。

JavaScript 已经由 ECMA(欧洲电脑制造商协会)通过 ECMAScript 实现语言的标准化。

年份名称描述
1997ECMAScript 1第一个版本
1998ECMAScript 2版本变更
1999ECMAScript 3添加正则表达式 添加 try/catch
ECMAScript 4没有发布
2009ECMAScript 5添加 “strict mode”,严格模式,添加 JSON 支持
2011ECMAScript 5.1版本变更
2015ECMAScript 6添加类和模块
2016ECMAScript 7增加指数运算符 (**),增加 Array.prototype.includes

用法

HTML 中的脚本必须位于 标签之间。脚本可被放置在 HTML 页面的 和 部分中。

通常,我们需要在某个事件发生时执行代码,比如当用户点击按钮时。如果我们把 JavaScript 代码放入函数中,就可以在事件发生时调用该函数。

实例1:head中的script函数


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>head标签中script</title>
    <script>
        function myFunction() {
            document.getElementById("demo").innerHTML = "这是我的函数";
        }
    </script>
</head>
<body>
<h1>我的函数</h1>
<p id="demo">一段话</p>
<button type="button" onclick="myFunction()">这是函数</button>
</body>
</html>

实例2:body中的script函数


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>body中的script</title>
</head>
<body>
<h1>我的函数</h1>
<p id="demo">我的函数</p>
<button type="button" onclick="myFunction()">点击一下</button>
<script>
    function myFunction() {
        document.getElementById("demo").innerHTML = "这是我的函数"
    }
</script>
</body>
</html>

JavaScript也可以放在外部供调用,注意外部拓展名为.js。

实例3:外部调用JavaScript

外部调用.js


function myFunction() {
    document.getElementById('demo').innerHTML = "这是我的函数"
}

调用外部script


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>调用外部script</title>
</head>
<body>
<p id="demo">一段文字</p>
<button type="button" onclick="myFunction()">尝试一下</button>
<script src="外部脚本.js"></script>
</body>
</html>

输出

JavaScript 可以通过不同的方式来输出数据:

  • 使用 window.alert() 弹出警告框。
  • 使用 document.write() 方法将内容写到 HTML 文档中。
  • 使用 innerHTML 写入到 HTML 元素。
  • 使用 console.log() 写入到浏览器的控制台。

实例1:aler()弹窗输出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>alert输出</title>
</head>
<body>
<h1>alert输出</h1>
<script>
    window.alert(5 + 6)
</script>
</body>
</html>

实例2:document.write()输出

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>document.write输出</title>
</head>
<body>
<h1>document.write输出</h1>
<script>
    document.write(Date());
    document.write("Hello,Web!");
</script>
</body>
</html>

实例3:写到HTMl文档

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>写到HTMl文档</title>
</head>
<body>
<h1>写到HTMl文档</h1>
<script>
    function myFunction() {
        document.write("函数输出");
    }
</script>
<button onclick="myFunction()">点击这里</button>
</body>
</html>

实例4:使用 console.log() 写入到浏览器的控制台

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用console.log()写入到浏览器的控制台</title>
</head>
<body>
<h1>console.log()写入到浏览器的控制台</h1>
<script >
    a = 5;
    b = 6;
    c = a + b;
    console.log(c)
</script>
</body>
</html>

语法介绍

JavaScript 是一个脚本语言,它是一个轻量级,但功能强大的编程语言。

字面量

在编程语言中,一般固定值称为字面量。

  • 数字(Number)字面量:可以是整数或者是小数,或者是科学计数(e)。如3.14,5.88等。
  • 字符串(String)字面量:”可以使用单引号或双引号。如"Hello","Web"等
  • 表达式字面量:用于计算的固定值。3 + 2.2,3.14 * 2等。
  • 数组(Array)字面量:定义一个数组。如[1,2,3,4,5,6]。
  • 对象(Object)字面量:定义一个对象。如{firstName:“John”, lastName:“Doe”, age:50, eyeColor:“blue”}。
  • 函数(Function)字面量:定义一个函数。如function myFunction(a, b) { return a * b;}。

注意,在JavaScript中,语句需要加结束符“;”。

JavaScrip变量

在编程语言中,变量用于存储数据值。JavaScript 使用关键字var来定义变量, 使用等号来为变量赋值,变量之间可以相互操作:

var y = false                                     // 布尔值
var length = 16;                                  // 数字
var points = x * 10;                              // 数字计算
var lastName = "Johnson";                         // 字符串
var cars = ["Saab", "Volvo", "BMW"];              // 数组
var person = {firstName:"John", lastName:"Doe"};  // 对象字典

JavaScript函数

为了能够重复引用相同的功能,减少代码的书写和维护的方便,JavaScript提供函数功能,由关键字function引导:

function myFunc(a, b) {
    return a + b; // 返回a+b结果
}

JavaScript特点

相对其它语言,JavaScript具有下列特点:

  • JavaScript对大小写敏感。
  • JavaScript使用Unicode字符集。
  • JavaScript推荐使用驼峰命名法定义变量,命名避免关键字。
  • JavaScript属于弱类型语言,定义变量都是var关键字。

JavaScript关键字

1、delete:删除对象(而非构造方法或原型)的某个属性
function obj(id,name){
			this.id = id;
			this.name = name;
			this.getName = function(){
				return this.name;
			}
		}
		var objOne = new obj(1,"objOneName");
		var objTwo = new obj(2,"objTwoName");
		alert("objOne名字为:"+objOne.getName());//提示objOneName
		delete objTwo.name;
		alert("objOne名字为:"+objOne.getName());//提示objOneName
		alert("objTwo名字为:"+objTwo.getName());//提示undefined

注意:只能删除自身定义的公有属性,即"this.属性名"定义的属性,而不能删除私有属性或通过proptotype定义的公有属性(已实践)。此外可删除直接在对象上添加的属性,如var a = new Object();a.name = “name”;delete a.name;

2、throw 与 try…catch…finally:操作异常

JS 的几种具体异常类型(都继承自Error 异常类):

  • (1)、SyntaxError:语法错误,如代码中不小心按了个特殊符号;
  • (2)、ReferenceError:引用错误,常见提示:Uncaught ReferenceError: a is not defined;
  • (3)、RangeError:范围错误,常见对数组的操作等;
  • (4)、TypeError:类型错误,如:xxx is not a function;
  • (5)、URLError:与url相关参数不正确,主要是encodeURI()、decodeURI()、encodeURIComponent()、decodeURIComponent()、escape()和unescape()这六个函数;
  • (6)、EvalError:全局函数eval 执行错误(注:eval() 函数可计算某个字符串,并执行其中的的 JavaScript 代码)。

throw 可抛出自定义对象,并可通过catch捕获:

<script>  
      
        function CommonException(message, code)  
        {  
            this.message = message;  
            this.code = code;  
        }  
      
        try  
        {  
            var exception = new CommonException('您的代码出错啦', 1);  
      
            throw exception;  
      
            alert('这地方的代码将不会执行到');  
        }  
        catch (e) {  
            alert(e.message);  
            alert(e.code)  
        }  
      
    </script> 

3、in:与for 一起使用用于遍历对象的属性名

(1)、使用点一:在js中,for……in用于遍历一个对象的属性,把对象的属性名和属性值都提出来


var obj = {
    "key1":"value1",
    "key2":"value2",
    "key3":"value3"
};
 
//属性名
function EnumaKey(){
    for(var key in obj ){
        alert(key);
    }
}
 
//属性值
function EnumaVal(){
    for(var key in obj ){
        alert(obj[key]);
    }
}

重点:在使用for in遍历对象时候,对象有一个重要的方法:hasOwnProperty()。该方法可以在遍历对象属性的时候可以过滤掉从原型链上下来的属性

(2)、使用点二:判断某个对象是否具有某个属性

对于一般的对象属性需要用字符串指定属性的名称 如:

var mycar = {make: "Honda", model: "Accord", year: 1998};
"make" in mycar  // returns true
"model" in mycar // returns true

对于数组对象,元素值对应的属性名为数字类型,如:


// Arrays
var trees = new Array("redwood", "bay", "cedar", "oak", "maple");
0 in trees        // returns true
3 in trees        // returns true
6 in trees        // returns false
"bay" in trees    // returns false (you must specify the index number,
                  // not the value at that index)
"length" in trees // returns true (length is an Array property)

注意:in 的右边必须是一个对象, 如:你可以指定一个用String构造器生成的,但是不能指定字符串直接量的形式:

var color1 = new String("green");
"length" in color1 // returns true
var color2 = "coral";
"length" in color2 // generates an error (color is not a String object)

此外,如果你使用delete操作符删除了一个属性,再次用in检查时,会返回false;

如果你把一个属性值设为undefined,但是没有使用delete操作符,使用in检查,会返回true。

(参考:http://www.cnblogs.com/renxiaoren/p/5942767.html)

4、instanceof :返回的是布尔值,而typeof 返回的是几种数据类型的字符串值。
5、with:引用一个对象,使访问属性与方法更加方便(只能访问与修改属性,不能增加属性与方法)
	function obj(id,name){
			this.id = id;
			this.name = name;
			this.getName = function(){
				return this.name;
			}
		}
		var myObj = new obj(3,"three");
		with(myObj){
			alert(id);//提示3
			alert(name);//提示three
			alert(getName());//提示three
			id = 4;
			alert(id);//提示4
		}
		alert(myObj.id);//提示4,说明with中是通过引用方式访问的,而不是复制值的方式

二、JavaScript 所有保留字

保留字是为以后js的扩展用的,不能作为普通变量名。列表:


abstract
boolean
byte
char
class
const
debugger
double
enum
export
extends
final
float
goto
implements
import
int
interface
long
native
package
private
protected
public
short
static
super
synchronized
throws
transient
volatile

JavaScript注释(与Java相同)

// 这是代码:单句注释,在编辑器一般是ctrl + L键。

/* 这是代码 */:多行注释,在编辑器一般是ctrl + shift + L键。

语句

JavaScript语句向浏览器发出的命令,告诉浏览器该做什么。下面的JavaScript语句向id=“demo"的 HTML元素输出文本"Hello World!” :

document.getElementById("demo").innerHTML = "Hello World!";

与Python不同的是,JavaScript代码块都是在大括号中的,这点像极了Java。

Java标识符

常见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中空格的是要留意用法的,切勿混谈。在JavaScript中,下面两句话是一样的:


var a = 10;
var b=10;

与Python相似,JavaScript也是脚本语言,属于解释型。

对象

定义对象

任何事物都是对象,具有相同特点的事物中抽象出来的一个特点实例。如人类中的小明。

在JavaScript中,对象就是是属性变量的容器,类似Python中的字典,Java中的哈希映射,其中定义了对象的属性。


var people = {
    firstName: "Mike",
    lastName: "Smith",
    age: "18",
    address: "Beijing",
    job: "Student"
};

以上就是对象定义,当然你也可以写作一行,我这样是为了美观,以后也强烈大家这样写。

访问对象属性

可以说 “JavaScript 对象是变量的容器”。但是,我们通常认为 “JavaScript 对象是键值对的容器”。键值对通常写法为key : value(键与值以冒号分割),键值对在JavaScript对象通常称为对象属性。我们访问属性也是通过万能的" . "(大部分语言都是用的这个)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是网站</title>
</head>
<body>
<h1>访问类属性</h1>
<!--下面语句一定要在script之前-->
<p id="demo"></p>
<script>
    var people = {
        firstName: "Mike",
        lastName: "Smith",
        age: "18",
        address: "Beijing",
        job: "Student"
    };
    document.getElementById("demo").innerHTML =
        people["firstName"] + "." + people.lastName;
</script>
</body>
</html>

两种访问方式,你可以使用 对象名 .property 或 对象名.[“property”] 。


const data = {
  one: 'first',
  two: 'second',
  three: 'third'
}
 
for (var i in data) {
  console.log('键:' + i)
  console.log('值:' + data[i])
}

结果是:

在这里插入图片描述

函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。当调用该函数时,会执行函数内的代码。可以在某事件发生时直接调用函数(比如当用户点击按钮时),并且可由 JavaScript 在任何位置进行调用。

参数与返回值
在调用函数时,您可以向其传递值,这些值被称为参数,参数个数不限。

function myFunction(var1,var2)
{
代码
}

参数在调用时,应该严格按照其顺序传参,如下所示:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>这是一个JavaScript网站</title>
</head>
<body>
<h1>函数参数传递问题</h1>
<p>点击下面按钮调用</p>
<button onclick="myFunc('Mike','18','Beijing')">点击这里</button>
<script>
    function myFunc(name, age, address) {
        alert("My name is " + name + ", age is " + age + " and my home is in " + address);
    }
</script>
</body>
</html>

JavaScript函数允许有返回值,返回关键字为return。当函数返回值后,函数将停止执行,在return后面的语句将不会被执行。

实例:计算两个数的乘积并返回结果


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript网站</title>
</head>
<body>
<h1>计算两个数的值返回</h1>
<p id="demo"></p>
<script>
    function myFunc(a, b) {
        return a * b;
    }
 
    document.getElementById("demo").innerHTML = myFunc(3, 4);
</script>
</body>
</html>

变量

JavaScript变量分为两种:

  • 全局变量:在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。
  • 局部变量:在JavaScript函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它。
    当我们向未声明的JavaScript变量分配值时,该变量将被自动作为window的一个属性。如下列语句:
name = "Mike";

将声明window的一个属性name。非严格模式下给未声明变量赋值创建的全局变量,是全局对象的可配置属性,可以删除。如:

var var1 = 1; // 不可配置全局属性
var2 = 2; // 没有使用 var 声明,可配置全局属性
 
console.log(this.var1); // 1
console.log(window.var1); // 1
 
delete var1; // false 无法删除
console.log(var1); //1
 
delete var2; 
console.log(delete var2); // true
console.log(var2); // 已经删除 报错变量未定义

事件

描述

HTML事件是发生在HTML元素上的事情。当在 HTML 页面中使用JavaScript时, JavaScript可以触发这些事件。

HTML事件可以是浏览器行为,也可以是用户行为。以下是HTM 事件的实例:

  • HTML 页面完成加载
  • HTML input 字段改变时
  • HTML 按钮被点击

通常,当事件发生时,你可以做些事情。在事件触发时JavaScript可以执行一些代码。HTML元素中可以添加事件属性,使用JavaScript代码来添加HTML元素。

  • 单引号: <some-HTML-element some-event=‘JavaScript 代码’>
  • 双引号: <some-HTML-element some-event=“JavaScript 代码”>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript事件</title>
</head>
<body>
<h1>JavaScript事件处理两种方式</h1>
<p id="demoOne"></p>
<button onclick="getElementById('demoOne').innerHTML=Date()">点击查看时间1</button>
<p id="demoTwo"></p>
<button onclick="this.innerHTML=Date()">点击查看时间2</button>
</body>
</html>

JavaScript通常是多行代码,比较差常见的就是通过事件属性调用。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript事件</title>
</head>
<body>
<h1>JavaScript事件之属性调用</h1>
<p>点击执行<em>myFunc()</em>函数</p>
<button onclick="myFunc()">点击这里</button>
<p id="one"></p>
<script>
    function myFunc() {
        document.getElementById("one").innerHTML = Date();
    }
</script>
</body>
</html>

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值