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

来源：互联网发布：电动机控制模拟软件编辑：程序博客网时间：2024/05/17 02:47

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

这里写图片描述

欢迎持续访问博客

阅读全文

1 0