JavaScript基础之JavaScript引入方式

JavaScript引入方式

JavaScript 程序不能独立运行,它需要被嵌入 HTML 中,然后浏览器才能执行 JavaScript 代码。通过 script 标签将 JavaScript 代码引入到 HTML 中,一般以下方式:

  • 外部方式
  • 内部方式
  • JavaScript元素事件
  • 通过JavaScript伪URL引入

外部形式

外部形式,就是把HTML代码和JavaScript代码都各自单独放在不同的文件中,然后在HTML文档中使用script标签来引入JavaScript代码

步骤:将 JavaScript 代码写在独立的以 .js 结尾的文件中,然后通过 script 标签的 src 属性引入

语法:

// demo.js
document.write('这是demo.js文件内容')

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript引入方式title>
   
    
    <script src="demo.js">script>
head>
<body>
	
  <script src="demo.js">script>
body>
html>

在script标签中,只需引入src这一个属性即可。src,是"source"的意思,表示文件路径

如果在 script 标签使用 src 属性引入了某 .js 文件后,script标签内再写了代码,那么 标签内的代码会被忽略
实例:

DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>JavaScript引入方式title>
head>
<body>
  
  <script src="demo.js">
    // 此处的代码会被忽略掉!!!!
  	console.log("这代码会被忽略掉")
  script>
body>
html>

内部方式

内部方式,指的是把HTML代码和JavaScript代码都放在同一个文件中。其中,JavaScript代码都写在script标签内。

语法:

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>内部引入title>
	 
		
		<script>
            //js代码
			......
		script>
	head>
	<body>
		
		<script>
	 	 //js代码
			......
		script>
	body>
html>

从上该实例中看出,内部样式JavaScript文件不仅可以在head中引入,也可以在body中引入。

其中,""是一种简写形式,等价于如下代码:

<script type="text/javascript">
    console.log('script标签完整写法')
</script>

实例:

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>内部引入title>
	 
		
		<script>
			console.log("这是js代码")
		script>
	head>
	<body>
		
		<script>
		console.log("这是js代码")
		script>
	body>
html>

JavaScript元素属性

元素属性JavaScript,指的是在元素的”事件属性"中直接编写JavaScript代码或调用JavaScript函数
实例:

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>在元素事件中编写JavaScripttitle>
	head>
	<body>
		<input type="button" value="按钮" onclick="alert('你触发了alert事件')">
	body>
html>

运行结果
JavaScript基础之JavaScript引入方式_第1张图片

实例:在元素事件中调用函数

DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>在元素事件中调用函数title>
		<script>
			function example()
			{
				alert("你触发了example函数")
			}
		script>
	head>
	<body>
		<input type="button" value="按钮" onclick="example()"/>
	body>
html>

运行结果
JavaScript基础之JavaScript引入方式_第2张图片

通过JavaScript伪URL引入

在多数支持JavaScript脚本的浏览器中,可以通过JavaScript伪URL地址调用语句来引入JavaScript脚本代码。一般格式如下:

JavaScript:alert("你好")

实例:

<a href="javascript:alert('你好?')">点击a>

伪URL地址可用于文档任何地方,并触发任意数量的JavaScript函数或对象固有的方法。多用于表单验证、超链接等。

你可能感兴趣的:(JavaScript,javascript,开发语言,ecmascript,前端,计算机)