js基础

js语法

js书写

• script[src 引入js文件的路径][type=“text/javascript” 文件类型,可省略]
• 在拥有src属性的script标签写js代码，无效
• head>script,body>script
• a[href=“javascript:js代码;”]

js注释

• // 单行注释
• /* 多行注释,不要嵌套多行注释*/

声明变量及赋值

1、声明变量,通过关键字var

    var cup;

2、给变量赋值,通过=,将右边的值赋给左边的变量

 	cup = "orange";

3、同时声明变量及赋值

  var fruit = "lemon";

4、同时声明多个变量,用逗号隔开

   	var a,b,c;
    	a = 10;
    	b = 20;
    	c = 30;
   	var a = 10,b = 20,c = 30;

5、变量名的命名规则：

不能以数字开头,包含字母、数字、_、$
不能使用关键字
严格区分大小写
建议：
(1) 见名知意
(2) 驼峰命名 myUserName

数据类型（值）

 1. 基本数据类型：number, NaN, string, boolean (基本数据类型传值时，传递的是值)
     (1) 数字类型number
        a) 普通数字
        b) NaN：代表非数字
		   * 与任何数进行运算都得到NaN
		   * 不等于任何数，甚至不等于自己
	       * isNaN()：判断是不是非数字，是数字就返回false，其他值都返回true	

     (2) 字符串类型 string
         a) 有引号的值都是字符串类型
         b) 字符串中还存在引号
             * 将外层引号替换成另外一种
             * 通过转义字符\
                 
     (3) 布尔类型 boolean
             a) 只有两个值：true 、false
             
     (4) 进制：
     	 二进制 : 0-1
     	 八进制 : 0-7 
     	 十进制   0-9
     	 十六进制 : 0-9 a-f
     	 进制之间的转换：
     	  a) 将十进制转成多进制:  数字.toString(n进制)
     	  b) 将多进制转成十进制:  parseInt("n进制的字符串",n进制) 

2.特殊数据类型：null, undefined
   (1) null空对象，只有唯一的值null
	  a)注意代码的执行顺序

   (2) undefined 代表的是声明变量未赋值，只有唯一的值undefined。
	  a) 注意区分报错信息： ** is not defined。代表变量未声明。

3.引用数据类型
	(1) Object、Array数组
		a) 引用数据类型传值时，传的是地址

4.判断数据类型的方法:typeof()
	typeof(123);//"number"
	typeof("");//"string"
	typeof(true);//"boolean"
	typeof(null); //"object"
	typeof(undefined);//"undefined"
		 注意：typeof()输出的结果都为字符串

数据类型转换：

1、直接转换

• Number() 转换成数字类型
  字符串->数字： 空字符串转成数字零；若可以转换成数字，返回值就是数字；若不能 转成数字就是NaN
• 布尔值->数字： true->1,false->0
  String() 转换成字符串类型
  直接加引号
• Boolean() 转换成布尔类型
  除了0、NaN、""、null、undefined转成false，其他都转成true。

2、隐式转换

若运算无法进行下去的时候，会尝试将数据类型进行隐式转换后，再运算。
若隐式转换后依旧无法运算，会返回NaN

