JavaScript 入门总结

      刚进公司的时候,就听他们在讲使用js实现啥的,那时候,一头雾水。js是啥我都不懂,只看到在头部能直接引用.js文件,第一次用js是使用日期控件,朋友传给我一些js文件,直接引用,在页面里面就能用了。第二次是做地址的时候,我从网上下载了一个实例开始模仿着学习,那时候把代码复制过来自己写了.js文件,才开始慢慢了解,原来js是这样子的呀,慢慢的,发现页面中很多方法都是用js写的,可是我看不懂,只是能看着函数模糊的了解所实现的功能,有的是完全看不懂。主管告诉我:能用js实现的尽量不要在后台写代码。我认识到学习js的重要性了。

     一、简介:

    1、JavaScript是运行的客户机上的脚本语言。

    2、JavaScript一般被用来改进网页设计(特效),验证表单,检测浏览器等等

    二、基础语法:

   1、实现

<script type="text/jscript">
      document.write("对,这就是js!");
 </script>

运行的结果:

对,这就是js!

解释:如果需要把一段 JavaScript 插入 HTML 页面,我们需要使用 <script> 标签(同时使用 type 属性来定义脚本语言)。这样就可以告诉浏览器,js程序从何处开始<script>,从何处结

束</script>。document.write是js命令,用于向页面输出信息。如果没有<script>标签,那么浏览器会把document.write("对,这就是js!")当做纯文本输出。那些不支持 js 的浏览器会把

脚本作为页面的内容来显示。

   2、位置:

页面中的脚本会在页面载入浏览器后立即执行。我们并不是想所有的脚本都这样。有时,我们希望当页面载入时执行脚本,而另外的时候,我们则希望当用户触发事件时才执行脚本。

  (1)、位于 head 部分的脚本:

当脚本被调用时,或者当事件被触发时,脚本就会被执行。当你把脚本放置到 head 部分后,就可以确保在需要使用脚本之前,它已经被载入了。

  (2)、位于 body 部分的脚本:

在页面载入时脚本就会被执行。当你把脚本放置于 body 部分后,它就会生成页面的内容。

  (3)、同时在head和body部分的脚本:

你可以在文档中放置任何数量的脚本,因此你既可以把脚本放置到 body,又可以放置到 head 部分。

  (4)、调用外部js脚本:

有时,你也许希望在若干个页面中运行 JavaScript,同时不在每个页面中写相同的脚本。

为了达到这个目的,你可以将 JavaScript 写入一个外部文件之中。然后以 .js 为后缀保存这个文件。

注意:外部文件不能包含 <script> 标签。然后把 .js 文件指定给 <script> 标签中的 "src" 属性,就可以使用这个外部文件了:

<html>
    <head>
        <script src="xxxx.js"></script>
    </head>
            
    <body>
    </body>
</html>

3、注释:

(1)、单行注释。

<script type="text/javascript">

//这是标题头
document.write("<h1>this is a title</h1>");

//这是段落
document.write("<p>this is a content</p>");

</script>

(2)、多行注释。

<script type="text/javascript">

/*

下面的代码将输出一个标题,一个段落

*/

document.write("<h1>this is a title</h1>");
document.write("<p>this is a content</p>");

</script>

4、变量:

(1)什么是变量?

变量是存储信息的容器,那么在数学里边也经常使用到变量,我们还记得在数学中我们使用变量是需要先声明一个变量的,那么我们的js脚本语言使用变量只是需要先声明,他们区别只在于声

明的方式不同。

(2)声明(创建)js变量和赋值。

在js中我们使用var声明变量,声明变量的同时我们可以为变量赋一个默认值:

var a;

var b="student";

var c=3;

 

那么我们看见以上我们声明了3个变量,一个没有赋值,一个赋的String类型的值,一个是int类型的值,有人会有疑问,是不是写错了啊?这里,大家需要知道,js是一门弱类型的语言,它是

不区分类型的,我们也可以不声明,直接使用,那么它会自动为我们声明,不过,鉴于一个编程的严谨性,我建议大家预先声明再使用。当然js也可以重复声明,原来的值是不会丢失的,不过

一个优秀的程序员,应该是不会犯这种低级的错误吧。

注意:js脚本变量的声明是区分大小写的:var a和var A 是两个不同的变量

(3)js变量的运算。

var A=3;

var B;

var C;

B=A+3;

C=B+8;

和数学一样,在js脚本中,你可以使用变量来做运算

5、运算符:

运算符有下面几种类型,很容易去理解。

算术运算符

赋值运算符

比较运算符

逻辑运算符

条件运算符

注意:在这里要注意一下"+"运算符(用于字符串的 + 运算符):

“+” 运算符用于把文本值或字符串变量加起来(连接起来)。如需把两个或多个字符串变量连接起来,请使用 + 运算符。

var a="where are you going?";

var b="I will going to school.";

var c=a+b;

那么你应该猜到c的值了。c=”where are you going?I will going to school.”;

注意:数字与字符串的"+"运算

        var x1 = 5 + 5;
        var x2 = "5" + "5";
        var x3 = "5" + 5;
        var x4 = 5 + "5";
        var x5 = 10;
      document.write(x1);
      document.write(x2);
      document.write(x3);
      document.write(x4);

结果为:10 55 55 55;

在这里,讲一下条件运算符:

var x1 = 5 + 5;

var x5 = 10;

 x1 = (x5) ? 1 : 0;

6、逻辑判断:

种类:

在 JavaScript 中,我们可以使用下面几种条件语句:

