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

WEB前端学习 Day 6（Javascript 初识+变量+逻辑判断+数据类型）

2015-11-09 12:04 585 查看

什么叫做Javascript，首先，它跟Java无关。它是一种在浏览器上运行的脚本语言，用来通过逻辑判断，循环操作等来控制HTML的节点，获取HTML节点的信息。比如说表单验证，如果用户没有输入，就要弹一个框出来告诉用户没有输入。这样的操作都是跟用户交互的操作，这就自然要获取用户输入的信息。所以，Javascript是用来与用户做交互的，当然也可以编写一些插件来实现一些动画之类的。OK，现在就开始编写Javascript。

首先，来看看Javascript代码在哪里写。之前有讲到过HTML，有一个head标签。head标签里面会用style标签来写css，也会用link标签来引入外部的css。那么Javascript是一样的。它可以在head标签里用script标签来编写javascript代码。引入外部的js文件，还是用script标签。例如：

<html>
<head>
<script>
// 这里是Javascript代码
</script>
<script src="这是一个js文件路径，以 .js 结尾"></script>
</head>
<body></body>
</html>

OK，知道了代码在哪里写，就先来一个hello world。

<script>
alert("hello world");
</script>

直接在浏览器里面打开对应的html就会弹出一个框，内容为”hello world”。alert是一个函数，它的作用就是弹框，括号里面的成为参数，而alert的参数，就是弹出框里显示的内容，所以你传入什么它就会显示什么。OK，我们先来认识一下变量。

什么叫变量，变量就是一个容器，它可以存储数据，存储后还可以读取数据，并且它还可以重新存储数据。这就使得变量的设计很全面了，它的目的是存储数据，又可以替换它存储的数据，又可以读取它存储的数据，当然还可以销毁它的数据，这是浏览器做的事情，我们不需要关心，这样的设计，就让数据非常的灵活。可以到处放到处读，这一点，我坚信所有的语言都一样。OK，知道了变量的作用，看看怎么搞一个变量出来。要想拥有一个变量，首先得声明我需要一个变量，请浏览器分配给我空间用来存储我的数据，那么这句代码为var v1;这句代码，告诉浏览器我要空间给我存数据。v1 = “hello world”; 这句代码告诉浏览器，我存放字v1的数据是什么。OK，来个完整的例子：

<script>
var v1;
v1 = "hello word";
alert(v1); // 直接使用变量名称，就可以读取变量里面的数据。
</script>

OK，到这里我们会声明变量并给变量赋值了。再来看看声明和赋值的简写：

<script>
var v1 = "hello world";
//这里把声明操作(var v1;)和赋值操作(v1="hello word")放在了一句，变成了一句代码，这是一种简写，但是永远永远要记住，这句代码是两句代码的简写，也永远永远要记住，变量永远永远都是先声明后使用的。
</script>

OK，到这里，知道了如何去创建和使用一个变量。

接下来，就来看看如何去判断这个变量是否符合某一个条件，看下面的代码。

<script>
var age = 22;
if(age>18){
alert("成年了");
}else{
alert("未成年");
}
//用if进行判断，注意格式。if后紧接着是一个()，也就是if(条件){处理}。这种格式应该也是非常符合逻辑的。如果 (什么什么成立) {就做点什么}。 后面有一个else，这个的作用就是前面的if都不成立，就是否则，这是非常严密的逻辑，如果 否则。绝对不会漏掉。。所以IF这个逻辑判断也是所有语言都会存在的，只不过格式不一样而已。
</script>

那么有大于(>)就有小于(<)，等于(==)，大于等于(>=)，小于等于(<=)，不等于(!=)。

还有一些条件必须要同时成立或者只要其中一个成立就算成立的情况。

必须要同时成立的条件用 “&&”隔开。

只要一个成立就成立的条件用”||”隔开。这个是回车键上面的那个竖杠，按shift加它就可以了。

举个栗子：

var age = 22;
var sex = "男";
if(age>18 && sex=="男"){
alert("男性并且已成年")
}
if(age>18 || sex=="男"){
alert("男性 或者 已成年");
}

