JavaScript学习笔记

JavaScript学习笔记1

JavaScript的组成

1. ECMAScript
   1. JavaScript的标准规范
   2. ES6
2. BOM(浏览器对象模型)
3. DOM(文档对象模型)

---

BOM

1. 简介

   • （Browser Object Document）即浏览器对象模型
   • 提供了独立于内容，而与浏览器窗口进行交互的对象
   • 主要用于管理窗口和窗口之间的通讯，因此其核心是window；
   • BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性；

2. 需要掌握什么？

   • 掌握与浏览器窗口交互的一些对象
     • 可以移动，调整浏览器大小的window对象
     • 可以用于导航的location对象和history对象
     • 可以获取浏览器，操作系统与用户屏幕信息的navigator和screen对象
       +

3. window对象

   • 主要知识点
     • 既是ECMAScript规定的全局global对象，也是JavaScript访问浏览器的一个接口
     • 系统对话框
       • 系统对话框，这些对话框外观由操作系统/浏览器设置决定，css不起作用，所以很多时候可能需要自定义对话框
         1. alert()
         2. confirm()
         3. prompt()
     • 移动窗口，调整窗口大小
     • 导航和打开窗口
     • 时序相关的函数（原来是BOM的实现，而非ECMAJavascript的实现）
   • 目前掌握
     1. 所有全局变量都是window的属性
     2. 所有全局函数都是window的方法

4. document对象

   1. 每个载入浏览器的HTML文档都会成为Document对象；Document对象可以对HTML页面中所有元素进行访问，常有的操作有增，删，改，查。

   2. Document对象是window对象的一部分，可通过window.document进行访问

   3. 常用的对象方法

      1. close()

         关闭用document.open()方法打开的输入流，并显示选定的数据。

      2. getElementByld()

         getElementByName()

         getElementByTagName()

      3. open()

      4. write()

      5. writeIn()

5. location对象

6. navigator对象

7. history对象

事件

1. JavaScript是以事件驱动为核心的一门语言

2. 事件三要素

   1. 事件源，事件，事件驱动程序
   2. 获取事件源，绑定事件，书写事件驱动程序

3. 事件步骤

   1. 现实

      

      • 开关
        • 事件源 ： 开关 名词。js中主要指DOM对象，比如：div，span，button等标签；
        • 事件 ：按下，动词。js中常见的事件有：按下，鼠标经过，鼠标移动，鼠标按下…
        • 时间驱动 ：灯亮了

   2. 编码

      • 获取事件源：document.getElementById(“box”);
      • 绑定事件：box.onclick = function(){程序}；
      • 书写事件驱动程序：DOM操作

4. 常见的事件

   

5. 相关补充

   1. 事件源获取方式

      • getElementById();
      • getElementByClassName();
      • getElementByTagName();
      • getElementByname();
      • querySelector();

   2. 事件绑定

      • 匿名函数绑定

        btn.onclick = function () {
                alert('不要点击!');
            };
        

      • 函数名绑定

        div.onclick = fn;
        function fn(){
            alert('Tom');
        }
        

      • onload事件

        • 页面加载（文本和图片）完毕的时候
        • 作用
          • JS的加载时和html是同步加载的，如果使用元素在定义元素之间，容易报错
          • 整个页面上所有元素加载完毕再执行js内容
          • window.onload可以预防使用标签在定义标签之前

6. 实战小案例

• 作用
  + JS的加载时和html是同步加载的，如果使用元素在定义元素之间，容易报错
  + 整个页面上所有元素加载完毕再执行js内容
  + window.onload可以预防使用标签在定义标签之前

6. 实战小案例