JavaScript——关于 JavaScript、在 HTML 中嵌入 JS 代码的三种方式、变量

作者：胖虎不秃头

2022 年 10 月 05 日
河南
本文字数：4930 字
阅读完需：约 16 分钟

JavaScript

01 关于 JavaScript

1.1 JS 的发展历史

JavaScript 是运行在浏览器上的脚本语言。简称 JS。
JavaScript 是网景公司（NetScape）的布兰登艾奇（JavaScript 之父）开发的，最初叫做 LiveScript。
LiveScript 的出现让浏览器更加的生动了，不再是单纯的静态页面了。页面更具有交互性。
在历史的某个阶段，SUN 公司和网景公司他们之间有合作关系，SUN 公司把 LiveScript 的名字修改为 JavaScript。
JavaScript 这个名字中虽然带有“Java”但是和 Java 没有任何关系，只是语法上优点类似。他们运行的位置不同，Java 运行在 JVM 当中，JavaScript 运行在浏览器的内存当中。
网景公司 1998 年被美国在线收购。网景公司最著名的就是领航者浏览器：Navigator 浏览器。
LiveScript 的出现，最初的时候是为 Navigator 浏览器量身定制一门语言，不支持其他浏览器。
当 Navigator 浏览器使用非常广泛的时候，微软害怕了，于是微软在最短的时间内组建了一个团队，开始研发只支持 IE 浏览器的脚本语言，叫做 JScript。
JavaScript 和 JScript 并存的年代，程序员是很痛苦的，因为程序员要写两套程序。在这种情况下，有一个非营利性组织站出来了，叫做 ECMA 组织（欧洲计算机协会）ECMA 根据 JavaScript 制定了 ECMA-262 号标准，叫做 ECMA-Script。
现代的 javascript 和 jscript 都实现了 ECMA-Script 规范。（javascript 和 jscript 统一了。）

1.2 JS 的特性

JavaScript 程序不需要我们程序员手动编译，编写完源代码之后，浏览器直接打开解释执行。
JavaScript 的“目标程序”以普通文本形式保存，这种语言都叫做“脚本语言”。
Java 的目标程序已.class 形式存在，不能使用文本编辑器打开，不是脚本语言。

1.3 JS 的组成

完整的 JavaScript 由语言基础,BOM,DOM 组成

ECMAScript：JS 的核心语法（ES 规范 / ECMA-262 标准）
DOM：Document Object Model（文档对象模型：对网页当中的节点进行增删改的过程。）HTML 文档被当做一棵 DOM 树来看待。

  var domObj = document.getElementById("id");

复制代码

BOM：Browser Object Model（浏览器对象模型）关闭浏览器窗口、打开一个新的浏览器窗口、后退、前进、浏览器地址栏上的地址等，都是 BOM 编程

1.4 JSP 和 JS 的区别

JSP : JavaServer Pages（隶属于 Java 语言的，运行在 JVM 当中）
JS : JavaScript（运行在浏览器上。）

02 在 HTML 中嵌入 JS 代码的三种方式

2.1 事件与事件句柄

事件：JS 是一门事件驱动型的编程语言，依靠事件去驱动，然后执行对应的程序。在 JS 中有很多事件，其中有一个事件叫做：鼠标单击，单词：click
事件句柄：并且任何事件都会对应一个事件句柄叫做：onclick
事件和事件句柄的区别是：事件句柄是在事件单词前添加一个 on。而事件句柄是以 HTML 标签的属性存在的。
οnclick= "js 代码" 的执行原理页面打开的时候，js 代码并不会执行，只是把这段 JS 代码注册到按钮的 click 事件上了。等这个按钮发生 click 事件之后，注册在 onclick 后面的 js 代码会被浏览器自动调用。
怎么使用 JS 代码弹出消息框？在 JS 中有一个内置的对象叫做 window，全部小写，可以直接拿来使用，window 代表的是浏览器对象。window 对象有一个函数叫做:alert，用法是：window.alert("消息");这样就可以弹窗了。

应用案例

script 标签 javascript 代码必须放在 script 标签中，用户点击以下按钮，弹出消息框

2.2 第一种方式（事件句柄式）：

事件句柄=“js 代码”，把这段代码注册到 onclick 之后，有操作后，js 代码会在浏览器被自动调用
弹窗消息的用法是：window.alert(“消息”)
JS 中的一条语句结束之后可以使用分号“;”，也可以不用
JS 中的字符串可以使用双引号，也可以使用单引号，内双外单或者内单外双。

