JavaScript极简入门教程(一):基础篇


Posted in Javascript onOctober 25, 2014

阅读本文需要有其他语言的编程经验。

开始学习之前

大多数的编程语言都存在好的部分和差的部分。本文只讲述 JavaScript 中好的部分,这是因为:

1.仅仅学习好的部分能够缩短学习时间
2.编写的代码更加健壮
3.编写的代码更加易读
4.编写的代码更加易于维护

弱类型和强类型

通常来说,越早的修复错误,为之付出的代价就越小。强类型语言的编译器可以在编译时检查某些错误。而 JavaScript 是一门弱类型语言,其解释器无法检查类型错误,但实践表明:

1.强类型能够避免的错误并不是那些关键性错误
2.弱类型能够带来灵活性,也无需背上强类型的包袱

JavaScript 相关标准

ECMA-262 标准定义了语言 ECMAScript。我们所熟知的 JavaScript 和 ActionScript 都是基于 ECMAScript 的。目前主流使用 ECMA-262 第五版,Google 的 V8 引擎就是对此的实现。

Hello JavaScript

JavaScript 是一门脚本语言,需要解释器解释执行。你可以在浏览器中解释执行 JavaScript 或者直接使用 node.js,node.js 整合了 Google 的 V8 JavaScript 引擎。由于 node.js 使用非常方便,由此,这里我使用 node.js 来解释执行 JavaScript。现在看第一个 JavaScript 程序:

// test.js

console.log("Hello JavaScript");

执行此程序:

node test.js

语法

注释

JavaScript 使用和 C++ 相同的注释方式,// 用于单行注释,/* */ 用于多行注释。

数字类型

JavaScript 仅有一种数字类型,也就是 64 位浮点数。数字类型有两个特殊的值 NaN 和 Infinity,NaN 的含义为 not a number(不是一个数),使用函数 isNaN 检查是否为 NaN,值 Infinity 表示无穷大。在 Math 对象中,有一组操作数字的方法,例如:Math.floor 方法用于向下取整。

字符串

字符串 literal 可以被包裹在单引号或者双引号中,转义字符使用 \(和其他很多语言没有什么不同)。JavaScript 中每个字符都是两个字节,其使用 Unicode 字符集。字符串有一个 length 属性:

"Hello".length // 值为 5,注意不是 "Hello".length()

字符串是不可以改变的(和 Lua 一样),除了这里说的 length 属性,还有一些方法,例如:

'cat'.toUpperCase() === 'CAT'

语句

var 语句用于声明局部变量,否则变量为全局变量,未初始化的变量的值为 undefined:

function f() {

    var localVar = 123;

    globalVar = 456;

    var i; // i 的值为 undefined

};

 

f();

 

console.log(globalVar); // ok

console.log(localVar); // 错误,localVar 没有被定义

由 {} 包裹的一组语句被叫做语句块(Block),和其他语言不同的是,JavaScript 中的函数会而块不会创建新的作用域,例如:

{

    var v = 123;

}

console.log(v); // ok

if 语句

if (expression)

    statement

或者

if (expression)

    statement1

else

    statement2

或者

if (expression1)

    statement1

else if (expression2)

    statement2

else if (expression3)

    statement3

else

    statement4

if 语句通过判断表达式的值为真或假来决定执行或者跳过某些语句。在 JavaScript 中以下值为假(其他值均为真):

1.false
2.null
3.undefined
4.空字符串
5.0
6.NaN

if 中的 statement 可以是一个语句,也可以是一个语句块。

switch 语句

switch (n) {

    case 1: // 如果 n 等于 1

    // 执行代码块

    break;

    case 2: // 如果 n 等于 2

    // 执行代码块

    break;

    default: // 如果 n 不为 1 也不为 2

    // 执行代码块

    break;

}

这里的 break 用于退出循环语句或者 switch 语句。在 JavaScript 中,比较两个值是否相等有两个操作符:

1.==(对应 != 操作符),相等,两个操作数类型不同时,此运算符尝试操作数类型转换后再进行比较,例如:

var x = 1;

x == 1; // true

x == "1"; // true

2.===(对应 !== 操作符),完全相等,比较两个操作数,不进行操作数类型转换,例如:

var x = 1;

x === 1; // true

x === "1"; // false

需要注意的是 NaN 和任何值都不相等,如果 x 为 NaN,那么 x !== x(仅对 NaN 成立),我们可以这样实现 isNaN 函数:

function isNaN(n) {

    return n !== n;

}

上面 switch 语句,转换为 if 语句为:

if (n === 1)

    // ...

else if (n === 2)

    // ...

else

    // ...

while 和 do-while 语句

while (expression)

    statement

如果 expression 为真则重复执行 statement 直到 expression 为假。

do

    statement

while (expression);

类似 while 循环,只是先执行 statement,然后再检查条件 expression。

for 语句

for (initialize ; test ; increment)

    statement

首先 initialize 被执行一次(常用来初始化循环变量),然后进行 test 条件测试(常用来测试循环变量),如果 test 条件为假则停止循环,否则执行 statement,然后执行 increment(常用来更新循环变量),接着又进行 test 条件测试,如此循环执行下去。使用范例:

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

    console.log(i);

}

for 的另外一种形式被用于枚举一个对象的所有属性名:

for (variable in object)

    statement

范例:

var obj = {

    a: 1,

    b: 2,

    c: 3

};

 

for (var name in obj)

    console.log(name);

需要注意的是,我们通过 hasOwnProperty 方法来检查属性名是该对象的,还是从原型链(prototype chain,prototype 会在 下一篇 中介绍)中找到的:
for (var in obj) {

    if (obj.hasOwnProperty(var)) {

        // ...

    }

}

