基本语法

1.基本语法

本篇的主要内容如下：

编写位置
基本语法
数据类型
运算符
流程控制语句
方法（函数）
变量的作用域
对象
常用交互事件

编写位置

编写 JavaScript 脚本不需要任何特殊的软件，一个普通的文本编辑器和一个 Web 浏览器就足够编程使用。用 JavaScript 编写的代码必须通过 HTML/XHTML 文档才能执行。目前有两种方法可以调用 JavaScript。第一种方法是将 JavaScript 代码放到文档<head>标签中的<script>标签之间，代码如下所示:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script>
        alert("第一个javascript脚本")
    </script>
</head>
<body>
</body>
</html>

另一种方法是将 JavaScript 代码存为一个扩展名为 js 的独立文件。典型的做法是在文档的<head> 部分放置一个<script>标签，并把它的 src 属性指向该文件，代码如下所示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <script src="index.js"></script>
</head>
<body>
</body>
</html>

但最好的做法是将<script>标签放到 HTML 文档的最后，<body>结束标签之前，代码如下所示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
</head>
<body>
<div>全部内容</div>
<script>
    alert("第一个javascript脚本")
</script>
</body>
</html>

前面的代码中<script>标签没有包含传统的 type="text/javascript" 属性，是因为在 HTML5 规范中，script 属性默认是 text/javascript，所以可以省略，但是在 HTML4.01 和 XHTML1.0 规范中，type 属性是必须的。

基本语法

语言结构方面的各项规则即为语法，如同书面的人类语言，每种程序也都有自己的语法。JavaScript 的语法与 Java 和 C++ 语言十分类似。

1.语法结构

①JavaScript 程序使用 Unicode 字符集编写，它是一种区分大小写的语言，也就是说，在输入关键字、变量、函数名以及所有的标识符时，都必须采取一致的字母大小写格式。但是 HTML 并不区分大小写( XHTML 是区分大小写的)，由于其与 JavaScript 紧密相关，所以这一点很容易混淆。

②JavaScript 会忽略程序中记号之间的空格、制表符和换行符。可以在程序中任意使用空格、制表符和换行符，因此开发者可以采用整齐、一致的方式排版 JavaScript 代码，增加代码的可读性。

③JavaScript 中的简单语句后面通常都有分号(;)，就如同 C、C++和 Java 中的语句一样，这主要是为了分隔语句。但是如果语句放在不同的行中，就可以省去分号，具体代码如下所示：

var a = 1
var b = 3
var c = 6;var d = 9

注意：var 在此处就相当于我们 java 的 int ，JavaScript 里面所有类型都是 var。在 idea 开发中，使用 var 时会报警告，原因是 ES6 规范提出两种声明变量的方式 let const。let 主要用来解决 var 变量作用域提升问题，而 const 主要用来解决常量问题。如下代码在 java 中不可访问 c 变量，但是在 JavaScript 中可以，在开发中容易导致错误，所以增加了 let 解决这个问题。当把 var 换成 let 时会报错 c is not defined。其实在我们学过 java 的开发人员看来，使用 let 更像 java 的语法。

<script>
    if (true) {
        var c = 10;
    }
    console.info(c)//10
</script>

但是在开发工作中，省略分号并不是一个好的开发习惯，应该惯于使用分号进行编程。

④JavaScript 和 Java 一样，也支持 C++、C 型的注释。JavaScript 会把处于"//" 和一行结尾之间的任何文本都当作注释忽略掉。此外"/*"和"*/"之间的文本也会被当作注释，这个注释可以跨越多行，但是其中不能有嵌套的注释。

⑤JavaScript 的标识符与 java 语法一样。

数据类型

JavaScript 是一种弱类型语言，这意味着 Web 前端开发者可以在任何阶段改变变量的数据类型，而无需像强类型语言一样在声明变量的同时还必须同时声明变量的数据类型。比如说以下语句在强类型语句中是非法的，但是在 JavaScript 中却能够成功解析。