<input type="button" value="hello" onclick="window.alert('hello js')"/><input type="button" value="hello" onclick='window.alert("hello jscode")'/>

复制代码

alert 弹窗中 window 可以省略

<input type="button" value="hello" onclick='alert("hello jscode")'/>

复制代码

完整示列代码：

<!doctype html><html>  <head>    <title>HTML中嵌入JS代码的第一种方式</title>  </head>  <body>
  <input type="button" value="hello" onclick="window.alert('hello js')"/>
  <input type="button" value="hello" onclick='window.alert("hello jscode")'/>
  <input type="button" value="hello" onclick="window.alert('hello zhangsan')                        window.alert('hello lis')                        window.alert('hello wangwu')"/>
  <!-- window. 可以省略。-->  <input type="button" value="hello" onclick="alert('hello zhangsan')                        alert('hello lis')                        alert('hello wangwu')"/>
  </body></html>

复制代码

2.3 第二种方式（脚本块）：

通过脚本块的方式，页面打开的时候执行，并且遵守自上而下的顺序依次逐行执行。（这个代码的执行不需要事件）。（CSS 为样式块）

javascript 的脚本块在一个页面当中可以出现多次。
javascript 的脚本块出现位置也没有要求，
alert 有阻塞当前页面加载的作用。（阻挡，直到用户点击确定按钮。）

脚本块的格式为 script

<script type="text/javascript">  window.alert("first.......");</script>

复制代码

完整代码如下

<script type="text/javascript">  window.alert("first.......");</script><!doctype html><html>  <head>    <title>HTML中嵌入JS代码的第二种方式</title>    <script type="text/javascript">      window.alert("head............");    </script>  </head>  <body>        <input type="button" value="我是一个按钮对象1" />
            <!--第二种方式：脚本块的方式-->            <script type="text/javascript">
                window.alert("Hello World!"); // alert函数会阻塞整个HTML页面的加载。            </script>
            <input type="button" value="我是一个按钮对象" />
  </body></html>

复制代码

2.4 第三种方式（外部引入 js 文件）：

同一个 js 文件可以被引入多次，但实际开发中这种需求很少
引入 js 文件的同时再写代码，文件会被执行，但代码块不会被执行。

完整代码如下

<!doctype html><html>  <head>    <title>HTML中嵌入JS代码的第三种方式：引入外部独立的js文件。</title>  </head>  <body>    <script type="text/javascript" src="js/1.js">    // 这里写的代码不会执行。    // window.alert("Test");  </script>
  <script type="text/javascript">    alert("hello jack!");  </script>  </body></html>

复制代码

js 文件

window.alert("hello js!");window.alert("hello js!");window.alert("hello js!");

复制代码

03 变量

3.1 变量的声明与赋值

java 中要求变量声明的时候是什么类型，不可变。编译期强行固定变量的数据类型称为强类型语言。数据类型变量名;
对比 javascript，javascript 是一种弱类型语言，没有编译阶段，一个变量可以随意赋值，赋什么类型的值都行，var 变量名;

var i = 100;i = false;i = "abc";

复制代码

当系统没有赋值的时候，会默认给 undefined，undefined 是系统的一个存在值
当系统直接没声明直接调用一个值，会报错

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title>关于JS中的变量</title>  </head>  <body>    <script type="text/javascript">    var a, b, c = 200;       alert("a = " + a);       alert("b = " + b);       alert("c = " + c);     a = false;     alert(a);          a = "abc";     alert(a);          a = 1.2;     alert(a);       </script></body></html>

复制代码

3.2 函数的定义与使用

JS 函数类似 Java 中的方法

Java 中定义方法的格式是
[修饰符列表] 返回值类型方法名(形式参数列表){方法体;}

public static boolean login(String username,String password){  ...  return true;}
boolean loginSuccess = login("admin","123");

复制代码

JS 是一种弱类型，JS 中的函数不需要指定返回值类型，返回什么类型都行

函数的定义格式是

//第一种方式：
function 函数名(形式参数列表){
  函数体;
}
//第二种方式：
函数名 = function(形式参数列表){
  函数体;
}

例如函数

