javascript_01

来源：互联网发布：八千湘女嫁新疆知乎编辑：程序博客网时间：2024/06/01 08:55

廖雪峰

网景公司
在静态HTML页面上添加一些动态效果

快速入门

JavaScript代码可以直接嵌在网页的任何地方，不过通常我们都把JavaScript代码放到中：

<html><head>  <script>    alert('Hello, world');  </script></head><body>  ...</body></html>

由<script>...</script>包含的代码就是JavaScript代码，它将直接 被浏览器执行。
把JavaScript代码放到一个单独的 .js文件，然后在HTML中通过<script src="..."></script> 引入这个文件：

<html><head>  <script src="/static/js/abc.js"></script></head><body>  ...</body></html>

这样，/static/js/abc.js就会被浏览器执行。并且多个页面可以各自引用同一份.js文件。

在同一个页面中引入多个.js文件，还可以在页面中多次编写<script> js代码... </script>，浏览器按照 顺序依次执行。

<script>标签还设置了一个 type属性：

<script type="text/javascript">   ...</script>

是没有必要的，因为默认的type就是JavaScript，所以不必显式地把type指定为JavaScript。

如何运行JavaScript

要让浏览器运行JavaScript，必须先有一个HTML页面，在HTML页面中引入JavaScript，然后，让 浏览器加载该HTML页面，就可以执行JavaScript代码。

以file://开头的地址无法执行如联网等JavaScript代码，需要架设一个Web服务器，然后以http://开头的地址来正常执行所有JavaScript代码。

alert('hello,world');

调试

怎么在浏览器中调试JavaScript代码呢？

安装Google Chrome浏览器
打开一个网页，然后点击菜单“查看(View)”-“开发者(Developer)”-“开发者工具(Developer Tools)”，浏览器窗口就会一分为二，下方就是开发者工具：

查看一个变量的内容
Console中输入console.log(a);，回车后显示的值就是变量的内容。

需要在Console运行测试代码

基本语法

每个语句以;结束，语句块用{...}
不强制要求在每个语句的结尾加;
浏览器中负责执行JavaScript代码的引擎会自动在每个语句的结尾补上;。

完整的赋值语句：
var x = 1;

一行代码是一个字符串，但仍然可以视为一个完整的语句：
'Hello, world';

下面的一行代码包含两个语句，每个语句用;表示语句结束：
var x = 1; var y = 2; // 不建议一行写多个语句!

语句块
是一组语句的集合
判断成立，将执行{…}中的所有语句：

if (2 > 1) {    x = 1;    y = 2;    z = 3;}

{...}内的语句具有缩进，通常是4个空格
不强制缩进

{...}还可以嵌套，形成层级结构：

if (2 > 1) {    x = 1;    y = 2;    z = 3;    if (x < y) {        z = 4;    }    if (x > y) {        z = 5;    }}

遇到这种情况，需要把部分代码抽出来，作为函数来调用，这样可以减少代码的复杂度

注释

以//开头直到行末的字符被视为行注释
/*...*/把多行字符包裹起来

基本语法

阅读: 330574
语法

JavaScript的语法和Java语言类似，每个语句以;结束，语句块用{…}。但是，JavaScript并不强制要求在每个语句的结尾加;，浏览器中负责执行JavaScript代码的引擎会自动在每个语句的结尾补上;。

注意：让JavaScript引擎自动加分号在某些情况下会改变程序的语义，导致运行结果与期望不一致。在本教程中，我们不会省略;，所有语句都会添加;。

例如，下面的一行代码就是一个完整的赋值语句：

var x = 1;
下面的一行代码是一个字符串，但仍然可以视为一个完整的语句：

‘Hello, world’;
下面的一行代码包含两个语句，每个语句用;表示语句结束：

var x = 1; var y = 2; // 不建议一行写多个语句!
语句块是一组语句的集合，例如，下面的代码先做了一个判断，如果判断成立，将执行{…}中的所有语句：

if (2 > 1) {
x = 1;
y = 2;
z = 3;
}
注意花括号{…}内的语句具有缩进，通常是4个空格。缩进不是JavaScript语法要求必须的，但缩进有助于我们理解代码的层次，所以编写代码时要遵守缩进规则。很多文本编辑器具有“自动缩进”的功能，可以帮助整理代码。

{…}还可以嵌套，形成层级结构：

if (2 > 1) {
x = 1;
y = 2;
z = 3;
if (x < y) {
z = 4;
}
if (x > y) {
z = 5;
}
}
JavaScript本身对嵌套的层级没有限制，但是过多的嵌套无疑会大大增加看懂代码的难度。遇到这种情况，需要把部分代码抽出来，作为函数来调用，这样可以减少代码的复杂度。

注释

以//开头直到行末的字符被视为行注释，注释是给开发人员看到，JavaScript引擎会自动忽略：

// 这是一行注释
alert(‘hello’); // 这也是注释
另一种块注释是用/…/把多行字符包裹起来，把一大“块”视为一个注释：

大小写

JavaScript严格区分大小写

数据类型和变量

不同的数据，需要定义不同的数据类型。在JavaScript中定义了以下几种数据类型：
Number
JavaScript 不区分整数和浮点数，统一用Number表示

123; // 整数1230.456; // 浮点数0.4561.2345e3; // 科学计数法表示1.2345x1000，等同于1234.5-99; // 负数NaN; // NaN表示Not a Number，当无法计算结果时用NaN表示Infinity; // Infinity表示无限大，当数值超过了JavaScript的Number所能表示的最大值时，就表示为Infinity

Number可以直接做 四则运算，规则和数学一致：

1 + 2; // 3(1 + 2) * 5 / 2; // 7.52 / 0; // Infinity0 / 0; // NaN10 % 3; // 110.5 % 3; // 1.5

%是求余运算。

字符串
字符串是以单引号’或双引号”括起来的任意文本

布尔值
只有true、false两种值

2 > 1; // 这是一个true值2 >= 3; // 这是一个false值

&&运算是与运算

||运算是或运算

!运算是非运算，它是一个单目运算符

比较运算符

阅读全文

0 0