JS——基本内容

一、 简介
1、什么是javascript
JavaScript
是网景(Netscape)公司支出之平等栽基于客户端浏览器、面向(基于)对象、事件驱动式的网页脚本语言。
2、为什么要动用javascript
说明单验证 
网页特效 
小游戏 
Ajax
3、快速入门
每当先后中,如果想编写js代码,有半点种艺术:
1)在html文件被,在相同针对script标记中,直接编写

[javascript] view
plaincopyprint?

  1. <script language=’javascript’>  
  2.   document.write(‘hello’);  
  3. </script>  

2)在js中,直接编写,在html中,使用相同针对性script标记直接引用
< script language=’javascript’ src=’demo01.js’></script>
上述两栽不可知于平对script标记中重复使用,引用就未克写文件内容。
仲、基础语法 
1、基本格式
JavaScript分别轻重缓急写,变量a和变量A是个别独变量。
JavaScript脚本程序要嵌入在HTML文件被。
JavaScript脚本程序中无克包含HTML标记代码。

[javascript] view
plaincopyprint?

  1. <script>  
  2.   document.write(‘<table></table>’);  
  3. </script>  

每行写一长达脚论语句,语句末尾可以加分号。JavaScript脚本程序可以独立保存也一个表面文件。
2、关于script标签 
Language:引用的言语 javascript、php、c#、VBSCRIPT。
src:引用一个表的js文件。
3、关于变量 
变量是用来即存储数值的容器,变量存储的数值是得转变之。变量必须使事先声明才能够使用,使用var声明变量。
行使var声明的凡局部变量,没有使var声明的是全局变量。 
变量的命名规则:第一独字符必须是英文字母,或者是产划线(_);其后的字符,可以是英文字母,数字,下划线;变量名无可知是JavaScript的保留字。
变量的作用域:全局变量、局部变量。
4、数据类型(若类型语言,定义无需制定数据类型) 
String :字符串可以运用‘’和“”。
Number :数字 10、10.01、100。 
Boolean :布尔型 true、false。 
Undefined :未定义。 
Null :空。 
Object:对象类型。