function sum(a, b){    // a和b都是局部变量,他们都是形参(a和b都是变量名，变量名随意。)    alert(a + b);}
sum(10,20);//函数必须调用才能执行
//或者第二个格式// 定义函数sayHellosayHello = function(username){  alert("hello " + username);}       // 调用函数sayHello("zhangsan");

复制代码

配合单击按钮框的逻辑完整代码如下

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title>JS函数初步</title>  </head>  <body>    <script type="text/javascript">    function sum(a, b){       // a和b都是局部变量,他们都是形参(a和b都是变量名，变量名随意。)       alert(a + b);     }
     sayHello = function(username){       alert("hello " + username);     }          // 调用函数     sayHello("zhangsan");       </script>    <input type="button" value="hello" onclick="sayHello('jack');" />   <input type="button" value="计算10和20的求和" onclick="sum(10, 20);" />  </body></html>

复制代码

重载的含义是：方法名或者函数名一样，形参不同（个数、类型、顺序）

JS 当中的函数在调用的时候，参数的类型没有限制，并且参数的个数也没有限制，js 本身自带重载。（弱类型）
在 JS 当中，函数的名字不能重名，当函数重名的时候，后声明的函数会将之前声明的同名函数覆盖

完整代码如下:

<!DOCTYPE html><html>  <head>    <meta charset="utf-8">    <title>JS函数初步</title>  </head>  <body>    <script type="text/javascript">       function sum(a, b){         return a + b;       }     // 调用函数sum     var retValue = sum(1, 2);     alert(retValue);          var retValue2 = sum("jack"); // jack赋值给a变量,b变量没有赋值系统默认赋值undefined     alert(retValue2); // jackundefined          var retValue3 = sum();     alert(retValue3); // NaN (NaN是一个具体存在的值，该值表示不是数字。Not a Number)          var retValue4 = sum(1, 2, 3);     alert("结果=" + retValue4); // 结果=3          function test1(username){       alert("test1");     }          /*     在JS当中，函数的名字不能重名，当函数重名的时候，后声明的函数会将之前声明的同名函数覆盖。     */     function test1(){       alert("test1 test1");     }          test1("lisi"); // 这个调用的是第二个test1()函数.       </script></body></html>

复制代码

3.3 全局变量和局部变量

在函数体之外声明的变量属于全局变量；在函数体当中声明的变量，包括一个函数的形参都属于局部变量
全局变量的生命周期是浏览器打开时声明，浏览器关闭时销毁，尽量少用。因为全局变量会一直在浏览器的内存当中，耗费内存空间
局部变量的生命周期是：函数开始执行时局部变量的内存空间开辟，函数执行结束之后，局部变量的内存空间释放，局部变量生命周期较短

演示代码

// 全局变量var username = "jack";function accessUsername(){// 局部变量 var username = "lisi";// 就近原则:访问局部变量 alert("username = " + username); } // 调用函数 accessUsername();// 访问全局变量 alert("username = " + username);

复制代码

先输出 lisi 后输出 jack 因为局部变量结束后便释放了，所以局部变量没有值而如果单纯没有定义全局变量，全在全局中输出局部变量那会报错

function accessAge(){var age = 20;alert("年龄 = " + age);}       accessAge();       // 报错(语法不对) alert("age = " + age);

复制代码

如果一个变量在声明的时候没有定义 var，默认是全局变量（即使在局部变量中声明）

// 以下语法是很奇怪的.function myfun(){// 当一个变量声明的时候没有使用var关键字,那么不管这个变量是在哪里声明的,都是全局变量.myname = "dujubin"; }       // 访问函数myfun();       alert("myname = " + myname); // myname = dujubin

复制代码

发布于: 刚刚阅读数: 4

原文链接:【http://xie.infoq.cn/article/5337095a54466e89fb8bb33da】。文章转载请联系作者。

胖虎不秃头

关注

还未添加个人签名 2022.07.29 加入

还未添加个人简介

发布

暂无评论

创作场景

JavaScript——关于 JavaScript、在 HTML 中嵌入 JS 代码的三种方式、变量

JavaScript

01 关于 JavaScript

1.1 JS 的发展历史

1.2 JS 的特性

1.3 JS 的组成

1.4 JSP 和 JS 的区别

02 在 HTML 中嵌入 JS 代码的三种方式

2.1 事件与事件句柄

2.2 第一种方式（事件句柄式）：

2.3 第二种方式（脚本块）：

2.4 第三种方式（外部引入 js 文件）：

03 变量

3.1 变量的声明与赋值

3.2 函数的定义与使用

3.3 全局变量和局部变量

胖虎不秃头

评论