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

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

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

  现在,我就来说说“活起来”。一个人,算了,就说一只 Mia,Mia 如果要“活起来”,那么 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),比如,div、input等等。还有比较便捷的写法,比如我们获取id为biaWord的div中的html用的是document.getElementById("biaWord").innerHTML,也可直接写成biaWord.innerHTML获取,这里简单提及,后面几讲详细总结。

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

②if判断:

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

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

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

③for循环:

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

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

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

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

  我们的故事,未完待续。

时间: 2024-12-09 12:20:33

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

(转)【风宇冲】Unity3D教程宝典之AssetBundles:第一讲

自:http://blog.sina.com.cn/s/blog_471132920101gz8z.html 原创文章如需转载请注明:转载自风宇冲Unity3D教程学院 AssetBundles第一讲:基本使用 AssetBundles是从unity导出你选择的assets,它使用特有的压缩格式并且应用可以实时去读取它.包括模型贴图音频等任何asset类型,甚至整个场景.压缩大小基本能达到zip的效果.AssetBundles从设计时就定位为可以很简单就下载到应用里.如果你想包括自定义的bina

【Python基础教程第2版】——第一讲:基础知识

1.长字符串:(用三引号如'''或者"""来引起来) >>> print """This is a very log string.It continues here.And it's not over yet."Hello world!"""" This is a very log string.It continues here.And it's not over yet.&

Unity3D教程宝典之光影烘焙:第一讲光影烘焙

引言:光影烘焙,英文叫Lightmapping 或 light baking.Unity自带了Lightmapping的功能(是Illuminate Labs出的名为Beast的产品).本系列教程分为4讲:第一讲 光影烘焙第二讲 AreaLight第三讲 Light Probes第四讲 脚本控制其中第三第四讲讲解的是动态物体与烘焙后场景的融合.             光影烘焙 打开方式 Window – Lightmapping有几点需要注意:1.所要烘焙物体的mesh 必须要有合适的ligh

POI教程之第一讲:创建新工作簿, Sheet 页,创建单元格

第一讲 Poi 简介 Apache POI 是Apache 软件基金会的开放源码函数库,Poi提供API给java程序对Microsoft Office格式档案读和写的功能. 1.创建新工作簿,并给工作簿命名 Workbook wb=new HSSFWorkbook(); // 定义一个新的工作簿 FileOutputStream fileOut=new FileOutputStream("c:\\用Poi搞出来的工作簿.xls"); wb.write(fileOut); fileOu

我给bia娘写的交互参考1

好开心,能给女王大人写一些她能用到的东西,觉得自己有点用了呢.我就借我自己总结的东西,一步步的给bia娘说说我理解的交互.对于交互,我概念很浅,我相信在我整理完jQuery +ajax的内容后,我也会对交互有一个新的概念. bia,请听我说. 第一部分,我就以jQuery的简单应用开说,以下是我的案例. 1.jQuery选择元素 ———————————————————————————————— 先看这两个按钮的处理. 按钮代码如下: <input type="button" on

《上古天真论》第一讲文字版

上古天真论篇第一讲主讲:徐文兵  主持:梁  冬播出时间:2008-12-06  23:00—24:00  经文:昔在黄帝,生而神靈,弱而能言,幼而徇齐,长而敦敏,成而等天.乃问于天师曰:余闻上古之人,春秋皆度百岁,而动作不衰:今时之人,年半百而动作皆衰者,时世异耶?人将失之耶?岐伯对曰:上古之人,其知道者,法于阴阳,和于术数, 梁冬:我是梁冬.梁某人.而做在我对面的是我的在求学中医方面的偶像级的老师徐文兵老师,徐老师你好!徐文兵:梁冬好!听众朋友们大家好!梁冬:啊呀,一看就很有这个电台风范,从

10+ 最佳的 Node.js 教程和实例

如果你正在找Node.js的学习资料及指南,那么请继续(阅读),我们的教程将会覆盖即时聊天应用.API服务编写.投票问卷应用.人物投票APP.社交授权. Node.js on Raspberry Pi等等. 以下是Node.js入门的简单介绍,如果你对Node.js略有了解可以直接跳过此部分. 那什么是Node.js呢? Node.js是迄今运用最多的服务端JavaScript运行时环境,使用JavaScript开发跨平台的实时WEB应用. Node.js基于Google的V8 JavaScri

jquery基础教程 - 第一章 JQUERY入门

Jquery基础教程 - 第一章 JQUERY入门 内容提要 1.jquery能做什么 2.jquery为什么如此出色 3.第一个jquery驱动的页面 4.纯javascript与jquery 5.开发工具 6.小结 1.jquery能做什么 取得文档中的元素 -- jQuery为准确的获得需要检查或操纵的文档元素,提供了可靠而富有效率的选择符机制. 找到所有应用了.content class样式的div中所有的P标签             $('div.content').find('p'

ReactiveCocoa入门教程——第一部分

本文翻译自RayWenderlich,原文:ReactiveCocoa Tutorial--The Definitive Introduction: Part 1/2 作为一个iOS开发者,你写的每一行代码几乎都是在相应某个事件,例如按钮的点击,收到网络消息,属性的变化(通过KVO)或者用户位置的变化(通过CoreLocation).但是这些事件都用不同的方式来处理,比如action.delegate.KVO.callback等.ReactiveCocoa为事件定义了一个标准接口,从而可以使用一