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

    文章目录

    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");

      • 1

    • 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")'/>

    • 1
    • 2

    alert弹窗中window可以省略

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

    • 1

    完整示列代码：

    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')"/>

	
	<input type="button" value="hello" onclick="alert('hello zhangsan')
												alert('hello lis')
												alert('hello wangwu')"/>

	body>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22

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

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

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

    脚本块的格式为script

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

    • 1
    • 2
    • 3

    完整代码如下

    <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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16

    js文件

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

    • 1
    • 2
    • 3

    03 变量

    3.1 变量的声明与赋值

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

    • 1
    • 2
    • 3
    • 当系统没有赋值的时候，会默认给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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24

    3.2 函数的定义与使用

    JS函数类似Java中的方法

    Java中定义方法的格式是

    [修饰符列表] 返回值类型 方法名(形式参数列表){
    方法体;
    }

    public static boolean login(String username,String password){
	...
	return true;
}

boolean loginSuccess = login("admin","123");

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6

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

    函数的定义格式是

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    例如函数

    function sum(a, b){
    // a和b都是局部变量,他们都是形参(a和b都是变量名，变量名随意。)
    alert(a + b);
}

sum(10,20);//函数必须调用才能执行

//或者第二个格式
// 定义函数sayHello
sayHello = function(username){
	alert("hello " + username);
}
		   
// 调用函数
sayHello("zhangsan");

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

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

    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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27

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

    • 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>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40

    3.3 全局变量和局部变量

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

    演示代码

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12

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

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9

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

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

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10

  • 相关阅读:
    Flutter 2.10 现已发布
    go开发之个人微信的开发
    Redis 哈希Hash底层数据结构
    Mathematica求解不定积分与定积分
    2022.08.08_每日一题
    css的三大特性
    了解并解决 Flutter 中的灰屏问题
    如何在快节奏的生活下摆脱焦虑？
    美联储加息已成“政治正确” 美元涨势难以阻挡？
    云小课｜MRS基础原理之MapReduce介绍
  • 原文地址：https://blog.csdn.net/m0_61163395/article/details/126042173