HTML学习心得(6)

时间：2021-04-22 16:54:47

HTML学习心得(6)

JS

什么是javaScript

javaScript和Java有什么联系

根据目前我自己的理解，不要被名字有相似字节所欺骗，这两个语言其实没有什么联系，如果说有的话，应该就是关键字和对象的一些范畴有点相似或者说是有种模仿的感觉。但是实际上一个作为脚本的轻量语言[^7]，一个作为有完整*的大型语言[^8],两者是没有任何可比性的。

JS的内链外链

内链

​ JS的内链，也就是在html文件内的调用使用与css类似，也有两种方式，即在html文件的<head></head>中书写使用或是在<body></body>中使用。

<head></head>内书写

​ 在<head></head>中对JS的代码进行书写时，我们使用<script></script>对我们的JS代码进行包裹，与html及CSS的法则一样，其作用也是用来标明其JS的代码块属性。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script> function displayDate(){ document.getElementById("demo").innerHTML=Date(); } </script>
</head>
<body>

<h1>我的第一个 JavaScript 程序</h1>
<p id="demo">这是一个段落</p>

<button type="button" onclick="displayDate()">显示日期</button>

</body>
</html>

###### <body></body>内书写

​ 与在<head></head>中类似的，我们在<body></body>中对JS的书写和使用同样是在<script></script>中实现，其作用也与上述的一致。

<!DOCTYPE html>
<html>
<body>
<script> document.write("<h1>This is a heading</h1>"); document.write("<p>This is a paragraph.</p>"); </script>
</body>
</html>
外链

与css有些不同的，JS的外链同样使用的是<script></script>标签来实现。JS即可以出现本地的JS文件的链接，也可以调用网上的JS文件进行链接，但调用网络上的文件有可能会受到目标文件服务器和网络的影响，使用的频率没有本地的调用高。

​ 调用本地JS文件：

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="../js/js_for_Seat_selection_nterface.js" ></script>
    </head>
    <body>

    </body>

</html>

调用网络的JS文件：

<!DOCTYPE html>
<html>
<head>
  <script src="http://www.lanrenzhijia.com/ajaxjs/jquery.min.js"> </script>
    </head>
    <body>

    </body>

</html>

​ JS的外链与css类似的，也可以在同个文件里调用多个JS文件使用。其中还有很多较css的相似部分就不在这里重复说了，可以参考之前的css部分内容。

JS的语法关键字

JS的语法关键字有很多很多，因为JS是一门以对象为基础的语言，我们在使用会发现很多例如document.getElementById("demo").innerHTML=x;的语句，这里的getElementById(),innerHTML其实都是JS为我们已经封装（可以理解为打包）好了的方法和方法中的参数。所以我们在这里主要介绍一些基本的关键字。

function

function的作用其实很简单，就是声明一个函数，表明我这里的是一个函数，我们用一个看例子来看：

function myFunction(){
    var x="";
    var time=new Date().getHours();
    if (time<20){
        x="Good day";
    }
    document.getElementById("demo").innerHTML=x;
}

上述的例子就是为我们声明了一个叫做myFunction的的函数，其后的花括号中包含的就是函数中的内容。

var

在JS中，var的作用就是声明一个变量，在JS中，对于变量的类型没有严格的规定，所以JS也是一门弱语言，被定义的变量只有在第一次被赋值时才会被系统分配相应数据类型的空间。

var a;
a=10;

但实际上我们会发现，在实际使用时不仅仅是var可以声明一个变量，$也可以成功声明一个变量，甚至不需要任何的申明关键字也可以直接创建一个变量。但实际上是有非常大的差别的，$是JQ中的一个已经过定义的自定义函数名，而在单纯的JS中是没有任何意义的，一般是在你的文件已经引入了一个JQ数据库后才出现$也可以创建变量的情况，而相较于不使用任何关键字而直接创建一个变量，其实质是在整个JS文件的最上层windows中创建了一个对象属性，详细的解释我会在文末提供一个网络来源的博客地址，其中对创建对象属性有一个较为详细的解释。

