Java教程

JavaScript概述和HTML中嵌入JavaScript的三种方式

本文主要是介绍JavaScript概述和HTML中嵌入JavaScript的三种方式，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

“成功没有捷径，脚踏实地一步一个脚印，该来的总会来，不好高骛远，不急功近利，付出总会有回报，不管处于哪个阶段，都要一步一个脚印，踏实的走好每一步！”

目录

 

01.JavaScript概述

1.什么是JavaScript?

2.区分JSP和JS

02.HTML中嵌入JavaScript

1.HTML嵌入JavaScript的第一种方式

2.HTML嵌入JavaScript的第二种方式

3.HTML嵌入JavaScript的第三种方式

 

01.JavaScript概述

1.什么是JavaScript?

JavaScript是运行在浏览器上的脚本语言。简称JS。
JavaScript是王景公司（NetScape)的 布兰登·艾奇 开发的，最初叫做LiveScript。LiveScript的出现让浏览器更加生动，使得页面更具有交互性。
JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。

JavaScript在1995年由Netscape公司的Brendan Eich，在网景导航者浏览器上首次设计实现而成。因为Netscape与Sun合作，Netscape管理层希望它外观看起来像Java，因此取名为JavaScript。但实际上它的语法风格与Self及Scheme较为接近。

JavaScript和java没有任何关系，只是语法类似。JavaScript运行在浏览器中，代码由浏览器解释后执行。而Java运行在JVM中。

LiveScript的出现，最初的时候是为Navigator浏览器量身定制一门语言，不支持其他浏览器。

微软一看不行，研发了只支持IE浏览器的脚本语言。JScript。
在两者语言共存的时代，程序员需要写两套程序。这时一个叫做ECMA组织（欧洲计算机协会）根据JavaScript制定了ECMA-262标准，叫做ECMA-Script.

JavaScript是一种属于网络的脚本语言,已经被广泛用于Web应用开发,常用来为网页添加各式各样的动态功能,为用户提供更流畅美观的浏览效果。通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。


2.区分JSP和JS

1、JSP全称是java server page（隶属Java）

      JS全称是javaScript

2、最主要的区别是运行位置不同。

JSP运行在后台服务器上，混合在HTML中的java程序段用于控制HTML的动态生成，并且通常负责调用后台数据库中的数据，形成能够根据使用情况的变化的，具有丰富数据交互效果的页面。

JavaScript 通常是运行在前台，即运行于用户浏览器的，通常不需要服务器的后台支持（AJAX交互例外），混合在HTML中的JavaScript脚本程序直接被浏览器解释执行，以提高页面的美观性和UI操作响应速度为基本目标。

3、JSP在HTML中用<%%>里面实现。

JS在html中用<Script></Script>实现

 

02.HTML中嵌入JavaScript

1.HTML嵌入JavaScript的第一种方式

JS是一门事件驱动型的编程语言，依靠时间去驱动，然后执行对应的程序。在JS中有很多事件，其中一个事件叫做：鼠标单击，单词：click。并且任何事件都会对应一个事件句柄叫做：onclick。

【注意：事件和事件句柄的区别是：事件句柄是在事件单词前添加一个on】，而事件是以HTML标签的属性存在的。

οnclick="js代码“，执行原理是什么？

页面打开的时候，js代码并不会执行，只是把这段代码注册到按钮的click事件上了。等这个按钮发生click之后，注册在onclick后面的js代码会被浏览器自动调用。


怎么使用JS代码弹出消息框。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML中嵌入JavaScript的第一种方式</title>
</head>
<body>
    <!--点击按钮弹出消息框-->
    <input type="button" value="Hello" onclick="window.alert('Hello JavaScript!')"/>
    <input type="button" value="Hello" onclick="window.alert('Hello XingKong!')"/>
    <input type="button" value="Hello" onclick="window.alert ('Hello MengYangChen');
                                                alert('Hello MengYang')
                                                alert('Hello Meng')"/>
</body>
</html>

2.HTML嵌入JavaScript的第二种方式

采用脚本块的方式：
暴露在脚本块中的程序，在页面打开的时候执行，并且遵守自上而下的顺序依次逐行执行。（不需要事件）

JavaScript脚本块可以出现在任何位置，并且可以出现多次。

aler函数会阻塞整个HTML页面的加载。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML嵌入JavaScript的第二种方式</title>
</head>
<body>
    <input type="button" value="我是一个。。"/>
    <script type="text/javascript">
        window.alert("hello world!");
    </script>
    <input type="button" value="我是一个按钮对象"/>
</body>
</html>

3.HTML嵌入JavaScript的第三种方式（推荐）

引入外部的js文件。

引入js脚本文件的语句：
同一个脚本文件可以引入多次。
脚本文件直接写语句就好了。

<script type="text/javascript" src="路径和文件名“></script>

结束的< /script>标签必须有，不能用反斜杠取代，引入文件时，其中间的代码不会执行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>HTML中嵌入JavaScript的第三种方式</title>
</head>
<body>
<script type="text/javascript" src="file/JS1.js"></script>
</body>
</html>

热门IT岗面试题集锦：https://docs.qq.com/sheet/DVWpsS2pIU3ZFZUx3?tab=BB08J2

这篇关于JavaScript概述和HTML中嵌入JavaScript的三种方式的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航