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 AOP 实现ajax回调函数使用比较方便
Nov 20 Javascript
jquery next nextAll nextUntil siblings的区别介绍
Oct 05 Javascript
Firefox中使用outerHTML的2种解决方法
Jun 07 Javascript
基于BootStrap Metronic开发框架经验小结【九】实现Web页面内容的打印预览和保存操作
May 12 Javascript
JS中常用的正则表达式
Sep 29 Javascript
JavaScript实现大图轮播效果
Jan 11 Javascript
微信小程序 slider的简单实例
Apr 19 Javascript
Angular6 写一个简单的Select组件示例
Aug 20 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
Aug 24 Javascript
小程序图片长按识别功能的实现方法
Aug 30 Javascript
微信小程序自定义导航栏实例代码
Apr 05 Javascript
使用Ajax实现无刷新上传文件
Apr 12 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通过隐藏表单控件获取到前两个页面的url
2014/09/09 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2020/01/22 PHP
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
2010/06/12 Javascript
CodeMirror2 IE7/IE8 下面未知运行时错误的解决方法
2012/03/29 Javascript
jquery 操作DOM的基本用法分享
2012/04/05 Javascript
js遍历、动态的添加数据的小例子
2013/06/22 Javascript
JS实现自动定时切换的简洁网页选项卡效果
2015/10/13 Javascript
基于javascript代码检测访问网页的浏览器呈现引擎、平台、Windows操作系统、移动设备和游戏系统
2015/12/03 Javascript
js以分隔符分隔数组中的元素并转换为字符串的方法
2016/11/16 Javascript
JS实现图片高斯模糊切换效果的焦点图实例
2017/01/21 Javascript
Bootstrap进度条学习使用
2017/02/09 Javascript
vue中将网页打印成pdf实例代码
2017/06/15 Javascript
Vue列表页渲染优化详解
2017/07/24 Javascript
详解ECMAScript2019/ES10新属性
2019/12/06 Javascript
JavaScript修改注册表实例代码
2020/01/05 Javascript
js String.prototype.trim字符去前后空格的扩展
2020/08/23 Javascript
JavaScript实现矩形块大小任意缩放
2020/08/25 Javascript
VUE 项目在IE11白屏报错 SCRIPT1002: 语法错误的解决
2020/09/27 Javascript
vue 使用 v-model 双向绑定父子组件的值遇见的问题及解决方案
2021/03/01 Vue.js
[00:14]PWL:老朋友Mushi拍VLOG与中国玩家问好
2020/11/04 DOTA
Python记录详细调用堆栈日志的方法
2015/05/05 Python
python3实现猜数字游戏
2020/12/07 Python
在python image 中实现安装中文字体
2020/05/16 Python
Pytorch 卷积中的 Input Shape用法
2020/06/29 Python
html5写一个BUI折叠菜单插件的实现方法
2019/09/11 HTML / CSS
加拿大票务网站:Ticketmaster加拿大
2017/07/17 全球购物
德国便宜的宠物店:Brekz.de
2020/10/23 全球购物
如何在Cookie里面保存Unicode和国际化字符
2013/05/25 面试题
高级护理专业毕业生推荐信
2013/12/25 职场文书
给女儿的表扬信
2014/01/18 职场文书
高三体育教学反思
2014/01/29 职场文书
民族团结先进集体事迹材料
2014/05/22 职场文书
小学优秀学生评语
2014/12/29 职场文书
工会积极分子个人总结
2015/03/03 职场文书
2016年大学校运会广播稿件
2015/12/21 职场文书
PostgreSQL常用字符串分割函数整理汇总
2022/07/07 PostgreSQL