JavsScript前端入门
2015-08-12 本文已影响451人
洗阳光
介绍
JavaScript是一种在浏览器中运行的语言，主要用于实现浏览器段的动作，如用户交互，数据处理。在HTML中实现JS有两种办法，一种是通过script标签，另外一种是事件响应代码。
script标签的方式：
<script>
document.write("hello,world") //向世界宣布我要学习这门语言啦！
</script>
事件响应代码：
<html>
<body onLoad="alert('hi')">//注意单引号和双引号！
</body>
</html>
变量
- 变量用于保存数据
- 通过var命名
- 命名时避免关键字，可出现英文字母、数字、下划线、美元符号（什么鬼），其中第一个字符必须是字母、下划线或者美元符号
- 驼峰格式命名法，下划线命名法
计算操作符
- +：连接字符串，数值相加
- %：去除法结果里的余数（取模） //可以用于判断一个数的奇偶8
- ++：自增
- ==：相等
- !=：不相等
- &&；与
- ||：或
- !：非
判断
var age = 20;
if(age > 18) {
alert(""成年啦！);
}
alert("好啦好啦，知道啦");
document.write("你的年龄是" + age);
- 条件判断：
if -else - 嵌套判断：
if {else if{if()}}else - 多路分支：
switch { case;:
case; :
case: break;
default: break;}
- 条件运算符：<exp>?<v1>:<v2> //满足exp吗？满足就执行v1，否则v2
循环
- while语句
//求最大公约数
var u = 42;
var v = 21;
var temp= v;
while(v != 0)
{ teml = u % v;
u = v;
v = temp;
}
alert("最大公约数是"+u);
- do- while 循环
// reverse number
var number = 23871 ;
var reverse = 0;
do
{
var lastDigit = number % 10; //取最右边一位
reverse = (reverse * 10) + lastDigit;
number = Math.floor(number / 10); //如果没有取整的话会导致浮点数运算错误
}while(number > 0)
alert("That number reversed is" + reverse);
- for循环
//找零钱
var amt = 74;
for (var one = 0; one < amt; one++)
for (var five = 0; five < amt/5; five++)
for (var ten = 0; ten < amt/10; ten++)
for (var twenty = 0; twenty < amt/20; twenty++)
if (one+five*5+ten*10+twenty*20 == amt) document.write(one+"张1元"+five+"张5元"+ten+"张10元"+twenty+"张20元等于"+amt+" ");
- 循环控制
- berak, continue
函数
- 函数就是一段代码，我们给它起个名字，放起来，以后就可以拿来直接使用
- JavaScript有很多内置函数，能帮助我们实现很多有用的功能
- function fun_name(){}
//求最大公约数
function gcd ( u , v ) {
var a = u;
var b = v;
var temp = v;
while (v != 0){
temp = u%v;
u = v;
v = temp;
}
document.write (a+"和"+b"的最大公约数是"+n"</br>")；
}
gcd（42,24）
// 有返回值的函数
function max (a,b) {a>b?a:b}
- 模块化：写程序时，尽量分解成多个小函数，写函数时尽量基于已有函数
- 注意函数变量的作用域：函数内部用var申明的为局部变量，否则为全局变量
数组
- 当你需要放一些数据，特别是每个数据将通过一个对应的索引数字来访问时，你需要数组
- 创建数组的四种方式
var a = new Array ();
var b = new Arrat(size);
var c = new Arrat (d1,d2,...,dn);
var d = [d1,d2,...,dn];
- 问数组： [] 运算符访问数组中的一个单元，索引从0开始，a[x]=n直接创建了数组中的一个单元x，并且赋值n
- 数组长度：a.length给出数组a的长度，是其中最大的下表+1,其中.length可追加值，从而有利于写出可扩展性代码，例如 colors[color.length]="black";
- 转换数组为字符串：
- tostring()，valueof()，join(",")
- 堆栈操作
var colors = new Array ();
var count = colors.push("red" , "green");
alert(count);
count = colors.push "black");
alert(count);
var item = colors.pop();
alert(item);
alert(colors.length);
- 队列操作
...
var item = = colors.shift();
alert(item);
alert(colors.length);
- 排序操作
- sort()//排序
- .reverse()//倒转排序
- 数组操作
- 连接：colors2 = colors.concat("yellow",["black","brown"]);
- 截取：colors3 = colors.slice(1,4);//从1取到3
- splice(开始位置，删除个数，插入元素...)
- 删除：splice(0,2);
- 插入：splice(2,0,"red","green")
- 替换：splice(2,1,"red","green")
对象
- 对象是JavaScript的一种复合数据类型，它可以把多个数据集中在一个变量中，并且给其中的每个数据起名字（或者属性集合）
- JavaScript并不像其他OOP语言那样有类的概念，不是先设计类再制造对象
- 创建对象
var o = new Object();
var circle = {x;,y:,radius:2);
- 访问对象属性：.运算符
var book = new Object();
book.title = "HTML5秘籍";
book.translator = "李松峰";
book.chapter1 = new Object();
book.chapter1.title = "HTML5简介"; //动态添加属性
delete book.chapter1; //删除对象属性
book.chapter1 = null;
- 遍历所有属性
- for(var x in o) //将o对象作为x
- alert(x);/属性名字
- alert(o[x])//值（访问数组的属性名字包括在方括号里）
- 构造方法
- 不直接制造属性
- 没有return
- 通过this来定义成员
function Rect (w.h){
this.width = w;
this.height = h;
this.area = function(){
return this.width*this.height;
}
}
var r = new Rect(5,10);
alert (r,area());
- 原型对象
对象的prototype属性指定了它的原型对象，可以用.运算符直接读出它的原型对象
