zoukankan      html  css  js  c++  java
  • JavaScript 基础知识

    1、在语法上,<script>标签可以写在<html></html>标签的任何位置,type类型是必须的,用来规定脚本的MIME类型,对于javascript其MIME类型是“test/javascript”,language属性不建议使用。
    <script type="text/javascript">
          //借助window.onload事件,在文档加载之后进行相关操作
         window.onload=function(){
          //获取按钮对应的元素节点对象
         var btn=document.getElementByTagName("button")[0];
          //绑定单击响应函数
         btn.onClick=function(){
          //打印文本值
         alert(this.firstChild.nodeValue);
          }    
         }

    2、在文档中直接插入javascript代码。

        <script type="text/javascript">

              alert("Hello World!");

        </script>

    3、连接到外部的javascript文件<script>标签的src属性,规定外部脚本文件的URl

        <script type="text/javascript" src="script/jquery-1.7.2.js"></script>

    4、function sum(num01,num02){   //function是关键字,sum函数名同时也是函数,num01,num02是参数,不需要指定类型

                  return num01+num02;

         }

         var result=sum(2,3);//函数的掉用

         var obj=new Object();

         obj.method=sum;

         alert(obj.method(2,3));

    5、JavaScript 代码写在什么位置

         -------------如果想写在html内

         <button onclick="alert('hello')">ClickMe</button>

          js和html强耦合不利于代码的维护。例如10个button标签处都修改

          -------------如果写在<head> 标签内
         这个位置更符合习惯,但有严重问题: 在 body 节点之前执行的代码无法直接获取 body 内的节点。 原因:此时 html 文档树还没有加载完成, 更准确的说就是——内存中的 DOM 结构还不完整,不包括未加载的 DOM 节点,所以相关节点 JavaScript 程序获取不到

    6、浏览器加载原理分析

         浏览器按照从上到下的顺序下载 HTML 文档,一边下载,一边加载到内存, 不是全部下载后再全部加载到内存。 另外,DOM 树结构的绘制优先于关联元素的加载,比如图片。浏览器执行 JavaScript 脚本有两大特性载入后马上执行、执行时会阻塞页面后续内容(包括页面的渲染、其它资源的下载)浏览器加载 HTML 文档时,如果遇到<script>标签就会停止后面元素的加载, 先对 JavaScript 脚本文件进行解析和执行。

     7、widow.onload事件是在当前文档完全加载完后被触发,此时HTML文档树已经加载完成,可以获取到当前文档中的任何节点。最终的执行顺序为:

        1st 浏览器加载HTML文档
        2nd 遇到<script>标签停止加载后面的HTML元素,开始解析执行JavaScript 代码
        3rd 将封装了相关操作的响应函数绑定到window.onload 事件上
        4th 加载HTML元素,绘制DOM 结构
        5th HTML文档加载完成,触发window.onload 事件
        6th 开始执行window.onload事件响应函数中的JavaScript代码


         
         

  • 相关阅读:
    es6 简介
    npm 快速开发技巧
    css清除浮动方法
    mui 总结
    7种 JS 创建对象的经典方式
    JavaScript 的 this 原理
    使用定时器
    dom 操作及方法
    JavaScript的6种继承方式及其优缺点
    贪吃蛇游戏代码
  • 原文地址:https://www.cnblogs.com/d685600/p/3641079.html
Copyright © 2011-2022 走看看