JavaScript的介绍和引入方式

一、JS是概念

• JavaScript轻量级 、弱类型、解释性 、脚本语言

  	语言	功能
  结构层	HTML	搭建结构、放置部件、描述语义
  样式层	CSS	美化网页、实现布局
  行为层	JavaScript	实现交互效果、数据收发、表单验证等

• 1997 年，欧洲计算机制造商协会（ECMA）颁布了 JavaScript 的标准，命名为 ECMAScript。
• ECMAScript 简称 ES，JavaScript 简称 JS。
  • ES6版本是JavaScript非常重要的一个历史版本
  • JavaScript 实现了 ECMAScript
  • ECMAScript 规范了 JavaScript

二、JS的组成

• JavaScript 是由 ECMAScript，DOM 和 BOM 三者组成的。
  1. ECMAScript: 定义了JavaScript 的语法规范,描述了语言的基本语法和数据类型
  2. DOM (Document Object Model): 文档对象模型
     • 有一套成熟的可以操作页面元素的API，通过 DOM 可以操作页面中的元素。比如： 增加个 div，减少个 div，给 div 换个位置等
       • API:
         • application programming interface 的简写;
         • 翻译：应用程序编程接口；大白话：别人写好的代码，或者编译好的程序，提供给你使用，就叫作api
  3. BOM (Browser Object Model): 浏览器对象模型
     • 有一套成熟的可以操作浏览器的API，通过 BOM 可以操作浏览器。比如： 弹出框、浏览器跳转、获取分辨率等

三、JavaScript引入方式

• JavaScript的语法形式类似于css语法形式

1. 行内式

   • 行内式在html标签中直接定义js代码，
   • 可维护性(改着方便) 和可操作性(用着方便) 非常低

   <input type="button" value="按钮" onclick="alert('hello world')" />

2. 内部式

   • 计算机程序代码默认的执行顺序是从上至下、从左至右( 文档流顺序 )
   • script标签和style标签理论上可以定义在html文件的任意位置
   • 因为代码的执行顺序问题，js程序要操作html标签，就要先定义生成html标签
   • 实际项目中一般都将script标签，也就是js程序，定义在body标签中、html标签下

     <!-- 一般情况下script标签,也就是js程序都是定义在html标签后-->
     <script>
       // 在script标签中,对div标签进行交互操作
       const oDiv = document.querySelector('div');
   
       oDiv.addEventListener( 'click' , function(){
         this.style.color = 'red';
         this.style.width = '400px';
         this.style.height = '200px';
         this.style.background = 'pink';
       });
     </script>

3. 外部式

   • 在外部js文件中定义js代码
   • 通过script标签src属性导入外部js文件
   • 在导入外部文件的同时，会直接执行其中定义的js代码程序
   • script标签如果定义了src属性，JavaScript代码的执行机制执行原理就规定，定义了src的script标签只会执行外部式代码程序，不会再执行内部式代码程序

      <script src="./main.js"></script>
   
     <script src>
       // 定义在script标签中的内部式代码
       // 但是script标签定义了src属性，这个内部式代码就不会执行了
       window.alert('我是内部式程序');
     </script>

• 总结：理论上script标签可以定义在任意位置，但是因为代码的执行顺序问题，一般script标签标签定义在html标签下