美文网首页
JavaScript基础知识

JavaScript基础知识

作者: 刘涤生 | 来源:发表于2016-03-14 23:44 被阅读96次

    JavaScript会带你进入新境界。你已经了解了HTML标记(结构),而且知道了CSS样式(表示),剩下的就是JavaScript(行为)。如果你只知道结构和表示,当然创建一个漂亮的页面时没有问题的,不过它们只是页面而已。用JavaScript增加行为时,你就能创建一种交互式体验。

    JavaScript能做什么

    一旦有一个包含< script >元素的页面(或者包含引用,指向一个单独的JavaScript文件),你就已经开始编写代码了。JavaScript是一种完备的编程语言,用其他语言能做的事情用JavaScript同样能够做到,甚至还能做得更多,因为我们就在Web页面内部编程。

    你可以要求JavaScript:

    1.建立一个语句

    创建一个变量并赋值、让变量相加、完成计算,还可以使用一个JavaScript库的内置功能。

    var temp  = 98.6;
    var beanCounter = 4;
    var reallyCool = true;
    var motto = "I rule";
    
    temp = (temp - 32) * 5 / 9;
    motto = motto + " and so do you!";
    var pos = Math.random();
    

    2.重复做事情

    循环完成语句,次数可以根据你的需要来定

    while (beanCounter > 0) {
    
        processBeans();
        beanCounter = beanCounter - 1;
    }
    

    3.做出判断

    编写根据应用的状态并按条件执行的代码

    if (isReallyCool) {
    
        invite = "You are invited!"
    
    } else {
    
        invite = "Sorry, we are at capacity.";
    
    }
    

    JavaScript变量

    利用JavaScript,变量可以用来保存各种不同的东西。下面来声明一些变量:

    var winners = 2; //整数值
    var money = 212.2; //浮点数
    var name = "liuguoquan"; //字符串
    var isExist = false;  //布尔值
    

    说明

    • JavaScript不需要为变量指定一个类型,它只是创建一个通用容器,其中可以存放多种东西,所有任何变量都可以存放数字、字符串或者布尔值。因为JavaScript采用的动态类型,也就是说,JavaScript解析器会在代码运行时确定要使用说明类型。
    • var scoops = null;表示“没有值”;
    • var winner;如果不赋值给变量,那么执行这个语句之后,变量winner会赋值为undefined。

    JavaScript变量命名

    • 规则1:变量要以一个字母、下划线或者美元符开头。
    • 规则2:然后变量后面的可以使用任意多个字母、数字、下划线或者美元符
    • 规则3:一定要避开JavaScript的所有保留字。

    JavaScript的保留字如下图所示:

    Javas保留字.png

    JavaScript表达式

    • 数值表达式:Math.random() * 10 + 32 - 11.0
    • 布尔表达式:level == 4
    • 串表达式:"I" + " am " + " hero!"
    • 其他表达式:function() {...},document.getElementById('cows'),new Array(10)

    JavaScript自动类型转换

    • message = 2 + " if by sea,值为2 if by sea,JavaScript会将2转换为串“2”;
    • value = 2 * 3.1, 值为6.2,JavaScript会把整数2转换为一个浮点数。

    JavaScript计算下面的语句会得到什么?

    • numORString1 = "3" + "4"; 值为:"34"
    • numORString2 = "3" * "4"; 值为:12

    JavaScript循环

    • while循环
    <script>
    
      var scoop = 5;
    
      while(scoop > 0) {
    
          alert("More icecream!");
          scoop = scoop - 1;
      }
    
      alert("life without ice cream is not the same!");
    
    </script>
    
    • for循环
    <script>
    
      var scoop;
    
      for(scoop = 5; scoop > 0; scoop--) {
    
          alert("More icecream!");
          
      }
    
      alert("life without ice cream is not the same!");
    
    </script>
    

    HTML5页面增加JavaScript

    要使用JavaScript,必须把它增加到一个Web页面中。不过在哪里加呢?下面介绍向页面增加JavaScript代码的三种方式

    • 联机脚本放在<head>元素中

    向页面增加代码时,最常用的方式就是在页面的head部分放置一个script元素。在head元素中增加JavaScript部分就会最先执行这个代码,然后才解析页面的其余部分。

    <head>
    
        <script>
            ...语句
        </script>
    
    </head>
    
    • 通过引用一个单独的JavaScript文件夹来增加脚本

    还可以链接一个包含了JavaScript代码的单独的文件。将这个文件的URL放在开始script表计的src属性中,另外一定要用< /script>结束这个脚本元素。如果链接到同一目录的某个文件,可以不提供该文件夹的完整路径。

    <script src="mycode.js" >
    </script>
    
    • 将代码增加到文档体中,可以作为内联代码,也可以作为一个单独文件的链接

    也可以把代码直接放在HTML5的body中。同样的,将JavaScript代码包围在script元素中(或者在src属性中引用一个单独的文件)。浏览器解析体时就会执行页面体重的JavaScript(而且通常会从上向下执行)。

    <body>
    
        <script>
            ...语句
        </sript>
    
    </body>
    

    JavaScript与HTML5页面交互

    • 1.在浏览器总加载一个页面时,浏览器会解析HTML,并创建文档的一个内部模型,其中包含HTML标记中的所有元素。
    • 2.JavaScript可以与DOM交互来访问元素以及元素中的内容。JavaScript还可以使用DOM来创建或删除元素。
    • 3.JavaScript修改了DOM时,浏览器会动态更新页面,所有你会看到页面上的新内容。

    相关文章

      网友评论

          本文标题:JavaScript基础知识

          本文链接:https://www.haomeiwen.com/subject/mgnflttx.html