【一】JavaScript之引入

【一】JavaScript之引入

  • 简称“js”，是web前端开发的核心技术之一，w3c标准的行为标准，主要完成网页与用户之间的交互行为。

  • 简单来说就是，就是用来做特效的，大部分网站里面会动的，用户操作网页以后会产生交互行为的都是js代码完成的。

    • 常见的有多级导航，轮播图，广告，弹窗。。。。。

  • 1995年，由布兰登·艾奇（Brendan Eich）在网景导航者浏览器上作为插件发布，最初命名为Mocha，后来改名为LiveScript，因为推广问题，最终命名为JavaScript

  • 其出现的原因是，网景公司希望能让java代码能在导航者浏览器里面执行，可java的解析器比浏览器还要大，所以才出现javascript，因为布兰登·艾奇（Brendan Eich）本身并不喜欢面向对象语言，因此javascript和java本身并没有多大关系，只是名字相似，方便推广而已。

  • javascript在发展过程中，因为浏览器世界大战的原因，JavaScript的标准并未确定，同期有网景的JavaScript，微软的JScript和CEnvi的ScriptEase三足鼎立

    • 后来在1996年11月，提交给了ECMA（欧洲计算机制造商协会）来制定标准化。也因此完整的

  • JavaScript实际上包含了三部分组成：

    • ECMAScript（基础语法）、
    • BOM（浏览器对象模型）
    • DOM（文档对象模型）

  • 其中ECMAScript从最初的1.0版本

    • 经历了2.0，3.0，3.1（后改名5.0），6.0（2015发布，所以6.0版本也叫ECMA2015），ECMAScript 2016，ECMAScript 2017，ECMAScript 2018，ECMAScript 2019，ECMAScript 2020，ECMAScript 2021，ECMAScript 202....

  • 虽然版本众多，但实际上在学习过程中

    • 所以的js语法代码全部都是基于5.0版本与6.0版本的，随后按年发布的都是小版本，小功能更新而已。

【1】定义

  • javascript是一门基于对象的弱类型脚本语言，同时也是以函数式优先的解释型编程语言。

  • 因为执行环境的需要，变量值会自动发生类型改变的语言，是弱类型语言。

  • python、java、go就属于强类型语言，像php，javascript等就属于弱类型语言。

  • 弱类型语言因为这个功能，带来了一定的语法灵活性，但是也丧失了代码的安全性，所以很多人会吐槽弱类型是不能用于开发大型企业级别应用。

【2】编程语言一般分编译型和解释性：

编译型：

  • 运行程序之前必须对源代码进行编译，编译过程中进行语法检测，编译以后，产生一个二进制执行文件，实际运行的是二进制执行文件。
  • 每次修改源代码，都需要编译一次，重新生成新的二进制执行文件。
    • 例如：C/C++，java，go，rust，C#，.net等语言。

解释性：

  • 运行程序时，解析器直接对于源码进行2遍执行，第一遍进行词法检测，第二遍进行程序执行。

  • 不管是哪一遍都不会产生多余的二进制执行文件。

    • 例如：python，php，javascript

  • 所谓的脚本语言，实际上指代的就是可以作为一个脚本或一个插件保存并运行在其他语言的源码中的编程语言。

  • 所谓的函数式优先，实际上是因为javascript本质上并非面向对象的编程语言，内部针对面向对象的实现并非类似java或者C++那样的实现方式，而是通过函数对象基于原型链的方式来实现了面向对象的。所以函数在js中就是对象，也是一等公民。

【3】使用

  • javascript的解释器内置到了浏览器内核，所以javascript是交给浏览器运行的，所以仅存在浏览器兼容问题，不存在操作系统问题。
  • 当然，因为javascript发展到了今天，几乎占据了浏览器前端市场的100%份额，所以浏览器兼容问题也并不多了。
  • javascript在网页中引入使用类似css，也有3种引入方式：

（1）外部javascript

  • 代码编写在独立的js文件中，然后在html网页中通过script标签的src属性来引入js文件，执行文件中的js代码。类似python的import操作。

  • 1.js，代码：

alert(100)
  • 1.html，代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="1.js"></script>
</head>
<body>

</body>
</html>

（2）内部javascript

  • 3.html，代码：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="1.js"></script> <!-- 当需要单独引入外部js代码，则必须和内部js代码使用独立的script标签！！！ -->
    <script>
    /*
      多行注释
     */
    // 单行注释
    // 此处编写的js代码就是内部js代码，写在script标签中才能被识别为js代码，否则浏览器不识别，
    // 同时，内部js的script绝对不能出现src属性，否则会被浏览器忽略内部js代码
    alert(200)
    </script>
</head>
<body>

<h1 id="h1">h1的内容</h1>

<script>
    // 一个HTML网页中，可以引入0到多个外部js文件，引入的位置，一般要么在head标签，一般要么在body结束标签位置钱
    alert(h1.innerHTML)
    // js默认是单线程运行的
    // 所以，当代码遇到阻塞时，会导致后面的代码无法继续执行，而是进入等待状态
</script>
</body>
</html>

（3）行间javascript

  • 在css学习时，三种引入方式，行间css代码是不能使用的，但是js中三种引入方式都是非常重要的！！！
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!-- 行间js的代码是写在元素的指定属性值中的，on表示当，click表示鼠标点击，因此onclick表示当用户鼠标点击当前元素时
    onclick是一个通用属性，一般在js中叫事件（Event），只要用户看到的内容元素，都有onclick的属性。
     onclick对应的值就是js代码，而且必须符合js的语法。
     -->
    <h1 onclick="alert(200); alert(300)">点我呀</h1>
    <a id="link" href="javascript:alert(link.innerHTML);">点我吧</a>
</body>
</html>

【4】ECMAscript

  • ECMA: 欧洲计算机制造商协会的简称。 js目前的语法标准就是由ECMA牵头组织进行发布的。

针对javascript的基本学习：

  1. 手册（当然已经比较旧了）
  2. mozilla的mdn文档官网：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript
posted @ 2023-07-04 14:16  Chimengmeng  阅读(26)  评论(0)    收藏  举报