JavaScript概念的介绍
>JavaScript是web上的一门编程语言,用于和用户进行交互,不需要进行编译,嵌套在html文件中由浏览器引擎加载执行,和Java没有大的联系。
JavaScipt的组成
- 核心(ECMAScirpt)语法,包括基本的流程控制,运算符,数据类型,数组,对象,类,接口等。
- 浏览器对象模型(BOM) browser object model,主要是操作当前浏览器窗口的内容,如页面的跳转和页面刷新等动作。
- 文档对象模型(DOM) document object model,主要是操作html文件中的具体内容(页面元素内容),如页面中有一个div,动态给div添加高宽,添加背景图像,植入需要的文本内容,让div隐藏起来。
JavaScript代码的引入
-
内嵌式
在html文档中,将相关的js代码直接放在标签**
备注:1.引入的位置虽然随意,但是有一个加载顺序的问题,如果js代码存放在head标签中,那么会首先加载js代码,如果js代码中对页面元素内容有控制,则没有效果;如果js代码存放在body标签中并且存放在body页面元素的下面,那么浏览器会首先加载body中的页面元素,再去加载js代码,此时如果js对页面元素有控制,则有效果。
2.如果引入的不是直接对页面元素控制的技术代码,而是第三方js插件,那么一般情况下需要先引入(浏览器先加载),才能进行后续依赖开发。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js代码引入方式</title>
<script type="text/javascript">
prompt("需要给我输入一个文字信息");
</script>
</head>
<body>
<!-- 通过内联式,植入到html文件中 -->
<script type="text/javascript">
/* 就是js代码 多行注释*/
// 单行注释
alert("点我!!!");
</script>
<div>
我是第一个div标签
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Js外联式引入</title>
<!-- 引入外部的js文件 -->
<!-- <script type="text/javascript" src="./one.js"></script> -->
<script type="text/javascript">
window.onload = function reload() {
document.getElementById("one").style.border = "1px solid red";
document.getElementById("one").style.height = "300px";
document.getElementById("one").style.width = "800px";
document.getElementById("one").style.backgroundColor = "green";
}
</script>
</head>
<body>
<div id="one">我是一个div标签</div>
<!-- <script type="text/javascript" src="./one.js"></script> -->
</body>
</html>