JS——基本内容

Posted 燕林夕

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>  
<script language=\'javascript\'>
  document.write(\'hello\');
</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>  
<script>
  document.write(‘<table></table>\');
</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>  
<script language=\'javascript\'>
 
  //使用js描述一个人的完整信息
  var name=\'张三\';
  var age=30;
  var marry=true;
  var height=1.8;
 
  document.write(\'<ol>\');
  document.write(\'<li>姓名\'+name+\'</li>\');
  document.write(\'<li>年龄\'+age+\'</li>\');
  document.write(\'<li>婚否\'+marry+\'</li>\');
  document.write(\'<li>身高\'+height+\'</li>\');
  document.write(\'</ol>\');
 
  function Person(){}
  var p1=new Person();
  p1.name=\'李四\';
  p1.age=20;2013/12/31
  document.write(p1.name+\'<br>\');
  document.write(p1.age+\'<br>\');
</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>  
<script>
var i=10;
var j=i++;   //先赋值再自加
var k=++i;   //先自加再赋值
document.write(j);   //10
document.write(k);   //12
</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>  
<script>
var i=5;    //Number
var j="5"; //String
if(i==j){
  document.write(\'相等\');
}
if(i===j){
  document.write(\'全等于\');
}
</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>   
<script language=\'javascript\'>
  var n=Math.round(Math.random()*500);  // 随机数
  alert(n);
  while(true){
    var number=prompt(\'请输入一个0--500之间的数字\'); //用户输入
    if(number>n) alert(\'大了\');
    if(number<n) alert(\'小了\');
    if(number==n){
      alert(\'答对了~~~~\');
      break;
    }
  }
</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>  
<script language=\'javascript\'>
  /*var i=function(){
    alert(\'hello\');
  };
  i();*/
  (function(first){
  alert(first);
  alert(\'hello,js\');
  })(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>  
<script>
  function display(){
    //var i=20; //局部变量只在局部作用域起作用
    i=20;    //全局的，会将全局i的值修改为20
  }
  display();
  alert(i);
</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>  
<script>
  var i=10;
  function fn1(){
    var i=100;
    function fn2(){
      i=1000;
      function fn3(){
        i=10000;
      }
      fn3();
      console.log(i);//10000
    }
    fn2();
    console.log(i);//10000
  }
  fn1();
  console.log(i);//10
</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>  
<script>
function display(){
  //没有定义形参，那么所有形参会自动存放到arguments这个属性数组中。
  for(var i=0;i<arguments.length;i++){
    document.write(arguments[i]+\'<br>\');
  }
}
display(\'lisi\',\'zhangsan\',\'wangwu\');  //三个实参
display(\'zhangsan\',\'lisi\',\'wangwu\',\'xiaoqiang\',\'wangcai\'); //五个实参
</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>  
<script>
  function display(){
    var sum=0; //总额
    for(var i=0;i<arguments.length;i++){
      sum+=arguments[i];
    }
    document.write(sum+\'<br>\');
  }
  //A公司
  display(10000,2000,5000);
  //B公司
  display(1000,2000,5000,8000,10000);
</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>  
<script type="text/javascript">
  var mymessage=confirm("你喜欢JavaScript吗?");
  if(mymessage==true){
    document.write("很好,加油!"); 
  }else{
    document.write("JS功能强大，要学习噢!");
  }
</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>  
<script>
    var myName = prompt("输入您的名字");
     if(myName != null && myName != ""){
      document.write("welcom to" + myName);
    }else{
      document.write("welcom to my friend");
    }
</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>  
<script type="text/javascript">
   window.open(\'http://\',\'_blank\',\'width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes\')
 </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>  
<script type="text/javascript">
  var mywin=window.open(\'http://www.baidu.com\'); //将新打的窗口对象，存储在变量mywin中
  mywin.close();
</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";

以上是关于JS——基本内容的主要内容，如果未能解决你的问题，请参考以下文章

VSCode自定义代码片段——JS中的面向对象编程

VSCode自定义代码片段9——JS中的面向对象编程

js代码片段: utils/lcoalStorage/cookie

JS代码片段：一个日期离现在多久了

js常用代码片段(更新中)

js常用代码片段