var age = "three";
age = 3;

接下来将简单地介绍 JavaScript 中允许使用的三种基本数据类型。

①字符串

字符串由零个或多个字符构成。字符包括(但不局限于)字母、数字、标点符号和空格。字符串必须包在引号里面，单引号或双引号都可以。JavaScript 可以随意地选用引号，但最好还是根据字符串所包含的字符来选择。即如果字符串包含双引号，就把整个字符串包含在单引号里面；如果包含单引号就把整个字符放在双引号里面。如下代码所示：

var mood = "don't ask";
var mod = '中国"飞人"勇夺金牌';

如果一个字符串中既有单引号又有双引号，那么这种情况下需要把单引号或双引号看作一个普通字符，而不是这个字符串的结束标志，这种情况下需要对这个字符进行转义，在 JavaScript 中用反斜线对字符串进行转义。

在开发工作中，为了养成一个良好的编程习惯，建议无论是使用双引号还是单引号来包裹字符串，都应在整个脚本中保持一致，以保证使用的规律性，如果在同一个脚本中无规律地使用双引号与单引号，代码将变得难以阅读。

②数值

如果想给一个变量赋一个数值，不用限定它必须是一个整数。JavaScript 允许使用带有小数点的数值，并且允许任意小数位，这样的数称为浮点数，数值主要数据类型如下所示：

var num = 33.5;
num = 88;
num = -6.78;

③布尔值

JavaScript 另外一种重要的数据类型是布尔类型。布尔数据只有两个可选值 true 或者 false。从某种意义上讲，为计算机设计程序就是与布尔值打交道。作为最基本的事实，所有的电子电路只能识别和使用布尔数据；电路中有电流或电路中没有电流。布尔值不是字符串，万万不能将布尔值用引号括起来。布尔值的 false 与字符串值 "false" 是完全不相关的两码事。

运算符

1.算术运算符 + - * / % ++ -- 除了/与 java 不同，该除结果为小数。其他用法和 java 相同。

2.赋值运算符 = += -= *= /= %=与 java 相同，这里就不再赘述。

练习：

1.乞丐乞讨：有一个乞丐，去天桥要钱

第一天要了 1 块钱
第二天要了 2 块钱
第三天要了 4 块钱
第四天要了 8 块钱

以此类推问题：乞丐干 10 天，收入是多少？

参考代码：

<script>
    var sum = 0;
    var temp = 1;
    for (var i = 0; i < 10; i++) {
        sum += temp;
        temp *= 2;
    }
    alert(sum)
</script>

流程控制语句

if switch while do-while for 三目运算符与 java 相同。

if 与 java 有所不同，很多时候不需要使用 ==null 判断。if 会自动判断并过滤值为 undefined（未定义）、null、空字符串。

<script>
    let id;//未定义
    if (id) {
        alert("not")
    }
    let id = undefined;//未定义
    if (id) {
        alert("not")
    }
    id = null;
    if (id) {
        alert("not")
    }
    id = "";
    if (id) {
        alert("not")
    }
    id = " ";
    if (id) {
        alert("yes")
    }
</script>

同时 JavaScript 里面增加了一个 for-in，for-in 一般用来遍历数组，用法如下：

<script>
    let arr = ["aa", "bb", "cc"];
    for (let i = 0; i < arr.length; i++) {
        console.info(arr[i]);
    }
    for (let i in arr) {
        console.info(arr[i])
    }
</script>

另外，break、continue 与 try-catch-finally 语句和用法和 java 一样，这里就不再赘述。

练习：使用 JavaScript 语法完成下面练习

1.阶乘和：编写一个 JavaScript 程序在控制台输出1！+2！+3！+……+10！的和。注意：8！=8*7*6*5*4*3*2*1

2.鸡兔同笼：上有 35 头，下有 90 足，问鸡兔各多少？

查考代码：