所以我们在声明创建变量时一定要使用var关键字，不使用任何关键字创建变量，虽然可行，但却存在着语法错误。

new

与其它的面向对象方法一样的，JS中创建对象所使用的个关键字也是new，我们通过它来创建一个对象。

person=new Object();

在上述的例子中，我们创建了一个名为person的对象，object我们在这里可以简单的理解为一个类型为对象的数据结构。这句代码的意思就是创建一个对象，对象名为person。

JS的结构语句

其实说是JS的结构语句，我们不难发现的，这些结构语句其实很多都是我们在其他语言中也能见到的语言语法，我们在这里也是将它们简单的归类再来说明一下。

###### if else

if else语句主要的作用其实也很简单，就是做一个判断，就像它的翻译 一样——如果….就….. 否则…..。

if(...){
    ...
}
else{
    ....
}

​ 上述的就是它的基本格式，我们可以看到在if后面的小括号中会有一个判断语句，其中的语句用来判断真假来控制语句的执行部分。花括号中的就是满足条件时执行的语句。

这一条语句是可以嵌套的，我们通过对它的嵌套来进行多层的判断。

if(...){
   if(...){
    ...
}
else{
    ....
}
}
else{
    ....
}
while

我们先来看它的格式：

while(...){
 ...   
}

while是一个循环语句，在关键字后面的小括号中，也同样是一条判断语句，用来控制循环的执行。在花括号中是我们的循环内容。

do while

可能我们会发现，这条语句和上一条语句非常的相似，我们还是先来看它的格式：

do{
    ...
}while(...)

它一样是一条控制循环的语句，不过和上一个语句有所区别的，它是先循环后判断，而while是先判断后循环，有的时候我们在不以言大哥情况下使用会达到不一样的效果。

for

js
for( var i=0;1<=10;i++){
...
}

for语句也同样是一个循环语句，我们在上面举出了一个实例，从例子中我们看到，for和它的循环语句是有区别的，我们需要在判断的语句中定义变量，规定执行循环的条件，及控制循环的条件变化。

但实际上，有些时候我们只需要写明控制循环的条件语句就可以了，其他的两条语句可以不在括号中写出。但要注意的，我们需要保留它的分号，不然会出现语法错误。

switch

js
switch(...){
case '...': ...;break;
case '...': ...;break;
....
default:...;
}

这是一个条件选择语句，我们通过判断语句来选择到一个具体的分支，执行相应的语句。

有关于break,default 的作用，我们就不细说了，大家可以去网上查看它的详细信息。

JS的效果实现(HTML的事件响应)

我们已经很简单的介绍了一下JS的语法和关键字，那么我们下面来说在网页中如何触发JS的代码，又或者说是如触发相应的事件。

##### 点击事件

点击事件就是通过页面点击触发的事件，我们要注意的，在网页中其实不是只有按钮才可以作为点击事件的载体，基本上所有的网页元素都可以作为点击事件的载体。也就是说其实我们可以在任意一个元素中添加一个点击事件。

​ 下面我们来看常用的格式：

  <html>
      <body>
          <input type="checkbox" name="ticket_seat"id="tucket_18" class="ticket_input"value="18"onclick="ticket_onclick()">
          <script> function ticket_onclick(){ ... } </script>
      </body>
</html>

​ 在上述的例子中我们可以看到，在标签中加入一个onclick属性，在后面写上要触发的函数名。这样我们在点击网页上的元素之后，我们就可以触发相应的JS函数。

对于我们的onclick字段，我们可以像常规的函数调用来看待它，也就是说，我们也是可以通过它向函数传入参数。

[有关于var的作用] : https://www.cnblogs.com/liuna/p/6140901.html

标签：

相关文章