zoukankan      html  css  js  c++  java
  • JavaScript基础1——基本概念

    • 关于JS的概念
    1. JavaScript 是一种弱类型语言。
    2. JavaScript 是一种客户端脚本语言(脚本语言是一种轻量级的编程语言)。
    3. JavaScript是基于对象的。(因为面向对象需要具有封装、继承、多态的特征)
    4. JavaScript是一门解释型的语言,浏览器充当解释器(就是说,代码执行不进行预编译)。
    5. JavaScript执行引擎并不是一行一行的执行,而是一段一段的分析执行。
    • JS的引入与放置位置

    1.引入方式一:使用<script>标签,直接在HTML代码里加入JavaScript代码;

     

    2.引入方式二:使用<script src=”XXX.js”>调用外部的JavaScript(.js)文件;

     

    <script src=”js/jquery.js”></script>

     

    注意:外部的.js文件里面直接写js代码不要在开头和结尾加标签;

    3.引入方式三:在html标签的事件中,超级链接里;

    <button onclick="javaScript语言"></button>
    <a href="javascript:alert('aa');alert('bb')">点击</a>

    4.错误方式:调用外部的JavaScript(.js)文件,就不能再在里面写;

     

    <script src=”xxx.js”>
    var _name =’张三’;
    alert(_name);
    </script>

     

     

    5.多段script的执行顺序

     

       按引入顺序,逐段执行(思考为什么N多页面吧JS写在最后?)

          a.防止页面一次出现,等待时间较长,不符合人的阅读习惯

          b.防止js语言已经出现,但是变量在js之后没有在内存中读取,导致js找不到变量发生错误

    6.JS代码放的位置:页面head和body都可以写

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

        a.把JavaScript代码放到HTML<body>部分

        把页面载入时就需要执行的JavaScript代码放到<body>标签之间。这是一种规范,建议这样做。

        b.把JavaScript代码放到HTML<head>部分

        把当脚本被调用时,或当事件被触发时才会执行的JavaScript代码放到<head>标签之中,这样就可以确保在调用JavaScript之前就载入了它。这是一种规范,建议这样做。

    7.如何与老浏览器打交道

       那些不支持 JavaScript 的浏览器会把脚本作为页面的内容来显示。为了防止这种情况发生,我们可以使用这样的 HTML 注释标签:

     1 <html>
     2 <body>
     3 <script type="text/javascript">
     4 <!--//HTML注释
     5 document.write("Hello World!");//JavaScript代码
     6 //-->//JavaScript注释
     7 </script>
     8 </body>
     9 </html>
    10 /*注释行末尾的两个正斜杠是 JavaScript 的注释符号,它会阻止 JavaScript 编译器对这一行的编译.*/
    • JS的语句与注释

    (1)JavaScript语句结束符

       通常要在每行语句结尾加上一个分号(;),但是根据JavaScript标准语句结尾的分号是可选的,浏览器会把行末作为语句的结尾。

    1 <script type="text/javascript">
    2      document.write("语句1<br>")
    3      document.write("语句2<br>")
    4 </script>

    (2)JavaScript代码块

       JavaScript可以分批的组合起来,使用“{”“}”把多条语句括起来组成代码块。代码块的作用是一并的执行语句序列。

    1 <script type="text/javascript">
    2      {
    3          document.write("<h1>This is a header</h1>");
    4          document.write("<p>This is a paragraph</p>");
    5          document.write("<p>This is another paragraph</p>");
    6      }
    7 </script>

    (3)JavaScript注释

    1 <script type="text/javascript">
    2 
    3      document.write("JavaScript注释!");//双斜杠表示行注释(第一种)
    4      /*
    5      第二种,块注释
    6      */
    7 </script>
    • 关于延迟脚本与异步脚本

    延迟脚本

            HTML4.0.1中定义了defer属性,它的用途是表明脚本在执行时不会影响页面的构造。也就是说,脚本会延迟到整个页面都解析完毕后再执行。 因此,在<script>元素中设置defer属性,相当于告诉浏览器立即下载,但延迟执行。在XHTML文档中,要把defer属性设置为defer=“defer"。

    异步脚本

            html5为<script>定义了async 属性。整个属性与defer属性类似,都用于改变处理脚本的行为。同样,与defer类似,async只适用于外部脚本文件,并告诉浏览器立即下载文件。 但与defer不同的是,标记为async的脚本并不保证按照指定他们的先后顺序执行。指定async的目的是不让页面等待脚本文件下载和执行,从而异步加载页面其他内容。因此,建议异步脚本不要再加载期间操作DOM。

    • JS与DOM的关系

    浏览器有渲染html代码的功能,把html源码在内存里形成一个DOM对象,就是文档对象。浏览器内部有一个JS的解释器/执行器/引擎、如chrome 用V8引擎。我们在html里写一个JS代码,JS代码被引擎所执行,而执行的结果就是对DOM的操作。而对学习DOM操作的结果,就是我们常常看到的特效,比如图片漂浮,文字变色等。学习Javascript要注意:

     

    1. JS语言本身的语法
    2. DOM对象(把body,div,p等节点树看成一个对象)
    3. BOM对象(把浏览器的地址栏,历史记录,DOM等庄子啊一个对象)
    4. 浏览器是宿主,但JS的宿主不限于浏览器,也可以是服务器端
  • 相关阅读:
    SpringBoot项目设置maven打包时间
    SpringBoot热部署配置
    Git笔记
    SpringBoot LogBack日志配置
    CURL使用教程
    Linux 安装Docker及使用
    转发和重定向的区别
    16周作业
    16
    15周
  • 原文地址:https://www.cnblogs.com/Jackie0714/p/4940688.html
Copyright © 2011-2022 走看看