注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

米欧互联

No matter what you want to express……

 
 
 

日志

 
 
关于我

{ note: ‘不会编程的设计狮不是好科研狗’ }

网易考拉推荐

js简介(1)  

2013-02-21 15:08:41|  分类: js |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
    JavaScript是一种广泛用于客户端网页开发的脚本语言,它可以用来给HTML网页添加动态功能,实现与用户的交互。它最初由网景公司设计,是一种动态、弱类型、基于原型的语言,现在是甲骨文公司的注册商标。JavaScript是一种脚本语言,其源代码在发往客户端运行之前不需经过编译,而是将文本格式的字符代码发送给浏览器由浏览器解释运行。 本课程通过JavaScript语言学习程序设计的基本概念:变量、计算、控制、循环、函数等,并深入理解JavaScript如何与浏览器和HTML的诸元素协同工作。
js简介(1) - 我是——斑竹 - 闪电行创意设计
 

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js1.0 by wjl</title>
</head>

<body>
<script>
var u=42; //alert(u);
var v=23;
var temp=v;

while( v!=0)
{
temp=u % v;
u=v;
v=temp;
}

alert( "最大公约数为:" +u);
</script>

</body>
</html>






1.js 是解释性语言,js源代码放在html里头,下载到浏览器去运行。

注释语句:
// 这里是行注释
/*这里是注释*/

hello world程序:

<!DOCTYPE HTML>
<html>


<body>

<script>
document.write("Hello World!");
</script>


</body>
</html>

document 是对象,就是页面。
.是运算符,意味着左边的对象,做右边的动作。 或左边的对象 的 右边的属性。
write是动作;
()这是写的内容;单引号双引号都一样。引号内可以是字句,也可以是html语句。
每个语句都需要使用分号结尾;

这个语句意思就是,把括号中的Hello World!写到当前页面中。


下面这个是在载入的时候,弹出语句hi。

<!DOCTYPE HTML>
<html>
<body onLoad="alert('hi')">

<script>
document.write("Hello World!");
</script>


</body>
</html>


2.变量
定义变量,使用

   var  变量名;
   变量名="Hello";

定义,赋值,书写:

 <script>
       var  hi;
        hi="Hello";
document.write(hi);
</script>

或者直接写成给初始值:

 <script>
       var hi="Hello";
document.write(hi);
</script>


变量命名规则:
1.只能够出现英文大小写字母、数字、下划线;
2.第一个字符不能是数字;
3.不能用保留字;

4.大小写敏感吗?

<script>
var a1=1;
var A1=2;
var c=A1;
(a1==A1)?alert("yes"):alert("no");
</script>

弹出的是no,说明a1和A1是不一样的。
大小写敏感。


3.计算
 <script>
var hi="Hello "; /*加一个空格*/
hi=hi + " World"; /*连接字符串。这多一个空格写到html后没有用,还是一个空格*/
var   age=(10 + 2) * 9 / 3 - 1;  /*数字类型*/
var ot=true;  /*逻辑变量*/

document.write(hi + age);  /*混合计算? 字符串 的连接*/
</script>

1)var result=10%3;  这个%是取余数运算。结果为1。

2)
result++;
result--;
--result;
++result;

3)比大小
比较运算符:==   !=   >   <   >=   <=

var a1=18;
var a2=16;
document.write(a1 == a2);

输出为false


4)运算的优先级:
尽量记住,记不住的加括号


4.判断
(1)if语句

<script>
var age=20;


document.write("你的年龄是:" + age);
if (age>=18)
{
alert ("成年啦");
}


</script>


另一个例子if () else ,如果是单语句,可以省略大括号:

<script>
var age=12;

document.write("你的年龄是:" + age);
if (age>18)
alert ("年轻是美好的");
else
alert("还小呢");

</script>


嵌套后,else属于距离它最近的if语句。
if( code == 'R' )
  if( count<20 )
   alert("一切正常");
   else
   alert("继续等待");


var n1=56;

var n2=27;

var n3=42;


if (n1<n2)

if(n1<n3)

min=n1;

else

min=n3;

else

if( n2<n3)

min=n2;

else

min=n2;


alert("Minimum value: " + min);


(2)逻辑运算
1)and ; &&

2)or ; ||

3)not ; !

例:
 age>20 && age<30
 index<0 || index>99
 !age>20

if(!done && ( count>MAX ))
{
alert("Completed.");
}



(3)优先级
- 所有的逻辑运算符低于关系运算符。
- ! > || > &&



(4)条件运算符
三元的: <exp>?<val1>:<val2>
相当于if语句。

