• 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 换页符

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

     

     

     

     

     

     

    天再高,踮起脚尖就能更接近阳光
  • 相关阅读:
    ERStudio的使用
    AWK文本处理工具(Linux)
    SubSonic3.0.0.4.1源码包与调用Dll
    实现简单微博功能!(上)
    缓冲区溢出攻击
    移动收入超PC端 盛大文学战略转型初见成效
    Windows错误码解析
    获取Windows操作系统的CPU使用率以及内存使用率
    关于32位程序在64位系统下运行中需要注意的重定向问题(有图,很清楚)
    API Monitor简介(API监控工具)
  • 原文地址:https://www.cnblogs.com/dreamflycc/p/2873246.html
Copyright © 2020-2023  润新知