JS——基本内容

一、 简介
1、什么是javascript
JavaScript
是网景(Netscape)集团开发的壹种基于客户端浏览器、面向(基于)对象、事件驱动式的网页脚本语言。
二、为何要使用javascript
表单验证 
网页特效 
小游戏 
Ajax
叁、火速入门
在程序中,即便想编写js代码,有二种形式:
一)在html文件中,在壹对script标记中,直接编写

[javascript] view
plain
copyprint?

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

二)在js中,间接编写,在html中,使用1对script标记直接引用
< script language=’javascript’ src=’demo01.js’></script>
如上两种不能在壹对script标记中重复使用,引用就不可能写文件内容。
2、基础语法 
一、基本格式
JavaScript分别轻重缓急写,变量a和变量A是七个变量。
JavaScript脚本程序须嵌入在HTML文件中。
JavaScript脚本程序中无法包罗HTML标记代码。

[javascript] view
plain
copyprint?

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

每行写一条脚本语句,语句末尾能够加分号。JavaScript脚本程序可以独自小编保护存为三个表面文件。
2、关于script标签 
Language:引用的语言 javascript、php、c#、VBSCRIPT。
src:引用三个外部的js文件。
三、关于变量 
变量是用来一时半刻存款和储蓄数值的容器,变量存款和储蓄的数值是能够变更的。变量要求求先注解才能动用,使用var注解变量。
使用var表明的是部分变量,没有应用var证明的是全局变量。 
变量的命名规则:第一个字符必须是英文字母,也许是下划线(_);其后的字符,能够是英文字母,数字,下划线;变量名不能够是JavaScript的保留字。
变量的功效域:全局变量、局地变量。
肆、数据类型(若类型语言,定义无需制定数据类型) 
String :字符串能够采纳‘’和“”。
Number :数字 10、10.01、100。 
Boolean :布尔型 true、false。 
Undefined :未定义。 
Null :空。 
Object:对象类型。

[javascript] view
plain
copyprint?

  1. <script language=’javascript’>  
  2.    
  3.   //使用js描述1位的完整新闻  
  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、运算符 
壹)算术运算符 
+、-、*、/、%、++、– 
i++ 
++i

[javascript] view
plain
copyprint?

  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>  

二)相比较运算符
> 、<、>=、<=、!=、==、===、!== 
==和===有什么不相同? 
== :判断值是或不是等于。 
===:判断值相当类型也如出一辙。

[javascript] view
plain
copyprint?

  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>  

三)逻辑运算符 
&& 、||、! 
四)赋值运算符 
=、+=、-=、*=、/=、%= 
将运算符左侧的与右手的拓展测算,再赋值给左侧的 
伍)字符串运算符 
+、+=

三、流程结构
一、顺序结构 
代码是单排接着1行执行
2、分支组织 
if、else、else if、switch
3、循环结构 
for、while、do….while、for…..in 
小游戏:
猜数游戏:进入到页面之后、随机多少个数一–500、弹出输入框,由用户输入1个数字,假设这几个数字超越随机数,则提示打了;小于随机数,则提醒小了。等于则提醒答对了。

[javascript] view
plain
copyprint?

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

四、函数 
壹、函数的效能 
代码重复性使用 
模块化编制程序
2、语法:
行使函数前要先定义才能调用,
函数定义有多少个部分:函数名,参数列表,函数体。 

概念函数的格式如下: 

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

}

调用语法:
函数名(实参1,实参2,……,);
三、代码示例
例一:关于函数的定义和调用
//函数的概念
  function display(){
    alert('hello');
  }
 
display();
例贰:关于js中的参数字传送递
在js中,对象类型暗许正是按地址传递

[javascript] view
plain
copyprint?

  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
plain
copyprint?

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

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

再来看对象:

[javascript] view
plain
copyprint?

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

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

表明o和obj是同一个对象,o不是obj的副本。所以不是按值传递。
但那样是否表达JS的靶子是按引用传递的啊?大家再看上面包车型大巴例子:

[javascript] view
plain
copyprint?

  1. var obj = {x : 1};  
  2. function foo(o) {  
  3.   o = 100;  
  4. }  
  5. foo(obj);  
  6. console.log(obj.x); // 还是是一, obj并未有被改动为十0.  

    var obj = {x : 一};
    function foo(o) {
    o = 100;
    }
    foo(obj);
    console.log(obj.x); // 如故是壹, 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的引用副本),但引用相同的值。由于此处的主题项目数字一不可变,所以那边说按值传递、按共享传递未有其余分裂。
