zoukankan      html  css  js  c++  java
  • JavaScript简介与使用方法

    1.JavaScript简介

    1.1.JavaScript简史

    最初:网络通信很慢,网页上的数据要传送到数据库验证,然后再返回错误结果,找客观过程要等很久,于是,网景公司开发出一门新语言,当时Java非常热,于是就起名叫JavaScript。

    微软加入:由于JavaScript发展的特别好,软件决定加入,为了不在名字上侵权,就叫JScript

    标准确定:软件加入后,市场上就有两个版本了,为了统一ECMA协会组织了网景,微软等公司,共同确定了基本语法,叫做ECMAScript,各家公司在这个叫做ECMAScript的基本语法上做各自的JavaScript实现。

    1.2.JavaScript的实现

    虽然有了基本的语法ECMAScript,但是JavaScript一共包含了三部分的内容,分别是:ECMAScript语法+DOM+BOM
    ECMAScript:
    ECMAScript:提供了核心语言支持,这个规定了JavaScript的语法,类型,语句,关键字,保留字,操作符,对象等核心类型和语法。
    文档对象模型:DOM
    文档对象模型:Mocument Object Model提供访问和操作页面内的方法和接口 是针对XML但经过扩展用于HTML的应用程序编程接口。DOM把整个页面映射为一个多层次的节点结构,通过DOM创建的这个表示文档的树形图,开发人员获得了控制页面内容和结构的主动权,借助DOM提供的API,开发人员可以轻松自如的删除,添加,替换或修改任何节点
    浏览对象模型:BOM
    浏览器对象模型:BOM Browser ObjectModel,提供与浏览器交互的方法和接口。开发人员使用BOM可以控制浏览器显示的页面以外的部分,即处理浏览器窗口和框架。普遍认为浏览器弹出新窗口,移动,缩放,关闭浏览器,对Cookie的支持等等。都算在BOM里面

    2.在HTML中使用JavaScript

    2.1.<Script>元素

    <script>元素常见的属性有6个,都是可选的

    • async:表示要立即下载脚本,但不应妨碍页面中的其他操作。比如加载其他资源
    • charset:通过src指定的代码字符集,一般不用
    • defer:表示脚本可以延迟到文档完全被解析和显示之后再执行,只对外部文件有效
    • language:已废弃,原表示编写代码使用的脚本语言
    • src:表示包含要执行的外部js文件。
    • type:通常设置text/javascript,表示编写代码使用的脚本语言的内容类型。

    在没有async和defer属性时,页面中的JavaScript是按照从上到下来执行的。JavaScript没有执行完是不会解析页面的。
    不推荐使用<script type="text/javascript" src="example.js"/>没有</script>的方式,这样有些游览器会不认识

    2.2.标签的位置

    一般标签都放在<head>里面,这样便于集中管理,但是按照HTML解析的顺序,此时的JavaScript要先解析才能解析页面。所以现在更多的是将<script>元素放在<body>元素里面的最后面,这样只有当页面解析完之后,才会执行JavaScript。

    2.3.延迟脚本

    <script>元素中使用使用defer属性,使JavaScript脚本会被延迟到整个页面都解析完毕之后再运行,因此使用此属性就是告诉浏览器,立即下载,但是延迟执行。
    <script type="text/javascript" src="example.js" defer="defer"></script>
    但是这个属性是之前给早期的浏览器的,其他浏览器可能会忽略这个属性,就像平常一样执行,所以最好的做法还是将<script>放在脚本底部

    2.4.异步脚本

    HTML5给<script>定义了async属性,该属性可以让脚本不按照顺序执行,指定async属性属性的目的是不让页面等待两个脚本下载执行,从而异步加载其他页面,不过建议异步脚本不要在加载期间修改DOM

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" async src="example1.js"></script>
        <script type="text/javascript" async src="example2.js"></script>
    </head>
    <body>
    
    </body>
    </html>
    

    上面两个<script>先后执行的顺序不一定。

    在XHTM中使用async要设置成:async=“async”

    3.使用外部文件的优点

    <script>元素可以内嵌,也可以外部调用,但是一般推荐外部调用,优点是

    • 可维护性
    • 可缓存,浏览器缓存
    • 适应未来

    4.<noscript>元素

    <noscript>元素可以在指定不支持脚本的浏览器中显示替代内容,但在启用了脚本的情况下,浏览器不会显示<noscript>元素内任何内容。<noscript>元素可以放在<body>
    当出现以下两种情况时,浏览器会把<noscript>元素显示出来

    • 浏览器不支持脚本
    • 浏览器支持脚本,但脚本被禁用
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" async src="example1.js"></script>
        <script type="text/javascript" async src="example2.js"></script>
    </head>
    <body>
    <noscript>
        <p>本页面需要浏览器支持(启用),JavaScript。</p>
    </noscript>
    </body>
    </html>
    
  • 相关阅读:
    Now Task
    数据库的死锁及解决
    Java小对象的解决之道——对象池(Object Pool)的设计与应用
    Java中的对象池技术
    npm install时报错 npm ERR!Windows_NT 6.1.7601
    Angular 入门学习
    React 之 Hello world
    react webpack.config.js 入门学习
    React/React Native 的ES5 ES6写法对照表
    ES5和ES6中对于继承的实现方法
  • 原文地址:https://www.cnblogs.com/cenyu/p/6528083.html
Copyright © 2011-2022 走看看