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代码,
    • 可维护性(改着方便) 和可操作性(用着方便) 非常低
    js 复制代码
    <input type="button" value="按钮" onclick="alert('hello world')" />
  2. 内部式

    • 计算机程序代码默认的执行顺序是从上至下、从左至右( 文档流顺序 )
    • script标签和style标签理论上可以定义在html文件的任意位置
    • 因为代码的执行顺序问题,js程序要操作html标签,就要先定义生成html标签
    • 实际项目中一般都将script标签,也就是js程序,定义在body标签中、html标签下
    js 复制代码
      <!-- 一般情况下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代码程序
    js 复制代码
    • script标签如果定义了src属性,JavaScript代码的执行机制执行原理就规定,定义了src的script标签只会执行外部式代码程序,不会再执行内部式代码程序
    js 复制代码
       <script src="./main.js"></script>
    
      <script src>
        // 定义在script标签中的内部式代码
        // 但是script标签定义了src属性,这个内部式代码就不会执行了
        window.alert('我是内部式程序');
      </script>
  • 总结:理论上script标签可以定义在任意位置,但是因为代码的执行顺序问题,一般script标签标签定义在html标签下
相关推荐
一斤代码40 分钟前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子43 分钟前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年1 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子1 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina1 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路2 小时前
React--Fiber 架构
前端·react.js·架构
coderlin_2 小时前
BI布局拖拽 (1) 深入react-gird-layout源码
android·javascript·react.js
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding3 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js