JS入门及学习指南

@ 三水清

博客：JS8.IN

webSlide：Git

我们来讨论些神马？

  • javascript是？
  • script标签
  • javascript基本语法
  • 变量类型
  • 常见对象及方法
  • DOM基本知识介绍
  • JSON & JSONP
  • 其他（编辑器，调试工具，趋势，学习资料..）

什么是javascript

  • 是一种网络脚本语言
  • ECMAScript标准
  • JavaScript和JScript
  • 因表单验证而生，但不仅仅是验证表单！
  • 被误解的javascript

script标签

type

  • text/javascript

charset

  • 编码这个 javascript 程序的字符集，如UTF-8

src

  • js文件路径

script 放置的位置

  • head/body之内

noscript 标签

  • 元素用来定义在脚本未被执行时的替代内容（文本）

基本语法   1

注释

  • //、/**/

定义变量

  • var <变量> = <表达式>;
  • 变量名以字母和下划线开头

弱类型变量

  • 变量声明时不需显式地指定其数据类型

运算符

  • +    -    *    /    =    %    ==    !=    ===    !== ……

变量类型

基础类型

  • undefined/string/number/boolean/object/function

对象类型

  • 以基础类型为基础，从object这一种类型中发展起来的
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//分类标准是按照检验方法来分
typeof [];//"object"
typeof function(){};//"function"
typeof 1;//"number"
typeof '1';//"string"
typeof true;//"boolean"
typeof abc;//"undefined"
typeof null;//"object"

//判断对象实例使用instanceof
var abc = function(){};
abc instanceof Function;//true
var arr = [];
arr instanceof Array;//true
arr instanceof Object;//true

数值

在JavaScript中所有数值都被描绘成浮点值，当定义数值变量时记得不要用引号。

1
2
3
var a = 3;
var b = 4;
var ab = a * b;//12

字符串

一个字符串可由一连串的Unicode字符组成，并由一对双引号或单引号包围。

1
2
3
4
5
var a = 'hello';
var b = 'weibo';
var ab = a + " " + b;//
// +号进行字符串连接处理
// (它还可用于数学上的加法运算)

布尔值

布尔类型在你进行条件判断的时候很有用，以了解是否符合指定的标准。布尔有两个可能的值:true和false。任何使用逻辑算法的比较结果都将是布尔值。

1
2
3
4
5
6
7
8
5 === (3 + 2); // = true
5 == (3 + '2'); // = false
// 你可以给变量声明布尔值:
var a = true;
// 你可以像这样测试:
if (a) {
    // 你的代码
}

数组

数组也是一个专门的对象，它可以包含任意数量的数据。要访问数组中的数据你就必须使用数字，用以引用其在数组中的”索引”（从0开始哦~）。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 两种声名数组的不同方式,
   
// 字面:
var fruits = ['apple', 'lemon', 'banana'];
   
// 使用数组构造器:
var fruits = new Array('apple', 'lemon', 'banana');
   
fruit[0]; // 访问数组中的第一个数据项 (apple)
fruit[1]; // 访问数组中的第二个数据项  (lemon)

// 多维数组
var school = [['小明', '小浪'], ['大黄', '小新']];

school[0][0]// 小明在一班

对象

对象是命名的的值的集合(键-值对)，它和数组很相似，唯一的不同之处在于你可以为每个数据值指定名字。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 两种声明对象的不同方式,
   
// 字面(大括号):
var I = {
    name: 'Wang',
    job: 'RIA Developer',
    site:'js8.in'
};
   
// 适用对象构造器:
var school = new Object();
school.class1 = ['小明', '小浪'];
school.class2 = ['大黄', '小新'];

// 两种访问方法
//.运算符
school.class1[0];//小明
//中括号
school['class2'][0];//大黄

函数

  • 声明方法
// 使用函数操作创建一个新函数:
function myFunctionName(arg1, arg2) {
    // 这里是函数的代码
}
   
// 如果你省略掉函数名，那么你创建的是"匿名函数":
function(arg1, arg2) {
    // 这里是函数的代码
}
       
// 执行函数仅需对他进行引用并使用圆括号 (附带参数):
myFunctionName(); // 无参数
myFunctionName('foo', 'bar'); // 带参数
   
// 你也可以在不声明变量的情况下执行函数
   
(function(){
    // 这就是所谓的自调用匿名函数
})();

基本语法   2

语句

  • 循环
    • for/for-in
    • while/do-while
  • 判断
    • if/if-else
    • switch

循环语句：for/for-in

  • for：普通循环
  • for-in：对象属性遍历
1
2
3
4
5
6
7
8
9
10
11
12
13
14
//for 循环
for(var i = 0; i < 10; i++ ){
    alert(i);
}

//for-in循环用于对象遍历
var I = {
    name: 'Wang',
    job: 'RIA Developer',
    site:'js8.in'
};
for(var i in I){
    alert(I[i]);
}

循环语句：while/do-while

  • while：先判断
  • do-while：先做一次再判断
1
2
3
4
5
6
7
8
9
10
11
12
//while循环
var a = [0, 1, 2, 3, 4, 5, 6, 7];
var len = a.length;
while(len--){
    alert(a[len]);
}
//do-while循环，先do，后判断再循环
len = a.length;
do{
    len--;
    alert(len);  
}while(len);

判断语句：if-else/switch

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var a = 12;
//if-else 判断
if(a == 12){//将可能性大的条件往前写，减少判断
    alert('a = 12');
}else if(a == 34){
    alert('a = 34');
}else{
    alert('end');
}