OK ，到这里，知道了变量是什么，如何去创建和使用。知道了怎么判断变量的内容，那么现在就需要知道，变量里面都可以存些什么数据。之前我们存的”hello world”，这是一个字符串。什么叫字符串，那就得看什么是字符，理论上来讲，所有可见的单个的都是字符，比如说 “你”,”我”,”a”,”1”,”，”。有一些字符怪怪的，认不得，那就是乱码，那算不算是字符。我认为那不算了，因为它没有被包含在unicode里面（这是一种国际字符编码，在java里面，字符型的数据，只能存储这里面的数据。所有我认为乱码不算字符）。知道什么叫做字符后，那么字符串，就是一系列的字符。所有”hello”是一个字符串,”world”是一个字符串,”hello world”还是一个字符串。这就是字符串类型数据。很明显，数据类型有很多。比如数字(number)，比如数组(Array)，比如对象（这个后期再讲）。到底有多少种数据类型，可以百度一下，反正我是不赞同百度的各种说法和官方的书法，但我也没说法。回顾一下，我们跟浏览器要变量来存储数据的时候是用var关键字，整句代码就是var v1 = “hello word”。并没有显式告诉浏览器我存的是字符串。浏览器是如何知道我存的就是字符串？那是因为，，，给hello word打上了双引号！！浏览器就根据这个来判断它是什么类型的数据了。所以，在给变量赋值时，参考以下内容：

var number1 = 1; // 创建变量并存储数字，不要带引号。

var string1 = “abcd”;//创建变量存储字符或者字符串，带上引号。

var array1 = [1,2,3,4,5];//创建变量存储数据集合，用 []。

var object1 = {“property1”:”123”};//创建变量存储对象，用 { }

var boolean1 = true; //创建变量并存放bool类型，只能是true和false。

这里有一个array,object,boolean。单独抽出来讲一下

array 就是数组的意思，也就是一系列数据的组合，它用[]包起来，数据之间用逗号隔开。这就是一种数据结构，把数据按照一定的结构给存储起来，并且提供方法去访问数据。这就像是坐牢一样，把牢房给定编号，把犯人压入指定牢房。要释放时，只要记住犯人住的牢房编号，就能很快的找到。array就是一个牢房，给了编号。比如var arr = [1,2,3];我要找到3，编号就是2，这个2是因为array是从0开始计数的，然后一个一个往后数，那么1对应的就是0,2对应的就是1，3对应的就是2了。那么要获取3，就是arr[2];例如：

var arr = [1,2,3]
alert(arr[2]); // 弹出来3
alert(arr[0]);//弹出来1

Object 就是对象的意思，这是非常重要的一个数据结构。它很随意。比如一个飞机，有机翼，轮胎，发动机。可以认为一个飞机就是一个对象。用数据来表示就是：

var feiji = {“part01”:”机翼”,”part02”:”轮胎”,”part03”:”发动机”};

这就构建了一个飞机对象。OK，那现在我要获取机翼，那么就是feiji.part01。得到的就是机翼。feiji.part02得到的就是轮胎。这就是如何去存储一个对象和使用一个对象。这里面牵扯了一个计算机编程重大的思想——面向对象。

boolean就是”是”或”否”。所以取值只能是true和false。在if ()里面，括号里面的最终就是算出来条件是否满足，也就是true或false，if(true){执行}。

到这里，知道了如何创建并使用变量，知道了用if去判断变量的内容，知道了浏览器是如何识别javascript里面的数据类型的。

这次重点在于if判断。数据类型可以慢慢搞。尝试根据描述做一下练习：

1）图片文件的后缀有png,jpeg,jpg,icon等，js文件的后缀是js，css文件的后缀是css。那么，声明一个变量，保存图片格式。然后判断。

如果是图片格式，弹框说明这是图片文件。

如果是js或者是css文件，弹框说明这是前端文件。

如果什么都不是，弹框说明未知文件。

2）搞一个对象来存储一个人的性别，年龄。然后判断：

如果年龄小于18岁并且为男性，弹框提示“骚年”。

如果年龄大于30岁并且为男性，弹框提示“大叔”。

如果年龄大于60岁并且为男性，弹框提示“大爷”。

否则是女性，弹框提示“女性”。

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

标签：

相关文章推荐

新的分享

章节导航