Bia 娘 js 教程第一讲——“亲爱的,我们来聊聊天”

时间:2021-10-17 10:09:38

  JavaScript 一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在 HTML(标准通用标记语言下的一个应用)网页上使用,用来给 HTML 页增加动态功能。

  巴拉巴拉巴拉,你把上面的东西读完了,那你也就晕了。因为我看了 遍,我就只明白一点,js这东西,好牛逼哇。我不仅又想,它牛逼,那么它一定要帮我做一件事,这件事,我用 html完成不了,这件事就是——让我的网页“活起来”。对于一名前端来说,javascript用来干什么相比他是什么,mia认为更加重要。

  现在,我就来说说“活起来”。一个人,算了,就说一只 MiaMia 如果要“活起来”,那么 Mia 要有一个属性“行为”。何为行为,行为就是当 Mia 要做一件事的时候,Mia 去怎么做, 又或者是当别人对 Mia 做了一件事的, Mia 会如何反应。 Mia 行为的对象是事件,是自己要去做的事,也是面对的事。

  是不是对于事件 mia 有了行为,Mia 就活起来了?那么,在页面中,控制 mia 的行为(如何响应事件)就是 js中的 function 函数。

 

 

  下面, mia 就以和亲爱的 bia 的一次对话, 作为我们的第一个 js教程案例—— “亲爱的,我们来聊聊天”。

  bia一定看了第一讲的demo,首先我们要清楚,什么时候执行 js 中的 function(如何开启我们的行为)?

 

  我们总是针对事件,做出响应。那么在页面中,我们也就是当触发了事件,我们才去执行 function。比如,页面加载时,mia 想跟 bia 问声好,那么问好这个行为(function helloBia())是被开始交谈,也就是 onload 这个事件触发的。想要做出一个行为时,需要我们确定在何事件下触发何行为。事件是 body 的 onload 事件,想要触发的行为是 helloBia()所以我们在 body 标签中写 onload 事件的响应配置为:

<body onload=”helloBia()”>

 

  helloBia()这个响应需要我们写在大脑里,也就是写在 javascript 标签段中,写法如下:

 

<script type="text/javascript">
    function helloBia(){
        alert("你好,biabia!");
    }
</script>    

  当我们打开页面时,我会主动向你问好哦~

 

  总结:行为总是由何物何事件做出何种行为。再比如:一个按钮想在点击时跳出提示框。那么按钮就是物,点击就是事件,跳出提示框就是行为。何物和何事件都是 html控制的, 那么我们想去实现何种行为, 就是我们学习 js 的关键。在实现行为时,我们会用到很多逻辑,简单来说乃,就是我们的语句,这里我简单说下我们用到的元素选择,if判断和for循环

  

①元素选择:

 

var moodValue = document.getElementsByName("mood");

 

  在此处,我们用到了单选按钮,这个是html里面的表单类元素比较特殊的,因为各个单选标签都用了同一个name,所以我们针对多个单选按钮,可以用同一个name来获取,此类的元素,我们都用document.getElementsByName("xxx")来获取(“xxx”为标签的name)。对于一般的元素,我们用document.getElementById("xxx")来获取(“xxx”为标签的id,比如,divinput等等。还有比较便捷的写法,比如我们获取idbiaWorddiv中的html用的是document.getElementById("biaWord").innerHTML,也可直接写成biaWord.innerHTML获取,这里简单提及,后面几讲详细总结。

  在获取到元素后,我们可以.value来获取元素值,div元素可以用.innerHTML来获取div中的html内容,后面几讲详细总结。

 

if判断:

if(value == "0"){
  ……
}else if(value == "1"){
  ……
}else{
  ……
}    

 

  上面为我们写的去判断单选框值,来确定显示内容div中的内容。省略号处为向divinnerHTML,此处省略。此处用到了和c语言一模一样的语法,if后的括号中跟的是判断条件,即条件表达式,条件表达式的写法,之后几讲详说。

  一般的判断写法是if……else……,else后不用写括号,当不满足if判断条件时,执行else部分。像上面的例子是一个复杂的if判断,可以写多个条件,满足的则执行条件后的大括号语句。除第一个写if外,后面若任由条件判断,则写else if,如为不满足上面所有条件则写elseelse写在最后,else可省略不写。

 

for循环:

 

for(var i=0; i<5; i ++){
        ……
}

  上面是一个for循环的例子,省略号为每次循环执行的语句。其中for循环后面跟的括号内可不是全是条件哦,其中有三条语句,两两用分号隔开。第一条语句 var i= 0 是新建一个用来计数的变量,变量的初值为1。第二条语句为i<5 是判断执行的条件,如果满足条件则执行后面大括号中的语句。第三条语句为 i++ 是在大括号语句执行后,执行的处理语句,此处 i++ 意思为将计数变量i1

  中间的条件可以写的较复杂,比如我们demo中写的 i<moodValue.lengthmoodValue是个数组,moodValue.length为数组的长度,在demo中的for循环意思为循环遍历moodValue数组,找到被选中的单选框元素值,处理显示内容。

 

  好啦,用元素选择,if判断和for循环我们可以写出很多行为哦~后面我们要讲各种变量哦,比如元素、数字、数组,他们都是干嘛的哦,是不是晕乎乎哒,没事,第二讲,我们就说变量哦,期待我们的第二讲哦,biabia~

 

  我们的故事,未完待续。