JS的使用与基本语法

使用

<!-- js编写位置
 1.script标签
 2.外部js文件 推荐
 3.行内js代码块 不推荐
 js运行的顺序是从上往下运行，有特例

 js 和java对比
 1.当前页面 可以理解成java的一个类 
	类中的属性(成员变量)=js中的全局变量
	类中的方法=js中的函数
 2.java运行的入口main,js运行的入口2种情况
	a.事件驱动机制,js的入口在事件触发的位置
	b.裸代码,直接在js中写的代码不是在函数中写的
-->
<script src="index.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	/* 编写脚本的区域 */
function hello(){
	document.write("Hello world!");
}
</script>

基本语法

/* 
	js的基本语法
	1.变量 js是一个弱类型 所有的变量都是var类型 类型是靠值来决定类型
		整型，浮点型，布尔型，字符串，函数类型...
	2.运算符 和java一样 
	    js中的三目运算符
		js中特有的运算符 ===  //TODO
	3.控制语句
		判断语句 if  else 和java一样
		循环语句 for while do·while和java
		js中的增强for循环和java不一样//TODO
		switch选择和java一样
		break ,continue和java一样
	4.注释比java少一种 js中没有文档注释 其他和java一样
	5.类型转换
		java中的基本类型 隐式转换和强制转换 js中的类型需要主动转换
		整型，浮点型转成字符串 直接连接"" 即可
		字符串转成整型或者浮点型 
			java Integer.parseInt
			js parseInt() parseFloat()
	6.函数 
		public int add(int a,int b){}
		function add(a,b){}
		1.js的函数有关键字function
		2.js没有修饰符java有
		3.java方法有返回值,js也有返回值,语法上不写
		4.方法命名和java一样 建议使用驼式命名
		6.参数js不需要制定类型 js的所有的参数都是数组,可以随意的使用
		  不要随机使用，建议和java一样一一对应
		7.如果函数没有返回值那不用return,如果有返回值直接return xx就可以
		  如果直接return直接跳出当前方法
		8.函数可以赋值给js的变量
 */
/* 
	js操作样式
	1.选到你要操作的dom元素
	2.设置dom的style属性
	3.选择你要设置的样式 js中所有的css样式采用的是驼式命名
	4.填写值是样式的字符串
	
	5.复杂的样式可能会不生效 多合一样式//TODO
	
	js设置一组样式
	1.通过设置dom的className属性来增加样式
	2.如果要同时设置多个className 你需要用空格隔开
 */
function testBox(){
	// document.getElementById("box").style.width = "100px";
	// document.getElementById("box").style.height = "100px";
	// document.getElementById("box").style.backgroundColor = "red";
	// document.getElementById("box").style.transform="translate(20px,20px)"; 
	//document.getElementById("box").style.margin = "10px 10px";
	//document.getElementById("box").className = "box";
	document.getElementById("box").className = "box box1";
	
}
/* 
	js中的对象
	1.js中的对象像java中的map
	2.初始化
		静态初始化 var obj ={name:"xiaowang",age:20,sex:"男"};
		动态初始化 var obj = new Object();
	3.js中对象使用的是大括号
	4.js中的内容通过 对象.属性 的方式获取或者设置
	  js还可以通过属性的字符串获取值 obj["zifuchuan"]类似java的反射
	5.对象的遍历 js中可以使用增强for循环来遍历对象
	  遍历出的内容是对象的键的集合
		
	
 */
