您的位置：首页 > Web前端 > JavaScript

从零开始前端学习[43]:初识javaScript，前端的行为层

2017-11-05 21:41 841 查看

初识javaScript，前端的行为层

javaScript是什么？

javaScript是用来做什么的?

javaScript的几种引用形式

提示

博主：章飞_906285288

博客地址:http://blog.csdn.net/qq_29924041

javaScript是什么？？

简而言之：javaScript是一种直接把代码写到HTML文档中，浏览器读取他们进行编译执行的”脚本”语言，记住是脚本语言，可以直接在浏览器中进行查看源码，javaScript的源码是可以直接看到的，它并没有独立运行的窗口，浏览器的窗口即是它的运行的窗口

javaScript是前端行为层中必不可少的一种语言，这里想说一下 java和javaScript语言的关系，从名字上面好像它们都是一个姓氏，但是却是没有半点毛线的语言，可能在javaWeb开发中，比不可少的需要用到javaScript进行web端的开发，但是它们之间确实是没有任何的关系

javaScript和jQuery之间的一点关系？？JQuery是javaScript代码合成的一坨代码，它能够使我们在做特效的时候更方便，也就是jquery是JavaScript基础上封装的一套，所以如果想了解Jquery语言的话，必不可少的就是先把原生的js语言掌握好

javaScript是用来做什么的?

前面讲了js是什么？那js是用来干嘛用的？？这个时候必不可少的应该了解下前端的分层结构吧？

前端的分层结构：
1：html   结构层   从语义的角度描述了html文档的页面的结构
2：css/css3  样式层  从什么的角度装饰了页面
3：javascript  行为层  从交互的角度提升了用户的体验

所以从上面可以看到，结构层和样式层相对来说都是静态的，那么怎么去动态的修改页面中相关的参数属性呢？？这个时候必不可少的就要用到了JavaScript语言，

所以js语言通常是用来操作html页面，响应用户操作，以及验证传输数据的。有写时候会。可能有些人会问，那与后台交互的时候，是怎么玩的？？后台的相关的东西，是无法再检查代码的时候进行查看的。

javaScript的几种引用形式

在学习css样式的时候，我们学了css的几种引用形式，什么行内样式，内部样式，以及外部样式啊，js跟它也类似，同样也有着这样的几种引用形式，不过相对来说有几点需要注意的地方。

1：javaScript的几种写法,js是使用script标签来进行引用的

<script></script> /**html5下面的写法*/
<script type="text/javascript"></script>  /**以前的js的写法*/
<script language="JavaScript"></script>  /**lanagnage 的一种写法*/

2：javaScript放置的位置:

如果单纯的从script标签来看的话，放在任何地方其实都是可以的

但是上面的话并不完整，因为针对html文档来说的话，它是从上到下开始加载的，也就是从header开始加载，到body末尾开始结束，如果随意的放置，会导致一种情况，就是js在加载节点的时候，会出现资源找不到的情况，这其实也就是限制了js随意放置的特性。一般情况下主要放置在body结束的时候，因为这个时候其实html的文档都已经加载完毕

如果想在body的左标签上面进行加载js的话，这个时候所有的操作必须加上:

window.onload = function(){
document.getElementById("box").onclick = function(){
alert('这是我的第一段JavaScript代码~');
};
};

3：js的引入方式

外部js的引入:
<script src="index.js"></script>

注意：在css的时候使用的href，但是到了js，引入变成了src，两者是有区别的，href主要代表的是超文本文件的链接方式，而src代表的是引入源文件的路径

内部引入的话
<script>
//需要处理的js的代码
</script>

除了内部引入的方法外，还有类似css的行内样式一样的写法，有些html标签中会有一些专有属性，比如onClick等的一下专有属性特征，那么这个时候就可以写在行内

属性引入法：
<div id='box' onclick='alert("这是我的第一段JavaScript代码~")'></div>

除了以上三种外，还有可以在标签加载完之前添加js的相关代码，这个时候需要用到一个函数，就是，window.onload，它是促使页面加载完毕之后，然后代码生效

<script>
window.onload = function () {
document.getElementById("p_2").onclick = function () {
alert("在body或者标签加载完之前引入js");
}
}
</script>

以上代码放在body以前都可以生效

还有一种就是标签内部引入法，这个跟上面的不一样，它可以针对指定标签进行特定效果

<p id="p_5">标签内引入js
<script>
document.getElementById("p_5").onclick = function () { alert("p_5") };
</script>
</p>

以上就是五种js代码放置的位置：

完整test代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta charset="UTF-8"><!--申明当前网页的编码集UTF-8-->
<meta name="Generator" content="EditPlus®">   <!--编辑器的名称-->
<meta name="Author" content="作者是谁">
<meta name="Keywords" content="关键词">
<meta name="Description" content="描述和简介">

<style type="text/css">
body,dl,dd,dt,p,h1,h2,h3,h4,h5,h6{ margin: 0;}
ul,ol{margin: 0; list-style: none; padding: 0;}
a{ text-decoration: none; }
*{ margin: 0; padding: 0; }
.clearfix:after{
content: "";
display: block;
clear: both;
}
.main{width: 1200px;box-shadow: 0 0 10px 0 deeppink;margin: 20px auto;}
.main p{width: 200px;height: 200px;margin: 10px ;background: blue;float: left;text-align: center}
</style>
</head>
<script>
window.onload = function () {
document.getElementById("p_2").onclick = function () {
alert("在body或者标签加载完之前引入js");
}
}
</script><body>
<div class="main clearfix">
<p id="p_1">采用外部样式的形式来引入js</p>
<p id="p_2">在body或者标签加载完之前引入js</p>
<p id="p_3">在body或者标签加载完之后引入js</p>
<p id="p_4" onclick="alert('内部样式中引入js')">内部样式中引入js</p>  <!--注意像属性一样写在内部的话，双引号有可能会报错，需要将双引号改成单引号，-->
<p id="p_5">标签内引入js
<script>
document.getElementById("p_5").onclick = function () { alert("p_5") };
</script>
</p>
</div>

<script src="index.js"></script>       <!--html5下面的写法,记住，如果是外部引入的话，这个时候这个标签内部是不能再写任何东西了-->
<script type="text/javascript">
document.getElementById("p_3").onclick = function () {
alert("在body或者标签加载完之hou引入js");
};
</script>  <!--以前的js的写法-->
<script language="JavaScript"></script>  <!--lanagnage 的一种写法-->
</body>
</html>

欢迎持续访问博客

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript 前端初识js js行为层 js引入方式

相关文章推荐

新的分享

章节导航