一、初识js:
1. 事件三要素:事件源、事件(onclick, onmouseover/onmouseout, onmouseenter/onmouseleave)、事件驱动程序
事件源.事件 = function(){
事件驱动程序
};
2. js的数据类型
基本类型:
number(数值)、 string(文字)、 boolean(布尔,true或false)、 null(未没赋值)、 undefined(未定义)
复杂(引用)类型:
判断数据类型: 使用关键字typeof, 语法:typeof 变量名或字面量
数据类型转换
字符串:String(变量或字面量)、变量或字面量+''|""
数值: Number() 必须都是数字的字符串
parseInt() 以数字字符开始解释到非数字字符为止,变转换为整数
paserFloat() 以数字字符开始解释到非数字字符为止,变转换为小数
布尔值:Boolean(),除了0, null, undefined, ''以外都为true
隐式转换:
数值:只要做四则运算或求余都会把字符串转换为数值类型(必须都是数字)。在前面在上正负数的符号时也会做转换, +'123'或-'321'。
字符串:123+''
布尔值:!!'123'
3. 运算符:
+,-,*,/,%(求余数),=(赋值符号,把右侧值的赋给左侧的变量)
比较运算符:
>,<,>=(大于或等于),<=(小于或等于),==(等于,内容等于,类型可以不等于),===(完全等于,内容和类型都要相同) !=(不等于,内容不相同,类型可以相同),!==(完全不等,内容和类型都不等于)!=(不等于,内容不相同,类型可以相同),!==(完全不等,内容和类型都不等于)
逻辑运算符:
&& 与 左右两个值都为true时,结果才是true,其它情况都是false
|| 或 左右两个只要有一个是true,结果就是true,只有在两个值都是false时结果才会是false
! 非 和原有的值取反,是true的就变为false,false的变为true
二、样式控制(script部分)
首先我们清楚自己的目的是什么。布局,就添加样式,可以用c3实现,也可以用js实现。js可以用来修改c3样式。例子如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #box{ width: 100px; height: 100px; background: red; } </style> </head> <body> <div id="box"></div> </body> <script> // 修改div的背景颜色 // 1. 获取到需要修改的标签 var box = document.getElementById('box'); // 2. 修改标签的背景颜色 box.style.background = 'green'; // 修改div的width和height </script> </html>
在没有写script之前,我们可以得到div的背景颜色是红色。
三、变量
变量的命名:
1. 必须以26个字母(大写或小写)、$或_开始
a11bc, $a11bc, _abc11都是合法的命名, *1111, 3aaaa都是非法的命名
2. 变量名中不允许出现空格abc cba就是一个错误的变量命名
3. 不能使用编程语言中的关键字作为变量名var var,var是js的关键字,表示声明一局部变量,所以命名为var是非法的
4. 变量区分大小写var abc和var Abc这是两个不同的变量
5. 使用驼峰命名规则,每个单词的首字母要大写,例如thisIsMyFirstProgramme
全局变量:在那里都可以使用的变量。全局变量声明不需要加关键字var,例如a=10, b=20
局部变量:只限定在一定范围内使用的变量,出了这个范围就找不到这个变量。局部变量声明需要添加关键字var,例如var a=10; a只能在它声明的范围内使用
注意:var e=10; f=20; // e是局部变量,f是全局变量
四、数据类型
首先,我们可以使用typeof的关键字判断数据类型。
对于jvascript来说,它的基本数据类型number, string, undefined, boolean, null
其它都叫做引用类型,还有一个跟数据类型紧密相关的就是:NaN,这个会常常遇到。