基本项目标不可变(immutable)性质:
焦点项目是不可变的(immutable),只有对象是可变的(mutable). 例如数字值十0,
布尔值true, false,修改这个值(例如把一化为三,
把true变成拾0)并不曾什么意思。相比便于误解的,是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属性的值为十0。而后定义另二个变量o,值还是是以此object对象,此时obj和o八个变量的值指向同1个对象(共享同一个对象的引用)。所以修改对象的情节,对obj和o都有影响。但目的无须按引用传递,通过o
= true修改了o的值,不会潜移默化obj
例三:关于函数的重返值难题

[javascript] view
plain
copyprint?

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

例四:关于匿名函数 
  /*var i=function(){
    alert('hello');
  };*/
  i();//变量能够保存数据,也可以保存地址
function
display(){}会在window对象下添加二个叫display的变量,它指向了这一个函数的首地址 
Window.i=display 大家让window对象下的i指向这一个函数的首地址。 
display()等同于i()。
例五:自调用匿名函数

[javascript] view
plain
copyprint?

  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(){})():相当于找到那些地址并推行。
如上这种写法:能够幸免代码库中的函数有重命难点,并且上述代码只会在运营时实行一次,一般用做发轫化学工业作。
例陆:全局变量与部分变量

[javascript] view
plain
copyprint?

  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
plain
copyprint?

  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的使用
在3个函数内部,能够选拔arguments属性,它表示函数的的形参列表,它是以数组形式反映的。
例1:在定义display函数时,它的实参个数必须求与形参个数保持一致,有时,大家定义函数时,形参数目不可能稳定,怎样消除?

[javascript] view
plain
copyprint?

  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来保存全体实参
例二:使用js函数来测算种种集团的员工薪给总额

[javascript] view
plain
copyprint?

  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>  

陆、常用操作
壹、输出内容(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");//多项内容之间用+号连接
第8种:输出HTML标签,并起效果,标签使用“”括起来。
var mystr="hello";
document.write(mystr+"<br>");//输出hello后,输出三个换行符
document.write("JavaScript");
二、警告(alert 音信对话框)
大家在走访网站的时候,有时会忽然弹出三个小窗口,上边写着1段提示音讯文字。假如您不点击“分明”,就不可能对网页做其余操作,这些小窗口便是选拔alert实现的。
语法:alert(字符串或变量);
var mynum = 30;
alert("hello!");
alert(mynum);
 结果:按顺序弹出音信框(alert弹出音信对话框包括3个规定按钮)
注意:
--在点击对话框"分明"按钮前,不能拓展其余其余操作。
--音讯对话框常常能够用于调节和测试程序。
--alert输出内容,能够是字符串或变量,与document.write 相似
叁、确认选项(confirm 音讯对话框)
除了这一个之外向用户提供新闻,大家还期待从用户那里拿走音信。那里就用到了confirm
消息对话框。
confirm
音讯对话框通常用于允许用户做采用的动作,如:“你对吗?”等。弹出对话框(包罗二个规定按钮和2个收回按钮)。
语法:confirm(str);
参数表明:str:在音讯对话框中要展现的文本 再次来到值:Boolean值
返回值:
当用户点击"分明"按钮时,再次回到true
当用户点击"撤销"按钮时,重返false
注: 通过再次回到值能够判明用户点击了何等按钮

[javascript] view
plain
copyprint?

  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>  

四、提问(prompt 消息对话框)
突发性,不仅希望用户回答Yes/No。而是希望得到更特定的响应。那中状态我们得以使用prompt。
prompt弹出音讯对话框,平常用于询问1些要求与用户交互的音信。弹出音讯对话框(包涵2个规定按钮、裁撤按钮与二个文本输入框)。
语法:
prompt(str1,str2);
参数表明:
str一:要体今后消息对话框中的文本,不可修改
str贰:文本框中的内容,能够修改
返回值:
点击明显按钮,文本框中的内容将作为函数重临值
点击撤除按钮,将赶回null

[javascript] view
plain
copyprint?

  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
plain
copyprint?

  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>  

四、打开新窗口(window.open)
语法:
window.open([URL], [窗口名称], [参数字符串])
参数表明:
U奥迪Q5L:可选参数,在窗口中要展现网页的网站或路径。假诺简单那几个参数,只怕它的值是空字符串,那么窗口就不显得另外文书档案。
窗口名称:可选参数,被打开窗口的称谓。该名称由字母、数字和下划线字符组成。能够
是"_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
plain
copyprint?

  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
plain
copyprint?

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

六、显示和藏身(display属性)
语法:
Object.style.display = value
value值:
none 此因素不会被出示(及藏匿)
block 此因素将展现为块级成分(即展现)
mychar.style.display = "block"
7、控制类名(className属性)
className属性设置或重临成分的class属性。
语法:
object.className = classname
作用:
赢得成分的class属性;为网页内的某部成分内定一个css样式来改变该因素的外观。
p2.className = "two";

相关文章