larger=(n1>n2)?n1:n2;


sign=(x>0?1:(x==0)?0:-1);





5.循环
(1) while(){}; 循环

<script>
var count=1;
var limit=3;
while( count<=limit)
{
alert(count);
count=count+1;
}

</script>



看n/2能执行多少次的结果小于1?

<script>
var count=0;
var n=1000;
while( n>1)
{
n=n/2;
count++;
}
alert(count);
</script>

分析循环时,特别注意开头和结尾的值。




求最大公约数——辗转相除法
问题:找到两个非负整数u和v的最大公约数gcd;
第一步:如果v=0,gcd=u,算法结束;
第二步:计算temp=u%v; u=v; v=temp; 然后回到第一步。

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js1.0 by wjl</title>
</head>

<body>
<script>
var u=42; //alert(u);
var v=23;
var temp=v;

while( v!=0)
{
temp=u % v;
u=v;
v=temp;
}

alert( "最大公约数为:" +u);
</script>

</body>
</html>


(2)do {} while(); 循环:先处理,再判断。循环至少做一次。

<!DOCTYPE HTML><html><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>js1.0 by wjl</title>
</head>

<body>
<script>
var n=23871;
var reverse=0;

var num=n;

do
{
var lastdigit=n % 10;
reverse =(reverse*10) + lastdigit;
n=(n-lastdigit)/10;
} while(n>0);

alert( num + " , reversed is: " + reverse);

</script>

</body></html>



(3)for循环
for(init; condition; step){
}

for(i=0; i<5; i++)

{

alert(i);

}


下面这个计算如何找零钱的程序,没有运行成功,????现在好了,原来是for(xx; xx; xx){}中的分号误写成逗号

<script>
var amt=74;
var one=five=ten=twenty=0 ;

for(one=0; one<=amt; ++one)
for(five=0; five<=amt/5; ++five)
for(ten=0; ten<=amt/10; ++ten)
for(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 +"<br />");
</script>



(4)无限循环
while(true){}
do{} while{true};
for(;;){}


(5)不同循环的比较
-三种循环(while/do/for)功能等价;
-但是do{}while()由于判断在后面,所以至少循环一次;


如何选择循环方式?



(6)break与continue
break:跳出循环;

continue:跳过当前循环步骤,进入循环的下一轮;

<script>
var amt=74;
var one=five=ten=twenty=0 ;

for(one=0; one<=amt; ++one)
for(five=0; five<=amt/5; ++five)
for(ten=0; ten<=amt/10; ++ten)
for(twenty=0; twenty<=amt/20; ++twenty)
{if(one + five*5 + ten*10 + twenty*20 != amt) continue;
document.write(one + "张1元," + five+"张5元," +ten+"张10元," +twenty+"张20元->" + amt +"<br />");
}
</script>







6.函数
    函数就是一段代码,有函数名,放起来,以后可以使用;
    javascript有很多内置函数,能帮助我们实现很多功能。

(1)定义函数
function fun_name(){}   //没有参数

function fun_name(a, b){}  //有参数

<script>
var u=42; //alert(u);
var v=23;

function gcd(u, v){
var temp=v;
var nu=u;
var nv=v;

while( v!=0)
{
temp=u % v;
u=v;
v=temp;
}

alert(nu + "和" + nv + "的最大公约数为:" +u);

// document.write(nu + "和" + nv + "的最大公约数为:" +u + "<br />");
}


gcd(42, 24);
gcd(42, 81);
</script>

一次定义函数,可以多次使用。


(2)函数变量
很独特,别的语言少见。
定义方式:var f=new Function("x","y","return x*y");
等价于: function f(x,y){ return x*y;}


(3)以函数作为参数的函数

<script>
function print(msg){
document.write(msg);
}

function println(msg){
print(msg + "<br />");
}


function add(a,b){
return (a+b)
}


function cal(
f,a,b){
return f(a,b)
}



println(cal(add,10,21));
print(cal(add, 24, 30))
</script>

以现有函数构建新的函数是一个好的习惯,增加代码复用性,减少重复代码(完全相同或基本相同),如函数println()就是根据函数print()构建的。


(4)变量空间:全局 和 函数内部,只有两种空间。没有函数内部的if块有效的功能。
1)定义在任何函数之外的变量属于全局(整个网页)空间,在网页的任何一个地方都可以使用;
  即使他们放到不同的script模块中。

2)定义在某个函数内部的变量属于局部(函数内部)空间,只在函数内部有效。
3)局部和全局重名的变量,采用局部的。

<script>
var f=">>";


function print(msg){
document.write(f + msg);
// document.write("<br />");
}

