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 相关文章推荐
javascript 另一种图片滚动切换效果思路
Apr 20 Javascript
jQuery获取样式中的背景颜色属性值/颜色值
Dec 17 Javascript
JS 屏蔽键盘不可用与鼠标右键不可用的方法
Nov 18 Javascript
使用phantomjs进行网页抓取的实现代码
Sep 29 Javascript
基于jPlayer三分屏的制作方法
Dec 21 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
Mar 21 Javascript
javaScript实现滚动条事件详解
Mar 24 Javascript
JavaScript数组排序reverse()和sort()方法详解
Dec 24 Javascript
Node.js实现注册邮箱激活功能的方法示例
Mar 23 Javascript
微信小程序使用wxParse解析html的方法教程
Jul 06 Javascript
node版本管理工具n包使用教程详解
Nov 09 Javascript
vue自定义组件实现双向绑定
Jan 13 Vue.js
上传图片预览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 读取大文件的X行到Y行内容的实现代码
2013/06/24 PHP
PHP实现通过Luhn算法校验信用卡卡号是否有效
2015/03/23 PHP
浅析PHP中的i++与++i的区别及效率
2016/06/15 PHP
PHP递归获取目录内所有文件的实现方法
2016/11/01 PHP
Bootstrap+PHP实现多图上传功能实例详解
2018/04/08 PHP
多个iframe自动调整大小的问题
2006/09/18 Javascript
javascript让setInteval里的函数参数中的this指向特定的对象
2010/01/31 Javascript
用Javascript评估用户输入密码的强度(Knockout版)
2011/11/30 Javascript
chrome下img加载对height()的影响示例探讨
2014/05/26 Javascript
jQuery获取对象简单实现方法小结
2014/10/30 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
2015/03/31 Javascript
谈一谈javascript中继承的多种方式
2016/02/19 Javascript
JavaScript实现的微信二维码图片生成器的示例
2016/10/26 Javascript
jQuery插件HighCharts绘制2D带Label的折线图效果示例【附demo源码下载】
2017/03/08 Javascript
基于js实现复制内容到操作系统粘贴板过程解析
2019/10/11 Javascript
js实现橱窗展示效果
2020/01/11 Javascript
[00:35]可解锁地面特效
2018/12/20 DOTA
通过python下载FTP上的文件夹的实现代码
2013/02/10 Python
python线程池的实现实例
2013/11/18 Python
python后端接收前端回传的文件方法
2019/01/02 Python
Python文件打开方式实例详解【a、a+、r+、w+区别】
2019/03/30 Python
关于Python 常用获取元素 Driver 总结
2019/11/24 Python
django-利用session机制实现唯一登录的例子
2020/03/16 Python
15个应该掌握的Jupyter Notebook使用技巧(小结)
2020/09/23 Python
Html5之title吸顶功能
2018/06/04 HTML / CSS
Shopee马来西亚:随拍即卖,最佳行动电商拍卖平台
2017/06/05 全球购物
英国知名化妆品网站:Revolution Beauty(原TAM Beauty)
2018/02/28 全球购物
美国男士和女士奢侈品折扣手表购物网站:Certified Watch Store
2018/06/13 全球购物
室内设计自我鉴定
2013/10/15 职场文书
企业给企业的表扬信
2014/01/13 职场文书
关于毕业的中学校园广播稿
2014/01/26 职场文书
小学英语教学反思
2014/01/30 职场文书
外贸专业求职信
2014/03/09 职场文书
施工现场安全管理制度
2015/08/05 职场文书
文案策划岗位个人自我评价(范文)
2019/08/08 职场文书
使用 CSS 构建强大且酷炫的粒子动画效果
2022/08/14 HTML / CSS