运算

     (1) 算术运算 + - * /  %取余
         备注： +号两侧只要有一侧为字符串，就代表字符串拼接
         备注： 隐式转换: 若运算无法进行下去的时候，会尝试将数据类型进行隐式转换后，再运算

     (2) 赋值运算 -=  *=  /=  %=
		a) =  将右边的值赋值给左边的变量（不是等于的意思！！！）
        b) += 将右边的值追加给左边的变量

	 (3) 关系运算（返回值都是布尔值，可以进行隐式转换成数字进行比较）
		1. >  <  >=  <=
		2. == 判断左右两边的值是否相等，类型不同先隐式转换成数字再比较
		3. != 判断左右两边的值是否不相等。隐式转换后不相等才返回true
		4. ===全等于，只有当值及数据类型都一致才返回true
		5. !==不全等于，当值或者类型某个不一致都返回true
		
	    关系运算符的比较规则:
		7. 数字和数字比较, 直接比较大小
		8. 数字和字符串比较, 字符串转换为数字后再比较
		9. 字符串和字符串比较, 进行字符的ASCII码值比较

	(4) 逻辑运算
       	1. && 与运算。运算两边返回值都为true，才返回true
       		a) && 运算左边返回值为false，不再执行右边的代码
            b) && 运算左边返回值为true，右边代码直接返回对应的值
            a) 2<3 && 'aa' //'aa'
                	
       	2. || 或运算。运算两边返回值都为false，才返回false
           	a) || 运算左边返回值为true，不再执行右边的代码
            b) || 运算左边返回值为false，右边代码直接返回对应的值
            		
       	3. ! 非运算，取反。

	(5) 一元运算
       	1. ++ 对变量进行加1运算
       	      a) ++变量 : 先对变量进行加1运算，再将变量新的值返回出去
       	      b) 变量++ : 先将变量的值返回出去，再对变量进行加1运算
       	2. -- 对变量进行减1运算
       	      a) --变量： 先对变量进行减1运算，再将变量新的值返回出去
       	      b) 变量-- : 先将变量的值返回出去，再对变量进行减1运算
	        	 var a = 10;
	        	 var b = a++;
	        	 console.log(a,b);
        	 
	(6) 三元运算
		用于双分支情况
		   条件？满足条件执行这里的代码: 不满足条件执行这里的代码
		     var c = a>b ? a : b;
		     
	(7) 运算优先级：
		, [], ()					                对象成员存取、数组下标、函数调用、分组等
		++, –, ~, !, delete, new, typeof, void	    一元运算符
		*, /, %						                乘法、除法、取模
		+, -						                加法、减法、字符串连接
		<, <=, >, >=, instanceof			        关系比较、检测类实例
		==, !=, ===, !==				            等于、恒等(全等)
		&&						                    逻辑与
		||						                    逻辑或
		?:						                    三元运算条件
		=, +=, -=, *=, /=, %=				        赋值、运算赋值
		,						                    多重赋值、数组元素

输出

1. alert(具体的值||变量(不要加引号)) 弹窗
2. document.write(具体的值||变量(不要加引号)) 往body里面追加内容
3. console.log(具体的值||变量(不要加引号)) 打印到控制台console，一般用于代码调试
4. ××.innerHTML=’’;给××元素添加内容，内容可以包含标签。

字符串拼接

var laotian = 1000;
var lemon = 20000;
var meng = 5000;
var color = "blue";
var caiwu = 'xiaohua'

var res = laotian + lemon + meng;
document.write('<span style="color:'+color+';">财务这个月要发的钱是'+res+'元</span>'+caiwu);
//口诀：字符串中间拼接变量：引号引号(最外层)，加号加号，变量

计算抗洪时间

var total = 119;（总时间119h）
var day = parseInt(total/24);
var hour = total % 24;
console.log("战士连续作战"+day+"天"+hour+"个小时");

常用的数学方法

1. parseInt()取整数；parseInt(“12aa12”)//12
2. parseFloat()取浮点数
3. Math.round()四舍五入
4. Math.random() 获取0-1的随机数，包含0，不包含1
5. 数字.toFixed(n位小数)，给该数字保留多少位小数
6. Math.pow(底数,次方) 乘方

案例： 进行文本框的加减乘除

   1. 获取元素，用变量接收document.getElementById("id名")
   
   2. 点击按钮时，执行函数。
      (1) 给按钮添加点击事件 onclick="函数名()"
      (2) 定义函数 function 函数名(){函数要做的事情}
         a) 获取元素的值
         b) 计算结果，赋给res.values
         
   3. 判断语句 if(条件){如果条件成立执行这里的代码}