function println(msg){
print(msg + "<br />");
}

print("abc");
print("ddddd");
</script>








7.数组
--当你需要放一些数据,特别是每一个数据通过一个对应的索引数字来访问时,你需要数组。
--比如,要记录一个班所有学生的成绩,

var marks =new Array();
marks[0]=89;
marks[1]=78;
marks[2]=99;
...
marks[40]=61;

(1)定义方式:
1)var a=new Array();
2)var b=new Array(size); //定义初始大小,而不是固定就这么大。
3)var c=new Array(d1,d2,..., dn); //如果仅用一个数字,会被当做第二种方法-数组大小,而不是数组元素。
4)var d=[d1,d2, ... , dn];
5)var e=[];

(2)访问数组:
1)[]运算符访问数组中的一个单元;
2)a[0],可以读也可以写;
3)索引从0开始;
4)a[x]=n直接创建了数组中的一个单元,而且赋了值n。

<script>
var colors=["red","blue","green"];
alert(colors[0]);

colors[2]="black";
alert(colors[2]);

alert(colors.length);

colors[100]="white";
alert(colors[99]); //第99个显示为undifined。

alert(colors.length);

</script>

(3)length就是数组的最大坐标+1。

这个值可写,也就是可以定义。
如果定义的比原来小,则后面的被截掉,找不到了。
如果比原来的大,则后面的同样没有定义。
colors.length=2;


colors[colors.length]="yellow";   //相当于在后面又追加了一个元素。不覆盖前面的元素。具有可扩展性代码。good。
colors[colors.length]="brown";  //同上。不用修改就可以继续使用。

(4)转换数组为字符串

<script>
var colors=["red","blue","green"];


alert(colors.toString()); //输出整个数组为字符串

alert(colors.valueOf());
alert(colors);
alert(colors.join(","));
alert(colors.join("||")); //定义数组元素之间的分隔符
</script>


(5)堆栈操作:先进后出

<script>
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);
</script>

push压入数组元素,
pop取数据,从最后的一个元素取。

(6)队列操作:先进先出

<script>
var colors=new Array();
var count=colors.push("red","green");
alert(count);

count=colors.push("black");
alert(count);

var item=colors.shift();
alert(item);
alert(colors.length);
</script>

shift时先进先出。


(7)排序操作
var values=[0,1,5,10,15];
values.sort();  //排序操作,从小到大
alert(values);

var values=[0,1,5,10,15];
values.reverse(); //反序
alert(values);

结果诡异,是因为使用了ascii码比较。
-------------------------------------------------------------------
函数原型:

arrayobj.sort(sortfunction)  

参数  

arrayObj 
必选项。任意 Array 对象。


sortFunction 
可选项。是用来确定元素顺序的函数的名称。如果这个参数被省略, 
那么元素将按照 ASCII 字符顺序进行升序排列。


说明 
sort 方法将 Array 对象进行适当的排序; 
在执行过程中并不会创建新的 Array 对象。


如果为 sortfunction 参数提供了一个函数,那么该函数必须返回下列值之一:

负值,如果所传递的第一个参数比第二个参数小。 
零,如果两个参数相等。 
正值,如果第一个参数比第二个参数大。

-------------------------------------------------------------------

7.1 ) 改进版:自己写比较的规则,用函数表示。

function w(a){document.write( a + "<br />");}


function compare2(value1, value2){ //从大到小排列

a=value1;
b=value2;


if( a < b ){
return 1;
} else if( a < b ){
return -1;
} else{
return 0;

}


var values=[0,100,5,-10,15];
values.sort(compare2); //排序操作,从小到大
w(values);

结果:100,15,5,0,-10

符合预期。


7.2 ) 再搞一个按绝对值排序的,只需要将上面的红色部分替换即可。

a=Math.pow(value1,2);
b=Math.pow(value2,2);

结果:100,15,-10,5,0

符合预期。





(8)数组操作
连接
colors2=colors.concat("yellow",["red","black"]);

截取
colors=colors.slice(1,4); //截取从1到3,不取4,作为新的数组;

splice()
完整用法:splice(开始位置, 删除个数, 插入元素);

删除 splice(0,2)
插入 splice(2,0,"red","green")
替换 splice(2,1,"red","green")





8.对象
基于对象的编程语言。与其他面向对象的编程语言有些不同。
--对象是js的一种符合的数据类型,他可以把多个数据集中在一个变量中,并且给其中每个数据起名字;
--或者,对象是一个属性集合,每个属性有自己的名字和值;
--js并不像其他oop语言那样有类的概念,不是先设计类再制造对象;