var classA = {name:"线上9班",teacher:{name:"panjie",sex:"男"},students:[
	{name:"xiaowang",sex:"男"},{name:"xiaozhao",sex:"女"},
	{name:"xiaozhang",sex:"男"},{name:"xiaoli",sex:"女"}
]};
function testArr(){
	//var obj = {name:"xiaowang",age:20,sex:"男"};
	var obj = new Object();
	var shuxing1 = "name";
	var shuxing2 = "age";
	var shuxing3 = "sex";
	//类似java中的反射
	// obj[shuxing1] = "xiaowang";
	// obj[shuxing2] = 20;
	// obj[shuxing3] = "女";
	obj["name"] = "xiaowang";
	obj["age"] = 20;
	obj["sex"] = "女";
	
	// obj.name = "xiaowang";
	// obj.age = 20;
	// obj.sex = "男";
	// for(var i in obj){
	// 	console.log(obj[i]);
	// }
	console.log(classA.students[1].name+" "+classA.students[1].sex);
}
/* 
	窗口对象 window 
	方法(函数) 使用此对象的方法的时候window可以省略 
	自定义方法的时候不要定义和window自带的方法同名
	1.alert() 弹出窗口 可以卡住代码运行 一般用于debug网页
	2.confirm() 弹出有确定和取消按钮的窗口 一般用于选择
	有返回值,点击确定时候返回true 点击取消返回false
	3.open(url) 打开窗口(重点)
		open（"打开窗口的url"，"窗口名"，"窗口特征"）
		窗口的特征如下，可以任意组合：
		height： 窗口高度； 
		width： 窗口宽度； 
		top： 窗口距离屏幕上方的象素值； 
		left：窗口距离屏幕左侧的象素值； 
		toolbar： 是否显示工具栏，yes为显示； 
		menubar，scrollbars 表示菜单栏和滚动栏。 
		resizable： 是否允许改变窗口大小，yes或1为允许 
		location： 是否显示地址栏，yes或1为允许 
		status：是否显示状态栏内的信息，yes或1为允许；
		
		open("register.html", "注册窗口", "toolbars=0, location=0, 
		statusbars=0,menubars=0,width=700,height=550,scrollbars=1");

	4.close() 关闭当前窗口
	5.定时器setTimeout(fun,time) (重点)
		fun指你需要定时做的任务
			1.使用匿名函数	function(){}
			2.实际的函数 使用变量的方式引入
			3.实际的函数 如果没有赋值变量,直接使用原函数的名字+参数,需要加引号
		time指你多少毫秒后执行
	  定时器 setInterval(fun,time) 持续一直运行定时器，方法返回我的定时器ID
	  clearInterval(定时器ID)停止定时器
	
	window的属性
	1.status状态栏 
	2.screen  window.screen.width window.screen.height
	3.history(重点)   window.history.back(n)回到之前第n个页面
					  window.history.forward(n)回到之后的第n个页面
					  window.history.go(n) n<0表示回退 n>0表示前进
			
	4.location(重点) 一般用于切换页面	
		window.location.href="http://www.baidu.com";
		  
 */
//alert("HELLO WORLD！")
// if(confirm("确定打印吗?")){
// 	document.write("打印xxx");
// }else{
// 	document.write("不打印xxx");
// }
// var pp = function print(){
// 	console.log("定时到时间了");
// };
var flag = 0;

//递归定时器
function print(){
	if(flag==5){
		return;
	}
 	console.log("定时到时间了"+flag++);
	setTimeout("print()",2000);	
}

function printArr(){
	console.log("定时到时间了"+flag++);
}
var interId = null;
function testdiv(){
	//open("Http://www.baidu.com","我的百度");
	// setTimeout(function(){
	// 	console.log("定时到时间了");
	// },1000);
	//console.log(pp);
	//setTimeout(pp,1000);
	//setTimeout("print()",2000);
	//interId = setInterval("printArr()",2000);
	//clearInterval()
	//window.status = "我的页面";
	//console.log(window.screen);
	//回退到上一个页面
	// window.history.back();
	// window.history.forward();
	//window.history.go(-1);
	//console.log(window.location);
	//window.location.href="http://www.baidu.com";
}

