JavaScript学习之路第一周

day1

JavaScript输出方式

• 页面输出：document.write(“字符串”);
• 控制台输出：console.log(“字符串”);
• 弹窗输出：alert(“字符串”);

注 当输出内容为数字时则不用字符串

JavaScript变量类型

• number：数字类型
• string：字符类型
• undefined：未定义类型，即变量被声明但是未赋值
• boolean：布尔值类型
• object：对象类型
• function：函数类型

JavaScript基本数据类型

• number
• string
• boolean
• undefined
• null

JavaScript引用数据类型

• object
• function

类型转换

• parseInt从左往右取整，遇到其他字符或小数点结束参数:（num,进制）,将num先转为进制数再输出

var num = "20";
//把num当然8进制去转换,结果为十进制的16
console.log(parseInt(num, 8)); //16
//默认是当成10进制去转换,但是建议写上这个10	console.log(parseInt(num, 10));	//20
var num1 = 20;
//把十进制的20转换位16进制,并且输出字符串
console.log(num1.toString(16));//"14"

• parseFloat从左往右取浮点数，遇到其它字符或第二个小数点结束
• Number将对象转为数字
• num.toFixed保留几位小数之后数据类型变为字符串
• num.tostring将数字转换为几进制的字符串
  注无法转换时返回NaN(判断方式:isNaN)

隐式转换

当数字的字符串和数字进行计算时字符串会转换为数字

JavaScript方法

getElementById返回对拥有指定ID的第一个对象的引用
eval将字符串转化为数字

day2

条件分支

if语句

if判断条件中所有数据类型都会被隐式转换为布尔类型，NaN、undefined、空字符串等都当作false处理

switch-case语句

• switch判断的要全等（===）才行
• case语句不写break会一直向后执行，即case穿透

var num = 19;
switch(num){
  case 19:
  	alert("减了1");
  case 20:
  	alert("没变化");
  case 21:
  	alert("加了1");
  default:
  	alert("我也不知道变成啥了");
}/*这段代码会从case:19进去一直向后执行完*/

JavaScript读取css样式

点击div变色案例

/*css样式*/
<style>
	div{width:200px;height: 200px; background: red;}
</style>
/*html内容*/
<div onclick="fn()" id="box"></div>
/*js内容*/
var box = document.getElementById("box");
function fn(){
	//console.log(box.style.background);只能打印出内联样式的属性 //
	if(isRed){
		box.style.background = "blue";
	}else{
		box.style.background = "red";
	}
	isRed = !isRed;		
}

day3&day4

函数

匿名函数没有声明函数名的函数

function(){函数体}

注没有返回值的函数默认为undefined
**自调用函数（立即执行函数）**直接运行的匿名函数

(function(){
	函数体
})();

形参封装函数时定义
注

• 实参个数大于形参，多余实参自动舍弃
• 形参个数大于实参，多余形参默认为undefined
  实参副本arguments可以在函数内部使用arguments接收所传递过来的参数，是一个集合

function test(){
	console.log(arguments);
	console.log(arguments.length);
}
test(1,2,3,4,5,6);

作用域

全局变量

• 作用范围为整个程序的执行范围
• 在函数体外部定义的变量就是全局变量
• 在函数体内部不使用var定义的也是全局变量

局部变量

• 作用范围是某个函数体内部
• 在函数体内部通过var关键字定义的变量或者形参，都是局部变量
• 当局部变量与全局变量重名时，在函数体内部局部变量会优先于全局变量

变量提升

• 变量的声明会提升至当前作用域的最顶端，但不会提升赋值
• 函数与变量名相同时会保留函数
• 按顺序提升变量

<script>
	alert(a);
	var a = 1;
	alert(a);
	function a(){alert(2);}
	alert(a);
	var a = 3;
	alert(a);
	function a(){alert(3);}
	alert(a);
	/*变量提升后
	function a(){alert(3);}
	alert(a); //function a(){alert(3);}
	a = 1;
	alert(a); //1		
	alert(a); //1
	a = 3;
	alert(a); //3
	alert(a); //3 */
</script>

堆栈

栈先进后出(FILO)，在栈顶做插入(入栈)和删除(出栈)操作
队列先进先出(FIFO)，在队头做删除操作，在队尾做插入操作
堆代码执行时系统动态分配，不存在是先进后出还是先进先出
执行环境执行栈(也称执行上下文)
当JavaScript解释器初始化执行代码时，它首先默认进入全局执行环境，从此刻开始，函数的每次调用都会创建一个新的执行环境，每一个执行环境都会创建一个新的环境对象压入栈中。
当执行流进入一个函数时，函数的环境对象就会被压入一个环境栈中(execution stack)。在函数执行完后，栈将其环境弹出，把控制权返回给之前的执行环境。

作用域链内层环境可以访问外层中的变量和函数，而外层环境不能访问内层的变量和函数

递归

构成递归需具备的条件

• 子问题须与原始问题为同样的事，且更为简单。
• 不能无限制地调用本身，须有个出口，化简为非递归状况处理。
  注由于递归是函数本身一层一层入栈，导致先入栈的不能出栈，空间满以后就会造成堆栈溢出
  递归是否正确
• 基本情况当n=0,1时，结果正确。也称为终止条件，终止递归无限运行
• 通用情况假设递归对于n是正确的，同时对于n+1也正确
  以上两点成立，则这个递归对于所有的n都是正确的
  什么时候该用递归
• 子问题需与原问题为同样的事，且规模更小。
• 存在程序停止条件。

day5

JavaScript运行和编译步骤

1. 语法分析查找基本语法有无错误
2. 预解析
   a.执行之前进行预解析
   b.var、function关键字提升到当前作用域的顶部，变量默认为undefined
3. 解释执行

JavaScript事件

各种事件

使用html dom来分配事件

<div id="box"></div>
<script>
	var box = document.getElementById("box");
	//绑定事件
	box.onclick = function(){
		alert("click");
	}
</script>

事件和表单综合应用

<form id="form">
	<input type="text" id="num">
	<select id="sel">
		<option>成都</option>
		<option>北京</option>
		<option>上海</option>
	</select>
	<input type="checkbox" id="check">
			
	<button type="button">按钮</button>
	<input type="submit" value="提交" id="btn">
</form>
<script>
	var input = document.getElementById("num");
	input.onfocus = function(){
		console.log("获得焦点");	
	}
	input.onblur = function(){
		console.log("失去焦点");
		//console.log(input.value);
		var value = this.value;
		//是否大于6位
		if(value.length > 6){
			console.log("满足要求");					
		}else{
			console.log("请输入大于6位");
		}
	}
			
	var sel = document.getElementById("sel");
	//重新选择的时候,触发onchange事件
	sel.onchange = function(){
		console.log(this.value);
	}
			
	var check = document.getElementById("check");
	check.onchange = function(){
		console.log(this.checked); //是否选中的状态(true\false)
	}
			
	var form = document.getElementById('form');
	console.log(btn);
	form.onsubmit = function(e){
		//表单提交事件
		console.log("提交");
		e.preventDefault();
		return false;
	}
</script>

this关键字
事件函数里面的this指的是事件触发对象