这一节我们将学习一部分javascript语言基础，如果说html提供给我们认识内容的办法，CSS选择器提供给我们获取内容的办法，那么JavaScript就是把它们付诸于实践，得到可供多多猫使用的结果，这篇javascript教程重在知道如何实现一个操作和这个操作带来的结果，次在完全理解。如果你想对JavaScript做一个完整的学习请百度`javascript教程` ## 值的声明 ```javascript //名字（Mike），为字符串，可用单引号也可以用双引号包裹 var name = 'Mike' ; var name = "Mike" ; //1个等号作用是把右边的值赋予给左边变量，赋值之后，name的值就是Mike了 //年龄（18岁），为数字型 var age=18 ; //是女孩儿吗（true/false），为逻辑型 var is_girl = true ; //是的 var is_girl = false ; //不是 //全部家人（爸爸、妈妈和Mike），为数组 var family = ["爸爸","妈妈","Mike"] ; //赋予father的值是family[0]的值，也就是字符串"爸爸"（数组中第0个就是非程序猿理解的第1个） var father = family[0] ; //赋予mother的值是family[1]的值即字符串"妈妈" var mother = family[1] ; //爸爸和妈妈的详细信息，为对象（key-value键值对，这种对应样式） var father_info = {"name" : "爸爸", "age" : 35} ; var mother_info = {"name" : "妈妈", "age" : 40} ; //赋予father_name的值是"爸爸"字符串 var father_name = father_info.name ; //以上是插件示例中常用的赋值方法。也可以写成以下 var father_name = father_info["name"] ; //赋予father_age的值是35数字型 var father_age = father_info.age ; //或者写成 var father_age = father_info["age"] ; //我们如果要修改爸爸的年龄为40岁，怎么办呢？ //方法1 father_info.age = 40 ; //方法2 father_info["age"] = 40 ; //整个家庭的信息，这是一个对象中有数组，数组中又有对象的示例 var family_info = { "Address" : "中华路108号", "everyone_info" : [ {"name" : "爸爸", "age" : 40} , {"name" : "妈妈", "age" : 40} , {"name" : "Mike", "age" : 18} ] }; 1. 上面这个是一个比较复杂的对象示例，它包含了[全部家人]数组，数组中是Mike,Mike爸爸和Mike妈妈的详细信息。 2. 对象和数组结合起来就能用来描述比较复杂的东西 ``` <br> ## 运算 ```javascript //求和，c的值是11 var a = 5; var b = 6; var c = a + b; //自加，就是自身+1 var a = 1; //方法1，这种就是最正常的 var b = a + 1; //a=1,b=2 //方法2,这种写法a会先给b赋值，然后自己再自加 var b = a++; //a=2,b=1 //方法3，这种a会先自加，然后再给b复制 var b = ++a; //a=2,b=2 ``` 上面是整数型的加法运算，减法写法同上，把加号换成减号即可 <br> ## 逻辑循环 逻辑判断涉及到几个运算符，分辨是 1. 大于，运算符是 `>` 2. 小于，运算符是`<` 3. 等于，运算符是`==` 注意了，这里是两个`=`，因为单个的代表赋值 4. 不等于，运算符是`!=` ```javascript //下面使用的 console.log(x)函数是用来把结果输出到屏幕，可忽略 //判断语句 var a = 5; var b = a > 5; //此时当然是false if (b) { //如果a是真的就会执行这个括号里面的内容 } if (a == 5) //true { //如果a是真的就会执行这个括号里面的内容 } else { //否则执行这里的内容 } //循环输出数组的内容 var family = ['爸爸','妈妈'] //每次运行，i++一次，当i不符合i < 2的条件时就会退出循环 for (var i = 0; i < 2; i++) { console.log(family[i]); //这里会依次输出爸爸，妈妈两个 } //i每次循环都会自加一次，为位置坐标，从0开始 for (var i in family) { console.log(family[i]); //这里会依次输出爸爸，妈妈两个 } //使用的时候，可替换family和item两个，其他固定 family.forEach(function(item){ console.log(item); //这里会依次输出爸爸，妈妈两个 }); ``` <br> ## 字符串操作 1. 查找判断字符串是否存在，主要用到`indexOf`函数，注意大小写 ```javascript //查找字符串中是否有"hello" var str = "hello world"; //字符串位置是从0开始的，如果找到了就返回首字母匹配的位置，没找到就返回-1 var a = str.indexOf("hello"); // a = 0; var a = str.indexOf("wor"); // a = 6; //判断str中是否存在hello字符串 if (str.indexOf("hello") != -1) //如果找到了 { console.log(item); //如果找到了就会执行到这里 } ``` 2. 替换字符串中的某些内容，主要用到`replace`函数 ```javascript var str = "hello world"; //把hello替换成fuck，a 就变成了 "fuck world" var a = str.replace("hello","fuck"); ``` 3. 转换字符串到整数型，主要用到`parseInt`函数 ```javascript var strPage = '123'; var page = parseInt(str); //这样就转成整数了 ``` 这里有人会问把字符串转成整形有什么作用呢？这里举个例子来说明一下： 我们有时候需要从网页中提取书的页数，然后利用上面讲到的for循环来让页数自加组合成不同页数的网址，比如： http://www.xxx.com/page/1, http://www.xxx.com/page/2 假设我们提取的页数是24页 ```javascript for (var page = 1; page < 24 ; page++) ``` 如代码所示，这个24必须是整数型，但是我们提取的页码是`"24"`这样的字符串类型,所以必须转换。 **只有对应的类型才能做对应的操作，整数型才能做加减乘除等操作**