美文网首页
JavaScript基础--基本概念

JavaScript基础--基本概念

作者: 绚丽多彩的白 | 来源:发表于2020-09-11 12:34 被阅读0次

    什么是JavaScript?

    • JavaScript简称JS,是前端开发的一门脚本语言(解释型语言)
      • 解释型语言:程序执行之前,不需要对代码进行编译,在运行时边解析边执行的语言
      • 浏览器工作原理
      • 编译型语言:程序执行之前,需要一个专门的编译过程,把程序编译成机器语言的文件,比如exe文件

    JavaScript作用

    • HTML 提供网页上显示的内容(结构)


    • CSS 美化网页(样式)


    • JavaScript 控制网页行为(行为)



    JavaScript发展史

    • JavaScript起源于Netscape公司的LiveScript语言
      • 1994年网景公司发布历史上第一个比较成熟的浏览器(Navigator 0.9), 但是只能浏览不能交互
      • 1995年为了解决表单有效性验证就要与服务器进行多次地往返交互问题,网景公司录用Brendan Eich(布兰登·艾奇),他在 10 天内开发出 LiveScript 语言
      • 在 Netscape Navigator 2.0 即将正式发布前,Netscape 将LiveScript 更名为 JavaScript, 目的是为了蹭Java的热度
      • 所以Java和 JavaScript之间的关系就像老婆和老婆饼一样

    参考文献


    JavaScript组成

    • ECMAScript:JavaScript的语法标准
      • ECMA是European Computer Manufacturers Association的缩写,即欧洲计算机制造商协会
      • ECMAScript是ECMA制定的脚本语言的标准, 规定了一种脚本语言实现应该包含的基本内容
      • JavaScript是脚本语言的一种,所以JavaScript也必须遵守ECMAScript标准,包含ECMAScript标准中规定的基本内容
    • DOM(Document Object Model):JavaScript操作网页上的元素(标签)的API
    • BOM(Browser Object Model):JavaScript操作浏览器的部分功能的API

    JavaScript书写格式

    • 和CSS书写格式一样, JavaScript也有三种书写格式, 分别是"行内式"、"内嵌式"、"外链式"
    • 和CSS书写格式一样, JavaScript三种书写格式中也推荐大家使用"外链式", 遵守结构、样式、行为分离

    • 行内式格式(不推荐)
    <div onclick="alert('hello world');">我是div</div>
    

    • 内嵌式格式
    </body>
    ... ...
    <script type="text/javascript">
           alert("hello world");
    </script>
    </body>
    
    • 内嵌式注意点
      • 通常将js代码放在body的最后, 因为HTML是从上至下加载, 而js代码通常是给标签添加交互(操作元素), 所以需要先加载HTML, 否则如果执行js代码时HTML还未被加载, 那么js代码将无法添加交互(操作元素);
      • HTML页面中出现<script>标签后,就会让页面暂停等待脚本的解析和执行。无论当前脚本是内嵌式还是外链式,页面的下载和渲染都必须停下来等待脚本的执行完成才能继续, 所以如果把js代码写在head中, 那么js代码没有执行完毕之前后续网页无法查看
      • 如果不愿意把js代码放在body的最后, 也可以放在head标签中, 但是为了保证执行js代码时HTML一定已经被加载了, 那么需要添加一些额外代码.(不推荐)
        <script>
            window.onload = function () { // 必须添加这句
                alert("hello world");
            }
        </script>
    </head>
    

    • 外链式格式
    <script type="text/javascript" src="01-js书写格式.js"></script>
    
    • 外链式注意点
      • 外链式的script代码块中不能编写js代码, 即便写了也不会执行
    <script type="text/javascript" src="01-js书写格式.js">
        alert("hello world"); // 不会被执行
    </script>
    
    • 由于每次加载外链式的js文件都会发送一次请求, 这样非常消耗性能, 所以在企业开发中推荐将多个JS文件合成为一个JS文件,以提升网页的性能和加载速度

    JS中的常见输出方式

    • 在控制台中显示内容


    • 在浏览器弹窗中显示内容
    alert("hello world");
    
    prompt("请输入内容:");
    
    confirm("你好吗?");
    
    • 在页面中显示内容
    document.write("hello world2");
    
    • 注意点:
      • JS中严格区分大小写
      alert("hello world"); // 正确 
      Alert("hello world"); // 错误
      
      • 每一条JS语句以分号(;)结尾
        • 如果不写分号,浏览器会自动添加,但是会消耗一些系统资源
        • 并且有些时候浏览器会加错分号,所以在开发中分号必须写
      • JS中会忽略多个空格和换行
      alert
      (
      "hello world"
      );  
      

    相关文章

      网友评论

          本文标题:JavaScript基础--基本概念

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