<script>
    let sum = 0;
    let out = 1;
    for (let i = 1; i <= 10; i++) {
        sum += out;
        out = 1;
        for (let j = i; j >= 1; j--) {
            out *= j;
        }
    }
    console.info("和为：", sum)
for (let i = 0; i <= 35; i++) {

//假设 i 就是鸡的数量，则兔的数量为：35-i

if ((i * 2 + (35 - i) * 4) == 90) {

console.info("鸡：", i);

console.info("兔：", (35 - i));

}

}

</script>

方法（函数）

如果需要多次使用同一段代码，可以把它们封装成一个函数，函数就是一组允许在你的代码里随时调用的语句，每个函数实际上就是一个短小的脚本。

作为一个良好的编程习惯，应该先对函数进行定义再调用它们。一个简单的函数定义代码如下：

function fun() {

console.info(123)

}

这个函数将会在控制台输出 123。现在如果想在自己的脚本中执行这一动作，可以随时用如下语句来执行这个函数。

fun();

函数的入参与 java 相同，只是省略了变量的类型，同时返回的类型也省略了。

function fun(i1, i2) {

return i1 + i2;

}

在 ES6 中为了简化代码引入箭头函数，如上面的方法可以简化为如下，调用时还是一样的使用 fun(12,14) 的方式调用。

var fun = (i1,i2)=>{return i1+i2}

注意：在方法没有定义形参数时，可以通过 arguments 获取方法的参数，arguments 是一个带索引的 json 对象。通过 [索引] 获取对应的参数。

<script>

function fun() {

console.info(arguments[0])//12

console.info(arguments[1])//45

}

fun(12, 45)

</script>

变量的作用域

变量既可以是全局的，也可以是局部的，全局变量与局部变量的区别就在于其作用域。
全局变量可以在脚本的任何位置被引用，其作用域为整个网页。
局部变量只存在于声明它的函数的内部，在函数的外部是无法引用它的，作用域仅为某个特定的函数。
因此，在函数中既可以使用全局变量，也可以使用局部变量。

可以通过 var 关键字明确地声明变量，如果在函数中使用了 var，那这个变量就会被视为一个局部变量，它只存在于这个函数的上下文中；反之，如果没有使用 var，那这个变量就被视为一个全局变量，如果脚本里已存在一个与之同名的全局变量，这个函数将会改变全局变量的值，其例子如下所示：

function f1(i, y) {

aa = 12;

return i + y;

}

var rs = f1(12, 15);

alert(aa)

对象

对象是一种非常重要的数据类型，对象是自包含的数据集合，包含在对象里的数据可以通过两种形式访问：属性和方法：属性是隶属于某个特定对象的变量：方法是只有某个特定对象才能调用的函数。

对象就是由一些属性和方法组合在一起而构成的一个数据实体，在 JavaScript 里，属性和方法都使用“点”语法来访问，其具体用法如下所示：

let user = {

name: "张三", age: 18, say: function () {

alert("我是：" + this.name)

}

}

console.info(user.name)

console.info(user.say())

在 ES6 中对象的属性和方法都提供了相应的简写。如下代码和上面的写法完全一样，但是方法最好就不要使用箭头函数（this 会出现问题）。

let name = "张三";

let age = 18;

let user = {

name,

age,

say() {

alert("我是：" + this.name)

}

}

console.info(user.name)

console.info(user.say())

在 ES6 中提出类 class 的语法，和 java 语法相似。类名使用首字母大写的驼峰命名（不强制）。

class Person {

constructor(name, age) {

this.name = name;

this.age = age;

console.info(name, age);

}

showPerson(){

console.info(this.name,this.age)

}

}
let person = new Person("张三", 12);

console.info(person.name);

console.info(person.age);

person.showPerson();

1.内置对象

在 JavaScript 中内置了一些对象，比如前面用到的数组。当我们使用 new 关键字去初始化一个数组时，其实就是在创建一个 Array 对象的新实例，具体代码如下所示：

var beatles = new Array();