function closeInter(){
	clearInterval(interId);
}
//console.log(window);
/* 
 html中的文档对象 document(重点)
 1.通过document获取页面的节点
	a.document.getElementById(id)通过id获取dom对象 获取唯一
	获取标签中的内容  dom对象.innerHTML
	b.document.getElementsByName(name)根据名称获取dom对象数组
	如果只有一个name 你获取的时候也要加下标
	获取一组元素的数量 length
	c.document.getElementsByTagName(标签名)根据标签名称获取dom数组
	d.document.getElementsByClassName(类名)根据类名称获取dom数组
 
*/
function testDocument(){
	//var l = document.getElementById("txt1").innerHTML;
	//var length = document.getElementsByName("txt3").length;
	//var value= document.getElementsByName("xxx")[0].value;
	//var obj= document.getElementsByTagName("div");
	var obj= document.getElementsByClassName("xx")[0];
	alert(obj.innerHTML);
}

/* 
	js中的时间对象
 */
function testDate(){
	//Date
	//alert(printDate());
	printDate();
	setInterval("printDate()",1000);
}

//页面展示当前时间的格式
function printDate(){
	var d = new Date();
	var dString =d.getFullYear()+"-"+(d.getMonth()+1)+"-"+d.getDate()+
		" "+d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();
	//年
	// console.log(d.getFullYear());
	// //月
	// console.log(d.getMonth()+1);
	// //日
	// console.log(d.getDate());
	// //小时
	// console.log(d.getHours());
	// //分钟
	// console.log(d.getMinutes());
	// //秒
	// console.log(d.getSeconds());
	//console.log(d);
	document.getElementById("txt1").innerHTML = dString;
}


/* 
	js中的数组
	1.数组的定义
		 静态直接初始化 var arr = [1,2,3,4];
		 动态初始化  var arr1 = new Array();
	2.js中的数组使用的是中括号java中是大括号
	  js中的数组使用new Array()的方式实例化
	3.js中的数组是动态长度的,java中数组是固定长度
	4.js中的数组增加是push方法
	5.js中数组的遍历 基础循环遍历和java一样
	 增强for循环 js遍历出的项是下标,java是每一项
	//TODO js数组实现数据结果 栈,队列
 */
function testArr(){
	var arr = new Array();
	arr[0] = 1;
	arr[1] = 2;
	arr.push(3);
	arr.push(5);
	//和java一样
	// for(var i=0;i<arr.length;i++){
	// 	console.log(arr[i]);
	// }
	//增强for循环 
	// for(var s in arr){
	// 	console.log(arr[s]);
	// }
	var arr1 = [[1,2,3,4],[5,6,7,8],[9,10]];
	for(var i in arr1){
		for(var j in arr1[i]){
			console.log(arr1[i][j]);
		}
	}
	console.log(arr);
}

/* 
	事件
	绑定事件 
	1.在标签中加上相应的事件属性
	onclick 单击事件
	onmouseover 鼠标浮动到元素的上方
	onmouseout 鼠标离开元素的上方
	ondblclick 双击事件
	onfocus 获得焦点事件
	onchange 值改变事件
	onsubmit 表单提交事件
	onkeyup 键盘按键事件 事件中一般会带 event参数 event.keyCode获取按键的Ascii值
	回车键 13
	onload 页面加载完成事件 一般绑定在body
	
	2.通过纯代码绑定事件
		使用window.onload绑定onload事件
		使用dom节点绑定相应的事件
	
 */
window.onload = function(){
	//给flu绑定了值改变事件
	//匿名函数
	//给方法赋值变量
	//直接写方法名字(不能加引号，不能带参数) (不推荐)
	document.getElementById("flu").onchange = textSum;
	document.getElementById("name").onfocus = alertName;
};

function alertName(){
	alert("请输入用户名");
}

function textSum(sum){
	console.log("触发了"+sum+"事件");
}
function testKey(event){
	if(event.keyCode == 65){
		alert("键盘按了A键");
	}
}

//动态页面
var list = ["3","4","5","5上"];			
//动态生成下拉框
function drowSelect(){
	//获取下拉框
	var s1 = document.getElementById("niandai");
	//动态生成页面
	var html = "<option>建造年代</option>";
	for(var i in list){
		html+="<option>"+list[i]+"</option>";
	}
	//讲动态页面填入到下拉框中
	s1.innerHTML = html;
}