【学习笔记01】JavaScript的介绍和引入方式

一、JS是概念

• 😂 概念：轻量级 、弱类型、解释性 、脚本语言
• 😂 历史：自己百度（ES6版本是JavaScript非常重要的一个历史版本）
• 😂 作用：html — 结构、css — 样式、js — 交互

二、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代码，
• 可维护性(改着方便) 和可操作性(用着方便) 非常低
• 实际项目中绝对不要使用

	 <div onclick="window.alert('我是js定义的代码内容!')">我是div标签</div>

说明：在div标签中，直接定义 js代码，即οnclick=“window.alert(‘我是js定义的代码内容!’)”，点击时弹出警告框/提示框/对话框

🥰 2、内部式

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

	<div>我是div标签</div>

  <style>
    div{
      color: black;
      width: 200px;
      height: 100px;
      background: khaki;
    }
  </style>

  <!-- 一般情况下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、外部式

1. 在外部js文件中定义js代码
2. 通过script标签src属性导入外部js文件
3. 在导入外部文件的同时，会直接执行其中定义的js代码程序

	  <!-- 一阶段语法 -->
	  <script src="demo.js"></script>
	
	  <!-- 二阶段语法 -->
	  <script src="./demo.js"></script>

  <script src="./demo.js"></script>

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

	问题1:理论上script标签可以定义在任意位置，但是因为代码的执行顺序问题，
	     一般script标签标签定义在html标签下
	
	问题2：二阶段相对路径的定义
	     一阶段在同一个文件夹中，两个文件的相对路径是文件名.扩展名
	     二阶段在同一个文件夹中，两个文件的相对路径是 ./文件名.扩展名     
	     在服务器中，执行文件 ./文件名.扩展名 和直接定义 文件名.扩展名 意义不同

	问题3:script标签如果定义了src属性，JavaScript代码的执行机制执行原理就规定
	     定义了src的script标签只会执行外部式代码程序，不会再执行内部式代码程序