要想学好web编程,没有javascript还是不行的。所以接下来准备把我自己学javascript的几个过程记录下来。我准备分几部分来学习javascript. 学技术最好去官网学,所以去:http://www.w3schools.com/js/ 才是王道!
part1 主要是javascript的基本语法。只是基本语法,完全不能操作网页显示。我测试使用的是chrome 工具,javascript 控制台!
part2 javascript针对DOM编程,当然也包括DOM基础.
part3 javascript 高级应用。
开始javascript之前,先推荐一本书, javascript DOM编程艺术。 言简意赅、简洁明了。如果有编程基础,可能花1 、2 天看完,会有很大的收获的。
言归正传。
任何一门语言也就是学一门语法而已。语法大概包括:语句、注释、变量、数据类型、函数、操作符。条件判断和循环。
1. 语句:javascript跟其他语言差不多。var hello = 5; 表示一句,语句de结束可以是回车ye可以是分号。 如果想两行表示一句就是用 '\'
2.注释:没什么好讲的'\\'he /**/''
3. 变量: 变量有声明、定义、类型。在javascript中。var i 表示一个变量。var i,j 就是声明了两个变量。 如: var x=2; var y=3; var z = x+y;
4. 数据类型(重点): javascript 数据类型包括:数字、数组、字符串、布尔。 javascript 的数据类型为动态数据类型。即一个变量在使用过程中数据类型可以变化。如:
var x; // Now x is undefined
var x = 5; // Now x is a Number
var x = "John"; // Now x is a String
var x1=34.00; //Written with decimals
var x2=34; //Written without decimals
var y=123e5; // 12300000
var z=123e-5; // 0.00123
字符串(string)
var answer="It's alright";
var answer="He is called 'Johnny'";
var answer='He is called "Johnny"';
数组
var cars=new Array();
cars[0]="Saab";
cars[1]="Volvo";
cars[2]="BMW";
或
var cars=new Array("Saab","Volvo","BMW");
或
var cars=["Saab","Volvo","BMW"];
布尔类型
var x=true;
var y=false;//boolean类型只有这两个
4. 1 变量扩展:Object(对象).在javascript中所有的数据都是对象(用W3C官方原话就是,"Everything" in JavaScript is an Object: a String, a Number, an Array, a Date....)函数也是对象!一个对象)就是一个数据体,数据体中包含方法(method)和属性(properties)。
简要说下:
官网介绍一个car 就是一个对象,如下:
拿真实的例子来说。一个String对象可以是
var txt = "hello world";
或
var txt = new String("hello world"); //当做一个对象来使用
他在javascript 内部的表示如图:
4. 2 其实把变量当做对象来理解,很容易,真正的难点是把函数当做对象来理解。 函数在javascript中被称为function . 它同样是一个对象,包括properties and methods。 在这里method是方法。而function 是函数。 虽然在很多编程语言中function 和 method 是同一个概念。但在这里为了把对象的概念说清楚。可以这样理解。method是对象中的方法。而function 本身就是一个对象。 具体函数当做对象在下面介绍。
5. 函数:
5.1 函数的标准定义(其实跟其他编程语言的函数用法一模一样。不做赘述):
function functionname()
{
some code to be executed
}
或
function functionname(parama,paramb)
{
some code to be executed
}
或
function functionname()
{
some code to be executed
return any value;
}
5.2 函数也是对象:
这个概念很难理解。我们慢慢来。
5.2.1 对象的简单定义
person=new Object();
person.firstname="John";
person.lastname="Doe";
或
person={firstname:"John",lastname:"Doe",age:50,eyecolor:"blue"};
使用方法:
person.firstname; //因为这个定义的就是一个对象! 比如 var person = "";
这个比较容易理解。这是javascript对象定义的基本方法。这个就是一个对象。 甚至可以理解成一个变量person . 是一个高级语言的结构体。
5.2.2 构造函数构造对象。 比如C++中的class 中的构造函数。 使用构造函数来构造一个对象。 这个对象可以被定义多个。因为使用了构造函数,就具有扩展性。看例子
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname; //构造函数中都是使用this来表示当前的对象。其实对象本身是省略了。 全部都写入到构造函数中了。
this.age=age;
this.eyecolor=eyecolor;
}
使用方法:
var yao = new person("ming","yao","black");
这个是通过构造函数定义的。 所以就是只能使用new person();来构造一个新的对象来使用。因为是构造函数。
5.2.3 很拗口的理解。 javascript把函数(function)当做对象。其实是把每个函数当做是一个对象的构造函数。 你调用了这个对象的构造函数,当然就可以构造一个新的对象。
所以其实,javascript中的任何物体都是对象。就是真正的对象本身(跟变量对应)就是一个变量。可以随便使用。 而对象的主要概念还是说,函数就是构造函数。调用了函数就可以创建一个新的对象来使用。
5.2.4 javascritp对象的prototype模式和继承的方法。在这里不做描述,因为我找到了一个很好的介绍的网站,我前面的拗口的理解,如果理解了,就很容易看懂这个网站了。http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_encapsulation.html。 也可以参考书籍:object-oriented javascript 和 professional javascript for web developers,2nd edition(我没看过)
6. 操作符,操作符没有什么可讲的就是+-*/之类。官网描述如下:
+ 加 y = x+2 x= 5 y = 7 (x 初始值均为5)
- 减 y = x-2 x= 5 y = 3
* 乘 y = x*2 x= 5 y = 10
/ 除 y = x/2 x= 5 y = 2.5
% 求余 y = x%2 x= 5 y = 1
++ 自增 y = x++ x= 6 y =5 或者y = ++x x= 6 y = 6
-- 自减 y = x-- x=4 y = 5 或者 y=--x x= 4 y = 4
= 赋值 y = x x= 5 y = 5
+= 加赋值 x +=2 x= 7
-= 减赋值 x -= 2 x= 3
*= 乘赋值 x * =2 x= 10
/= 除赋值 x /= 2 x= 2.5
%= 求余赋值 x %=2 x= 1
7. 条件判断和循环
条件其实就是:
if(x>y){
x++;
}else{
y++;
}
或者
swith(x){ //注意,在很多语言中x只能是整数或者字符,而在javascript当中可以是任何东西,字符串也可以(非官方文档,我自己试的)
case 1: x++;break;
case 2: y++;break;
default: break;
}
循环其实就是:
for(var i=0;i<10;i++)
{
x++;
}
或者
while(i>0)
{
i--;
}
或者
do{
x++
}while(i>0)
总结:
javascript 的基本语法就是这些。 当然还包括: javascript objects.和 javascript window. 这两部分还是在以后的练习中慢慢学吧。这里说不清楚。如果我学到了。有机会我会将学习感悟传上来的。
学习javascript基本语法是不能够操作网页的。要想操作网页必须学会DOM编程,以及 javascript操作DOM。 会在下一节来学习。
再次重申我们的目标是,完全剖析bootstrap 结构。 所以我们接下来把javascript学完后,会紧接着学jquery. 这样就可以进入bootstrap 的js部分了。然后学less进入bootstrap的css部分。最终将其一点一点剖析。
谢谢,如有问题,敬请指正!