return 语句

return 语句用于让函数返回一个值,如果函数没有显式的使用 return,那么返回 undefined:

function f() { }

var v = f(); // v === undefined

?: 条件操作符(JavaScript 中唯一的一个三元操作符)
?: 条件操作符在很多编程语言中都存在,在第一个操作数为真时,操作符返回第二个操作数的值,否则返回第三个操作数的值,使用范例:

function abs() {

    return x > 0 ? x : -x;

}

typeof 操作符

typeof 操作符用于获取变量的类型,其返回值包括:

1.'number'
2.'string'
3.'boolean'
4.'undefined'
5.'function'
6.'object'

特别的 typeof null 返回的结果是 'object'。关于 typeof 的范例:

var a = typeof 'hello'; // a === 'string'

var b = typeof null; // b === 'object'

+ 操作符

+ 操作符在 JavaScript 中可以用于加法运算,也可以用于字符串连接:

var message = 'hello' + 'world'; // message === 'helloworld'

&& 和 || 运算符

&& 操作符在第一个操作数为假时返回第一个操作数的值,否则返回第二个操作数的值
|| 操作符在第一个操作数为真时返回第一个操作数的值,否则返回第二个操作数的值

var a = 1 && true; // a === true

var b = 1 || false; // b === 1

|| 的一个习惯用法:

name = name || 'unknown'; // 为 name 设定默认值 'unknown'
Javascript 相关文章推荐
弹出广告特效(一个IP只弹出一次)的代码
Jul 27 Javascript
在网页里看flash的trace数据的js类
Jan 10 Javascript
jQuery实战之品牌展示列表效果
Apr 10 Javascript
js获取指定的cookie的具体实现
Feb 20 Javascript
javascript发送短信验证码实现代码
Nov 12 Javascript
JS实现随页面滚动显示/隐藏窗口固定位置元素
Feb 26 Javascript
学习Bootstrap滚动监听 附调用方法
Jul 02 Javascript
浅谈JSON.stringify()和JOSN.parse()方法的不同
Aug 29 Javascript
JavaScript实现经典排序算法之插入排序
Dec 28 Javascript
详解vue-cil和webpack中本地静态图片的路径问题解决方案
Sep 27 Javascript
浅谈Vue SSR 的 Cookies 问题
Nov 20 Javascript
vue项目实现记住密码到cookie功能示例(附源码)
Jan 31 Javascript
上传图片预览JS脚本 Input file图片预览的实现示例
Oct 23 #Javascript
实用框架(iframe)操作代码
Oct 23 #Javascript
form.submit()不能提交表单的原因分析
Oct 23 #Javascript
Google Maps API地图应用示例分享
Oct 23 #Javascript
深入分析JQuery和JavaScript的异同
Oct 23 #Javascript
jquery实现导航固定顶部的效果仿蘑菇街
Oct 22 #Javascript
用jquery模仿的a的title属性的例子
Oct 22 #Javascript
You might like
php中批量修改文件后缀名的函数代码
2011/10/23 PHP
php导出word文档与excel电子表格的简单示例代码
2014/03/08 PHP
jquery validate在ie8下的bug解决方法
2013/11/13 Javascript
js获取当前地址 JS获取当前URL的示例代码
2014/02/26 Javascript
javascript的propertyIsEnumerable()方法使用介绍
2014/04/09 Javascript
js控制文本框输入的字符类型方法汇总
2015/06/19 Javascript
用JS生成UUID的方法实例
2016/03/30 Javascript
js拖拽功能实现代码解析
2016/11/28 Javascript
一句jQuery代码实现返回顶部效果(简单实用)
2016/12/28 Javascript
详谈js对url进行编码和解码(三种方式的区别)
2017/08/16 Javascript
JS实现遍历不规则多维数组的方法
2018/03/21 Javascript
使用vue点击li,获取当前点击li父辈元素的属性值方法
2018/09/12 Javascript
详解js静态检查工具eslint配置文件
2018/11/23 Javascript
jquery 回调操作实例分析【回调成功与回调失败的情况】
2019/09/27 jQuery
Vue3.0 响应式系统源码逐行分析讲解
2019/10/14 Javascript
JS中的const命令你真懂它吗
2020/03/08 Javascript
JavaScript实现手机号码 3-4-4格式并控制新增和删除时光标的位置
2020/06/02 Javascript
vuex 多模块时 模块内部的mutation和action的调用方式
2020/07/24 Javascript
[04:03][TI9趣味短片] 小鸽子茶话会
2019/08/20 DOTA
Python判断值是否在list或set中的性能对比分析
2016/04/16 Python
itchat和matplotlib的结合使用爬取微信信息的实例
2017/08/25 Python
python ansible服务及剧本编写
2017/12/29 Python
python基础之包的导入和__init__.py的介绍
2018/01/08 Python
Python3用tkinter和PIL实现看图工具
2018/06/21 Python
Python3 Click模块的使用方法详解
2020/02/12 Python
jupyter notebook实现显示行号
2020/04/13 Python
详解CSS3中使用gradient实现渐变效果的方法
2015/08/18 HTML / CSS
用HTML5中的Canvas结合公式绘制粒子运动的教程
2015/05/08 HTML / CSS
黄河象教学反思
2014/02/10 职场文书
办公室综合文员岗位职责范本
2014/02/13 职场文书
最美乡村医生事迹材料
2014/06/02 职场文书
党员群众路线教育实践活动剖析材料
2014/10/10 职场文书
西湖英语导游词
2015/02/06 职场文书
居安思危观后感
2015/06/11 职场文书
用golang如何替换某个文件中的字符串
2021/04/25 Golang
Python并发编程实例教程之线程的玩法
2021/06/20 Python