Array 对象只是诸多 JavaScript 内建对象中的一种。其他的还包含 Math 对象、Date 对象，它们
分别提供了许多非常有用的方法供人们处理数值和日期值，比如，Math 对象的 round 方法可以把十进制数值舍入为一个与之最接近的整数，具体代码如下所示：

var num = 13.546;

var out = Math.round(num);

alert(out);

Date 对象可以用来存储和检索与特定日期和时间有关的信息。在创建 Date 对象的新实例时，
JavaScript 解释器将自动使用当前日期和时间对它进行初始化，具体代码如下所示：

var cd = new Date();

console.info(cd)

Date 对象提供了getDay() 、getHours()、getMonth() 等一系列方法，用来检索与特定日期有关的各种信息。

2.宿主对象

除了内置对象以外，还可以在 JavaScript 脚本里使用一些已经预先定义好的其他对象。这些对象不是由 JavaScript 语言本身提供而是由它的运行环境提供的，在 Web 应用中，这个环境就是浏览器，
由浏览器提供的预定义对象被称为宿主对象。

宿主对象包括 Form、Image 和 Element 等，可以通过这些对象获得关于网页上表单、图像和各
种表单元素等的信息，其中最重要的一个宿主对象便是 document 对象，在后续章节中将会介绍
document 对象。

常用交互事件

针对普通元素，常用的交互事件有如下几个：

1.onclick 鼠标点击

2.onmouseenter 鼠标进入

3.onmouseleave 鼠标离开

案例：

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Title</title>

</head>

<body>

<button onclick="_click()">点我有惊喜</button>

<div onmouseenter="_mouseenter()" onmouseleave="_mouseleave()">进来试试</div>

<script>

function _click() {

alert("惊喜！")

}

function _mouseenter() {

console.info("试试就试试")

}

function _mouseleave() {

console.info("下次再来")

}

</script>

</body>

</html>

针对表单元素，常用的交互事件有如下几个：

1.onfocus 获得焦点

2.onblur 失去焦点

3.oninput 文本内容发生变化

<input type="text" onfocus="_focus()" onblur="_blur()" oninput="_input()">

<script>

function _focus() {

console.info("激活了")

}

function _blur() {

console.info("失去焦点")

}

function _input() {

console.info("文本内容发生变化")

}

</script>

常用的交互事件并不局限于上面所述，去 W3C 上找几个有用的方法记录下来。

章节练习：（默写 30 分钟）

在页面创建 3 个按钮，内容分别为“题一“，“题二“....，点击时调用下面的方法。

1.方法1：在控制台打印 1~1000 之间所有能同时被 3，5，7 整除的整数。

2.方法2：创建一个数组存放全部学生的名字，点击“题二“按钮每次随机弹出（alert）一个学生，一直把所有的学生弹出完后弹出提示，已经没有学生可以弹出。

3.方法3：点击后弹出当前的系统时间，格式为 yyyy年MM月dd日HH:mm:ss

参考代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>章节练习</title>

<script>

function t1() {

for (var i = 0; i < 1000; i++) {

if (i % 3 == 0 && i % 5 == 0 && i % 7 == 0) {

console.info(i)

}

}

}
var arr = ["张三", "李四", "王二", "麻子"];
function t2() {

if (arr.length == 0) {

alert("已经没有学生可以弹出")

return;

}

var i = Math.floor(Math.random() * arr.length);

alert(arr[i]);

arr.splice(i, 1);

}
function t3() {

var date = new Date();

alert(date.getFullYear() + "年" + (date.getMonth() + 1) + "月" + date.getDate() + " " +

date.getHours() + ":" + date.getMinutes() + ":" + date.getSeconds())

}
</script>

</head>

<body>

<button onclick="t1()">题一</button>

<button onclick="t2()">题二</button>

<button onclick="t3()">题三</button>

</body>

</html>

posted @ 2021-09-25 22:46 柠檬色的橘猫阅读(248) 评论(0) 收藏举报

刷新页面返回顶部

柠檬色的橘猫

基本语法

1.基本语法

公告