[javascript] view
plaincopyprint?

  1. <script language=’javascript’>  
  2.    
  3.   //使用js描述一个人数的总体信息  
  4.   var name=’张三’;  
  5.   var age=30;  
  6.   var marry=true;  
  7.   var height=1.8;  
  8.    
  9.   document.write(‘<ol>’);  
  10.   document.write(‘<li>姓名’+name+'</li>’);  
  11.   document.write(‘<li>年龄’+age+'</li>’);  
  12.   document.write(‘<li>婚否’+marry+'</li>’);  
  13.   document.write(‘<li>身高’+height+'</li>’);  
  14.   document.write(‘</ol>’);  
  15.    
  16.   function Person(){}  
  17.   var p1=new Person();  
  18.   p1.name=’李四’;  
  19.   p1.age=20;2013/12/31  
  20.   document.write(p1.name+'<br>’);  
  21.   document.write(p1.age+'<br>’);  
  22. </script>  

5、运算符 
1)算术运算符 
+、-、*、/、%、++、– 
i++ 
++i

[javascript] view
plaincopyprint?

  1. <script>  
  2. var i=10;  
  3. var j=i++;   //先赋值再打加  
  4. var k=++i;   //先自加再赋值  
  5. document.write(j);   //10  
  6. document.write(k);   //12  
  7. </script>  

2)比较运算符
> 、<、>=、<=、!=、==、===、!== 
==和===有何区别? 
== :判断值是否等于。 
===:判断值当类型也同样。

[javascript] view
plaincopyprint?

  1. <script>  
  2. var i=5;    //Number  
  3. var j=”5″; //String  
  4. if(i==j){  
  5.   document.write(‘相等’);  
  6. }  
  7. if(i===j){  
  8.   document.write(‘全等于’);  
  9. }  
  10. </script>  

3)逻辑运算符 
&& 、||、! 
4)赋值运算符 
=、+=、-=、*=、/=、%= 
以运算符左边的及右的拓测算,再赋值给左的 
5)字符串运算符 
+、+=

其三、流程结构
1、顺序结构 
代码是单排就一行行
2、分支组织 
if、else、else if、switch
3、循环结构 
for、while、do….while、for…..in 
小游戏:
猜数游戏:进入及页面下、随机一个频繁1–500、弹有输入框,由用户输入一个数字,如果是数字超过随机数,则提醒打了;小于随机数,则提示有些了。等于则提醒应了。

[javascript] view
plaincopyprint?

  1. <script language=’javascript’>  
  2.   var n=Math.round(Math.random()*500);  // 随机数  
  3.   alert(n);  
  4.   while(true){  
  5.     var number=prompt(‘请输入一个0–500里面的数字’); //用户输入  
  6.     if(number>n) alert(‘大了’);  
  7.     if(number<n) alert(‘小了’);  
  8.     if(number==n){  
  9.       alert(‘答对了~~~~’);  
  10.       break;  
  11.     }  
  12.   }  
  13. </script>   

四、函数 
1、函数的成效 
代码重复性使用 
模块化编程
2、语法:
用函数前如果先期定义才会调用,
函数定义有三独片:函数名,参数列表,函数体。 

概念函数的格式如下: 

function 函数名([参数1,参数2…]){ 
函数执行有; 
return 表达式; 

}

调用语法:
函数名(实参1,实参2,……,);
3、代码示例
例1:关于函数的定义及调用
//函数的概念
  function display(){
    alert('hello');
  }
 
display();
例2:关于js中之参数传递
在js中,对象类型默认就是本地址传递

[javascript] view
plaincopyprint?

  1. function display(obj){  
  2.   obj.name='lisi';  
  3. }  
  4. var p1=new Object();  
  5. p1.name='zhangsan';  
  6. display(p1);  
  7. alert(p1.name);//lisi  
  8. alert(p1);  

    function display(obj){
    obj.name='lisi';
    }
    var p1=new Object();
    p1.name='zhangsan';
    display(p1);
    alert(p1.name);//lisi
    alert(p1);

JS的中坚项目,是依值传递的。

[javascript] view
plaincopyprint?

  1. var a = 1;  
  2. function foo(x) {  
  3.   x = 2;  
  4. }  
  5. foo(a);  
  6. console.log(a); // 仍为1, 未给x = 2赋值所影响  

    var a = 1;
    function foo(x) {
    x = 2;
    }
    foo(a);
    console.log(a); // 仍为1, 未让x = 2赋值所影响

重新来拘禁对象:

[javascript] view
plaincopyprint?

  1. var obj = {x : 1};  
  2. function foo(o) {  
  3.   o.x = 3;  
  4. }  
  5. foo(obj);  
  6. console.log(obj.x); // 3, 被改了!  

    var obj = {x : 1};
    function foo(o) {
    o.x = 3;
    }
    foo(obj);
    console.log(obj.x); // 3, 被改了!

说明o和obj是跟一个目标,o不是obj的副本。所以不是准值传递。
但这样是不是说明JS的目标是据引用传递的也?我们再看下面的事例:

[javascript] view
plaincopyprint?

  1. var obj = {x : 1};  
  2. function foo(o) {  
  3.   o = 100;  
  4. }  
  5. foo(obj);  
  6. console.log(obj.x); // 仍然是1, obj并未被涂改也100.  

    var obj = {x : 1};
    function foo(o) {
    o = 100;
    }
    foo(obj);
    console.log(obj.x); // 仍然是1, obj并未被涂改也100.

倘若是以引用传递,修改形参o的价,应该影响至确凿参才对。但此修改o的值并未影响obj。
因此JS中之对象并无是随引用传递。那么究竟对象的值当JS中哪些传递的吗? 
对此目标类型,由于目标是可变(mutable)的,修改对象自我会影响到共享斯目标的援和援副本。而对于着力型,由于她都是不可变的(immutable),按共享传递与按值传递(call
by
value)没有任何区别,所以说JS基本类型既符合按值传递,也适合按共享传递。
var a = 1; // 1是number类型,不可变 
var b = a; 
b = 6; 
论本共享传递的求值策略,a和b是少数独不同的援(b是a的援副本),但援相同之价。由于这里的骨干型数字1休可变,所以这边说准值传递、按共享传递没有外区别。
主干型的不可变(immutable)性质:
中心项目是不可变的(immutable),只有靶是可变的(mutable). 例如数字值100,
布尔值true, false,修改这些价值(例如将1改为3,
把true变成100)并没呀含义。比较易于误解的,是JS中之string。有时我们见面尝试“改变”字符串的始末,但以JS中,任何类似对string值的”修改”操作,实际都是创立新的string值。
var str = "abc";
str[0]; // "a"
str[0] = "d";
str; // 仍然是"abc";赋值是行不通的。没有外措施修改字符串的情节
如果目标就是无一样了,对象是可变的。
var obj = {x : 1};
obj.x = 100;
var o = obj;
o.x = 1;
obj.x; // 1, 被修改
o = true;
obj.x; // 1, 不会因o = true改变
此定义变量obj,值是object,然后设置obj.x属性的价值吗100。而继定义另一个变量o,值仍然是这object对象,此时obj和o两个变量的值指向与一个目标(共享同一个目标的援)。所以修改对象的情节,对obj和o都生影响。但目标并非以引用传递,通过o
= true修改了o的值,不见面潜移默化obj
例3:关于函数的返回值问题

[javascript] view
plaincopyprint?

  1. function display(first,second){  
  2.    //函数遇到return会立即回,后面代码不实行  
  3.    return first+second;  
  4.  }  
  5.    
  6.  var i=10;  
  7.  var j=20;  
  8.  alert(display(i,j));  
  9.  document.write(display(i,j));*/  

    function display(first,second){
    //函数遇到return会立即回到,后面代码不实行
    return first+second;
    }

    var i=10;
    var j=20;
    alert(display(i,j));
    document.write(display(i,j));*/

例4:关于匿名函数 
  /*var i=function(){
    alert('hello');
  };*/
  i();//变量可以保留数据,也得保存地址
function
display(){}会在window对象下补充加一个叫display的变量,它对了此函数的首地址 
Window.i=display 我们为window对象下的i指向这个函数的首地址。 
display()等同于i()。
例5:自调用匿名函数

[javascript] view
plaincopyprint?

  1. <script language='javascript'>  
  2.   /*var i=function(){ 
  3.     alert('hello'); 
  4.   }; 
  5.   i();*/  
  6.   (function(first){  
  7.   alert(first);  
  8.   alert('hello,js');  
  9.   })(10)  
  10. </script>  

function(){} :相当给返回首地址。 
(function(){}) :把这有当一个完好无损 
(function(){})():相当给找到这地方并施行。
如上这种写法:可以免代码库中的函数有重命问题,并且上述代码只会在运行时实行同样软,一般用做初始化工作。
例6:全局变量与片变量

[javascript] view
plaincopyprint?

  1. <script>  
  2.   function display(){  
  3.     //var i=20; //局部变量只以部分图域起作用  
  4.     i=20;    //全局的,会用均局i的价修改为20  
  5.   }  
  6.   display();  
  7.   alert(i);  
  8. </script>  

每当函数内部定义的饶是片的,否则就是是大局的。
如果函数内之变量没有var声明会直接影响全局的。
干什么从来不var是大局的? 
以于js中,如果某变量没有var声明,会自行到直达亦然重叠作用域中失去寻找这个变量的宣示语句,如果找到,就应用;如果无找到,继续发展查找,一直查找到全局作用域为止;如果全局中还没这个变量的扬言语句,那么会自行在大局作用域进行宣示。这个就算是js中之意域链
代码示例:

[javascript] view
plaincopyprint?

  1. <script>  
  2.   var i=10;  
  3.   function fn1(){  
  4.     var i=100;  
  5.     function fn2(){  
  6.       i=1000;  
  7.       function fn3(){  
  8.         i=10000;  
  9.       }  
  10.       fn3();  
  11.       console.log(i);//10000  
  12.     }  
  13.     fn2();  
  14.     console.log(i);//10000  
  15.   }  
  16.   fn1();  
  17.   console.log(i);//10  
  18. </script>  

五、arugments的使用
在一个函数内部,可以下arguments属性,它代表函数的底亮参列表,它是坐数组形式反映的。
例1:在定义display函数时,它的实参个数必须使跟形参个数保持一致,有时,我们定义函数时,形参数目不可知稳,如何缓解?

[javascript] view
plaincopyprint?

  1. <script>  
  2. function display(){  
  3.   //没有概念形参,那么所有形参会自动存放到arguments这个特性数组中。  
  4.   for(var i=0;i<arguments.length;i++){  
  5.     document.write(arguments[i]+'<br>');  
  6.   }  
  7. }  
  8. display('lisi','zhangsan','wangwu');  //三个实参  
  9. display('zhangsan','lisi','wangwu','xiaoqiang','wangcai'); //五只实参  
  10. </script>  

一旦定义时,参数个数不确定,可以透过arguments来保存有实参
例2:使用js函数来计量每个店之员工工资总额

[javascript] view
plaincopyprint?

  1. <script>  
  2.   function display(){  
  3.     var sum=0; //总额  
  4.     for(var i=0;i<arguments.length;i++){  
  5.       sum+=arguments[i];  
  6.     }  
  7.     document.write(sum+'<br>');  
  8.   }  
  9.   //A公司  
  10.   display(10000,2000,5000);  
  11.   //B公司  
  12.   display(1000,2000,5000,8000,10000);  
  13. </script>  

六、常用操作
1、输出内容(document.write)
document.write()直接以网页遭到输出内容。
第一种:输出内容用“”括起,直接出口“”号内的内容。
document.write("I love JavaScript!");
次种:通过变量,输出内容 
var mystr = "hello world";
document.write(mysrt);//直接写变量名,输出变量存储的内容
其三栽:输出多桩内容,内容中用+号连接。
var mystr = "hello";
document.write(mystr + "I love Java Script");//多起内容之间用+号连接
季种:输出HTML标签,并起作用,标签下“”括起来。
var mystr="hello";
document.write(mystr+"<br>");//输出hello后,输出一个换行符
document.write("JavaScript");
2、警告(alert 消息对话框)
咱俩于看网站的时候,有时见面忽然弹来一个略带窗口,上面写在相同截提示信息文字。如果您免点击“确定”,就无克针对网页做任何操作,这个有点窗口就是运用alert实现的。
语法:alert(字符串或变量);
var mynum = 30;
alert("hello!");
alert(mynum);
 结果:按梯次弹来信息框(alert弹出消息对话框包含一个确定按钮)
注意:
--在点击对话框"确定"按钮前,不可知进行任何其他操作。
--信息对话框通常可以用于调试程序。
--alert输出内容,可以是字符串或变量,与document.write 相似
3、确认选项(confirm 消息对话框)
除为用户提供信息,我们还愿意从用户那里拿走信息。这里虽用到了confirm
消息对话框。
confirm
消息对话框通常用于允许用户做取舍的动作,如:“你针对为?”等。弹出对话框(包括一个规定按钮和一个撤销按钮)。
语法:confirm(str);
参数说明:str:在信对话框中一旦展示的公文 返回值:Boolean值
返回值:
当用户点击"确定"按钮时,返回true
当用户点击"取消"按钮时,返回false
流动: 通过返回值可以判定用户点击了啊按钮

[javascript] view
plaincopyprint?

  1. <script type="text/javascript">  
  2.   var mymessage=confirm("你喜欢JavaScript吗?");  
  3.   if(mymessage==true){  
  4.     document.write("很好,加油!");   
  5.   }else{  
  6.     document.write("JS功能强大,要学啊!");  
  7.   }  
  8. </script>  

4、提问(prompt 消息对话框)
突发性,不仅要用户回答Yes/No。而是愿意取得重新特定的应。这吃状态我们得以运用prompt。
prompt弹来信息对话框,通常用于询问有亟需和用户交互的信息。弹来信息对话框(包含一个规定按钮、取消按钮与一个文本输入框)。
语法:
prompt(str1,str2);
参数说明:
str1:要显得在信息对话框中的文本,不可修改
str2:文本框中之始末,可以修改
返回值:
点击确定按钮,文本框中之情节将当函数返回值
点击取消按钮,将回来null

[javascript] view
plaincopyprint?

  1. function rec(){  
  2.   var score; //score变量,用来存储用户输入的大成值。  
  3.   score = prompt("请输入你的成就","90");  
  4.   if(score>=90){  
  5.     document.write("你很棒!");  
  6.   }else if(score>=75){  
  7.     document.write("不错吆!");  
  8.   }else if(score>=60){  
  9.     document.write("要加油!");  
  10.   }else{  
  11.     document.write("要尽力了!");  
  12.   };  
  13. } ;  

    function rec(){
    var score; //score变量,用来存储用户输入的成就值。
    score = prompt("请输入而的成","90");
    if(score>=90){

    document.write("你很棒!");
    

    }else if(score>=75){

    document.write("不错吆!");
    

    }else if(score>=60){

    document.write("要加油!");
    

    }else{

    document.write("要努力了!");
    

    };
    } ;

[javascript] view
plaincopyprint?

  1. <script>  
  2.     var myName = prompt("输入而的讳");  
  3.      if(myName != null && myName != ""){  
  4.       document.write("welcom to" + myName);  
  5.     }else{  
  6.       document.write("welcom to my friend");  
  7.     }  
  8. </script>  

4、打开新窗口(window.open)
语法:
window.open([URL], [窗口名称], [参数字符串])
参数说明:
URL:可选参数,在窗口中只要来得网页的网址或路径。如果简单这个参数,或者它的价是空字符串,那么窗口就非形其他文档。
窗口名称:可选参数,被辟窗口的称谓。该名由字母、数字与下划线字符组成。可以
是"_top"、"_blank"、"_selft"、"_parent"等。_blank
于新窗口亮目标网页,_selft 在目前窗口展示目标网页,_parent
框架网页中即一切窗口位置形目标网页,_top
框架网页遭到于上部窗口中显得目标网页。相同 name
的窗口只能创造一个,要惦记创立多单窗口则 name
不可知同一。name不能够包含有空格。
参数字符串:可选参数,设置窗口参数,各参数用逗号隔开。
参数表:
top    Number  窗口顶部离开屏幕顶部的如素数
left    Number  窗口左端离开屏幕左端的例如素数
width    Number  窗口的升幅
height    Number  窗口的冲天
menubar    yes,no  窗口有没发生菜单
toolbar    yes,no  窗口起没起工具条
scrollbars    yes,no   窗口有无出滚动条
status      yes,no   窗口有没有产生状态栏

[javascript] view
plaincopyprint?

  1. <script type="text/javascript">  
  2.    window.open('http://','\_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')  
  3.  </script>  

5、关闭窗口(window.close)
close()关闭窗口
用法:
window.close();//关闭以窗口
< 窗口对象>.close();//关闭指定的窗口
比如说:关闭新建的窗口。

[javascript] view
plaincopyprint?

  1. <script type="text/javascript">  
  2.   var mywin=window.open('http://www.baidu.com'); //将新打的窗口对象,存储于变量mywin中  
  3.   mywin.close();  
  4. </script>  

6、显示和隐藏(display属性)
语法:
Object.style.display = value
value值:
none 此因素不见面吃显示(及藏匿)
block 此因素以显得为块级元素(即显示)
mychar.style.display = "block"
7、控制类名(className属性)
className属性设置或返回元素的class属性。
语法:
object.className = classname
作用:
获得元素的class属性;为网页内之某部元素指定一个css样式来改该因素的外观。
p2.className = "two";

相关文章