(1)创建对象
var o=new Object();  //空白对象;
var circle={x:0, y:0, radius:2};  //直接输入属性和值

(2)访问对象属性

var book=new Object();
book.title="HTML5秘笈";
book.translator="李松峰";
book.chapter1=new Object();
book.chapter1.title="HTML5简介";

即使构造的时候不存在的属性,也可以在使用的时候加入并赋值;

(3)删除对象属性
delete book.chapter1; //del
book.chapter1=null; //null

(4)遍历所有属性
for(var x in o) ...

var o=new Object();
o.name="wjl";
o.age=30;
o.salary=300;
for(var x in o){
alert(x);
}

但是这个只有属性,没有属性的值!!!
怎么办?o.x不行,原来是o[x];

var o=new Object();
o.name="wjl";
o.age=30;
o.salary=300;
for(var x in o){
alert(x + "=" + o[x]);
}

取一个对象,原来这里的x也是可以变化的,可以为变量,就是运行时刻才出现的值。

(5)构造方法
--不直接制造对象;
--通过this来定义成员;
--没有return;
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());

可以修改后接着计算
r.width=10;
alert(r.area()); //注意!!r.rear()后面这个括号必须有!!


(6)原型对象
--对象的prototype属性指定了他的原型对象,可以用运算符直接读取他的原型对象的属性;
--当写这个属性的时才在它的内部产生实际的属性;
function Person(){
Person.prototype.name="Jim";
Person.prototype.age=29;
Person.prototype.job="Software Engineer";
Person.prototype.sayName=function(){
alert(this.name);
};
}

var person1=new Person();
person1.sayName(); // "Jim"

var person2=new Person();
person2.sayName(); // "Jim"

alert(person1.sayName==person2.sayName); //true


//改写
person1.name="Grey";
person1.sayName(); // "Jim"

原型中的数组如果没有用赋值,而是使用push等更新的数组,那么原型也改变。

(7)组合原型与构造原型结合

不懂。。。。





浏览器里的JavaScript
9.window
(1)全局变量
--浏览器的全局对象是window;
--所有全局的变量实际上是window的成员

 var answer=12;
 var winodw.answer=12;

(2)document
--window.document表示浏览器窗口中的html页面;window.document与document效果一样。
--document.write()将内容写入页面;
--页面中的元素就是document里的成员;

for (x in document)
document.write(x + "<br />");


(3)document model模型:DOM模型
1)html中的js
--在<script></script>标记中,在head中一般是函数,在body中一般是需要的效果;
--在<script>的src属性或archive指定的外部文件中
--在某个html标记的事件处理器中:鼠标移动到上面,单击

2)外部js文件
<script src="util.js">  </script>
一个纯粹的代码文件,没有html标记;
URL可以是本站或外站的代码文件。

3)事件处理器
<p onMouseOver="alert('hello world!');"   onMouseOut=“alert('haha')” > dasfsdaf </p>

4)body事件
onLoad
onUnload

5)简单对话框
--alert()
--confirm() //能选择yes no
prompt() //可以输入东西



6)状态栏
status=
defaultStatus=


7)定时器
setInerval()

<script>
var count=10;

function update(){
if(count>0) status=count--;
document.write(count);
}
</script>
</head>

<body onLoad="setInterval('update()', 1000);">



8)window的控制方法
打开一个新窗口,移动它,关闭它。

<!DOCTYPE HTML>
<html charset=utf-8>

<body onLoad="setInterval('guanbi()', 3000);">

<script>//onload时设置了个定时器,3s后执行关闭函数。
var w=window.open("http://wap.baidu.com","small","width=300,height=300"); //打开窗口
w.moveTo(0,0);//移动窗口到左上角

function guanbi(){ //关闭窗口
w.close();
}


</script>
</body>
</html>



9)location的用法
location就是当前URL,可以alert出来,如果改写,就是跳转URL了。

<body onLoad="setInterval('jump()', 3000);">

<script>
alert(location);//location就是当前的URL。

//改写location后跳转
//onload时设置了个定时器,3s后执行跳转函数。
function jump(){ //关闭窗口
location="http://wap.baidu.com";
}

</script>



10.document对象
怎么看看window和document都有哪些元素可供我们使用?
代码

function w(s){
document.write(s + "<br />");
}

var i=0;

for(x in window){ //或者 document
w(++i + ": " + x);
}


这就是DOM。
具体细节见 js简介(2)。




经验:
1.如果运行不畅,函数名是否错误?


参考资料:
[1]网易公开课:js入门
  评论这张
 
阅读(357)| 评论(1)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017