If语句:在一个指定的条件成立时执行代码。

if...else 语句:在指定的条件成立时执行代码,当条件不成立时执行另外的代码。

if...else if....else 语句:使用这个语句可以选择执行若干块代码中的一个。

switch 语句:使用这个语句可以选择执行若干块代码中的一个。

具体的应用跟C#,JAVA,方法一样的,这里就不再详细介绍。

7、消息框:

  消息框类别。

警告框:alert("文本");

确认框: confirm("文本");

提示框: prompt("文本","默认值");

8、函数:

(1)将脚本编写为函数,就可以避免页面载入时执行该脚本。

函数包含着一些代码,这些代码只能被事件激活,或者在函数被调用时才会执行。

你可以在页面中的任何位置调用脚本(如果函数嵌入一个外部的 .js 文件,那么甚至可以从其他的页面中调用)。

函数可以在页面任何地方定义。

案例:

<html>
  <head>
      <script type="text/javascript">
          function  test(){
                alert("消息框");
              }
      </script>
  </head>
  <body>
         <from>
                 <input type=“button”  value=“click me”  onclick=“test()”>
         </form>
  </body>
</html>

(2)、函数(代参函数,无参函数)

function test(var  a,var b){

//有参函数

要执行的程序

}

function test(){

//无参函数

要执行的程序

}

 

(3)、javascript变量的生存周期:

 

当在函数内声明了一个变量后,就只能在该函数中访问该变量。当退出该函数后,这个变量会被撤销。这种变量称为本地变量。您可以在不同的函数中使用名称相同的本地变量,这是因为只有

声明过变量的函数能够识别其中的每个变量。

 

如果您在函数之外声明了一个变量,则页面上的所有函数都可以访问该变量。这些变量的生存期从声明它们之后开始,在页面关闭时结束。

就是我们经常所说的局部变量和全局变量。

 

9、循环遍历:

 

(1)for循环:将一段代码循环执行指定的次数(不再详细介绍)

(2)while循环:当指定条件为true时循环执行代码(不再详细介绍)

 

(3)do…while…循环语法:do...while 循环是 while 循环的变种。该循环程序在初次运行时会首先执行一遍其中的代码,然后当指定的条件为 true 时,它会继续这个循环。所以可以这么说,do...while 循环为执行至少一遍其中的代码,即使条件为 false,因为其中的代码执行后才会进行条件验证。

 

(4)break:跳出循环,结束循环。

 

(5)continue语句详解: continue 命令会终止当前的循环,然后从下一个值继续运行。(跳出本次循环,进行下次循环,并没有结束整个循环)

(6)for…in循环详解:声明用于对数组或者对象的属性进行循环操作,循环中的代码每执行一次,就会对数组或者对象的属性进行一次操作。

语法:for(变量 in 对象){

在此执行代码

}

案例:

     var x="d";
     var listtest=new Array();
     listtest[0]="a";
     listtest[1]="b";
     listtest[2]="c";
     for (x in listtest) {
      document.write(listtest[x]+"<br/>");
  }

10、事件:

1)事件是可以被javascript侦测到的行为。

网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说,我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数。事件在 HTML 页面中定义。

事件举例:

· 鼠标点击

· 页面或图像载入

· 鼠标悬浮于页面的某个热点之上

· 在表单中选取输入框

· 确认表单

· 键盘按键

注意:事件通常与函数配合使用,当事件发生时函数才会执行

2)常用事件案例。

案例1onFouces,onBluronChange这三个事件通常相互配合来验证表单

下面是一个使用 onChange 事件的例子。用户一旦改变了域的内容,checkMail() 函数就会被调用

<input  type=”text”  size=”30”  onChange=”checkMail()”>

 案例2onSubmit用于提交表单之前验证表单域, 

下面是一个使用 onSubmit 事件的例子。当用户单击表单中的确认按钮时,checkForm() 函数就会被调用。假若域的值无效,此次提交就会被取消。checkForm() 函数的返回值是 true 

者 false。如果返回值为true,则提交表单,反之取消提交。

<from  method=”post”  action=”xxx.html”  Onsubmit=”return checkFrom()”>

案例3onMouseOveronMouseOut

onMouseOver 和 onMouseOut 用来创建动态的按钮

下面是一个使用 onMouseOver 事件的例子。当 onMouseOver 事件被脚本侦测到时,就会弹出一个警告框:

  <a href="www.baidu.com"  onMouseOver="alert("that is right");return false"><img src="test.jpg"  width= "100"  height="100"></a>

11、特殊字符:

1)在javascript中我们经常使用反斜杠来插入一些特殊字符,比如在文本字符串中插入省略号、换行符、引号和其他特殊字符。

案例:var txt="what are you going "to" do?";

 alert(txt);

输出:what are you going

如何解决这样的问题呢?

要解决这个问题,就必须把在 "to" 中的引号前面加上反斜杠 (\)。这样就可以把每个双引号转换为字面上的字符串。

案例:var txt="what are you going \"to\" do?";

 alert(txt);

输出:what are you going "to" do?

(2)特殊字符的插入是非常简单易懂的,下边这些特殊字符也都可以使用反斜杠添加到文本字符串中。

 

\'  单引号

\" 双引号

\& 和号

\\ 反斜杠

\n 换行符

\r 回车符

\t 制表符

\b 退格符

\f 换页符

总结到此结束,这只是一些基础的,后面会进一步学习。

 

 

 

 

 

 

天再高,踮起脚尖就能更接近阳光
原文地址:https://www.cnblogs.com/dreamflycc/p/2873246.html