//switch判断
switch(a){
    case 12:
        alert('a = 12');
        break;//不break，继续执行
    case 34:
        alert('a = 34');
        break;
    default://默认
        alert('end');
}

常见对象及方法   1

  • String："string"
    • "123".length
    • indexOf()/replace()/substring()/slice()。。。
  • Array：[1,2,3] []
    • [1,2,3].length
    • push()/pop()/shift()/unshift()。。。
  • Date：new Date(12345678901)
    • getTime()/getFullYear()/getHours()。。。
  • Math：Math.PI、Math.max(2,3)
  • RegExp：/^\s|\s$/img
    • /e/ig.test('hEllo world')
    • exec()。。。

常见对象及方法   2

  • window：alert('hello world')
  • document：.write...
  • navigator：alert(navigator.userAgent);
  • location：location.href...

DOM

  • 文档对象模型(Document Object Model)，通常简称为DOM，是网站内容与JavaScript互通的接口。自JavaScript成为最常用的语言时JavaScript和DOM通常被视为独立的实体。DOM接口用于存取、遍历和控制HTML和XML文档
1
2
3
4
5
6
7
8
<html>
    <head>
        <title>Sample Page</title>
    </head>
    <body>
        <p>hello world!</p>
    </body>
</html>

获取DOM节点

1
2
3
4
5
6
7
<div id="idName" node-type="hello">
    <ul id="ul">
        <li>i am 1</li>
        <li>i am 2</li>
        <li>i am 3</li>
    </ul>
</div>

document.getElementById

1
2
3
//获取node
var node = document.getElementById('idName');
alert(node.innerHTML);

node.getElementsByTagName

1
2
3
//获取li的nodelist组合
var node = document.getElementById('ul');
node.getElementsByTagName('li');

获取节点属性：node.getAttribute/setAttribute

1
2
3
4
5
6
7
<div id="idName" node-type="hello">
    <ul id="ul">
        <li>i am 1</li>
        <li>i am 2</li>
        <li>i am 3</li>
    </ul>
</div>

1
2
var myNode = document.getElementById('idName');
myNode.getAttribute('node-type');

1
2
var myNode = document.getElementById('idName');
myNode.setAttribute('node-type','world');

创建和删除节点

实例：hello

1
<p id="cNode">hello </p>

创建：createElement/createTextNode

1
2
3
4
5
6
7
8
9
//创建元素节点
var $span = document.createElement('span');
//创建文本节点
var $text = document.createTextNode('world!');
$span.style.color = 'red';//给点color see see
$span.appendChild($text);
//获取插入父节点
var node = document.getElementById('cNode');
node.appendChild($span);

删除：.removeChild

1
2
3
var node = document.getElementById('cNode');//获取p
node = node.getElementsByTagName('span')[0];//获取span列表，取第一个
node.parentNode.removeChild(node);//删除

节点关系

1
2
3
4
<p>
    <strong>Hello</strong>
    how are you doing?
</p>

JSON

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式

http://www.json.org

1
2
3
4
5
6
7
{
　"name":"张三",
　"password":"123456",
　"department":"技术部",
　"sex":"男",
　"old":30
}
1
2
3
4
5
6
7
8
<?xml version="1.0" encoding="utf-8"?>
<user>
<name>张三 </name>
<password>123456</password>
<department>技术部</department>
<sex>男</sex>
<old>30</old>
</user>

JSON应用

json作为一种数据交换格式，经常应用在数据传输、数据存储（mongoDB）等方面

JSONP

JSONP是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问

应用：云输入法

其他

  • event事件处理
  • ajax请求
  • javascript框架
    • jQuery/YUI/prototype/STK...

一个JavaScript框架或库实际上是一系列工具和函数，它能更容易产生跨浏览器兼容的JavaScript代码。

  • 选择器
  • 事件处理
  • DOM操作
  • 实用函数
  • Ajax

未来

HTML5

  • 未来的(x)html和DOM标准，仍然处于完善阶段，不过市面上的浏览器已经开始支持html5
  • 语义化标记
  • 图像处理
  • 媒体支持
  • 改善用户界面
  • 网络存储
  • 网络通信
  • 移动设备支持
  • 增强可访问性

HTML5实例：地图定位

node.js

  • 服务器端js
  • 单线程
  • 非阻塞IO
  • Google V8
  • 事件驱动

编辑器

  • IDE:Apanta、webStorm、eclipse
  • 文本编辑器：NotePad++、记事本、Sublime Text2……
  • 牛人利器：vim

Zen Coding

zenCoding是一种快速写html/css的软件，只是语法缩写，提高前端工作者的代码书写效率
，加载之后输入zencoding语法，使用Tab做展开快捷键
例如：html:xt>div#id.cls>ul>li*5>a[title="title$"]+img[src='img/$.png']

调试工具

  • Firefox：firebug
  • IE：debugBar， Companion.js
  • Chrome：开发者工具

js代码质量检测工具：JSLint

  • JSLint 是 Douglas Crockford 创建的js代码质量检测工具。虽然 JSLint 不能保证代码逻辑一定正确，但却有助于发现错误并教会开发人员一些好的编码实践。

学习书籍


学习资料

  • 国内知名UED博客
  • http://www.w3school.com.cn/js
  • ITFeed.cn

Question?
Q&A

The End
Thank You

您的浏览器不支持HTML5,请升级或更换您的浏览器,强烈推荐您使用chrome浏览器。 ! p d