学java的第42天 初次接触JS

#JS&BOM

##JavaScript简介；

JavaScript是解释性脚本语言，由浏览器解释执行。

Java Script由三个主要组成部分 ECMAScript（核心），BOM（浏览器对象模型），DOM（文档对象模型）；

##JavaScript三种写法；

行内 内部 外部

行内

<a href="javascript:alert('点你就点你');">点我，点我...</a>

内部

<script type="text/javascript">
	//JS代码
</script>
//例子
<script type="text/javascript">
	alert(“不点我也来”);
</script>

外部 引入外部js文件

<script type="text/javascript" src="JS文件位置"></script>  
//标签内是不能再写js代码的

##JavaScript变量；var

语法：

1，var 变量名 = 变量；

2，var 变量名；

变量名 = 值；

已声明赋值的变量 = 另一种类型值; //【不推荐】

不声明变量 = 值; //不事先声明变量直接使用

var num = 10；
var num1；
num1 = 10；
num1 = "ccc";
num3 = "cccccccc";
console.debug(num);
console.debug(num1);
console.debug(num3);

##JavaScript原始数据类型；

number boolean string null undefined

<script type="text/javascript">
			/*part1.number类型：数值类型,计算机命令为处理数据而生
				  一门语言
				  	  1.类型 值
				  	  2.变量 数组 
				  	  3.流程控制
				  	  4.函数
				  	  5.js面向对象
				  	                          静态属性：字段
				  	                          动态行为：方法              
				  	                        没一句js结束是应该要写分号，我已经养成了一个不好的习惯，我就是容易忘记，真正发布项目的时候
				 * */
			var num = 10;
			console.debug(1 / 0);
			console.debug(isFinite(1 / 0));
			var n = new Number(16);
			console.debug(n);
			//判断类型
			console.debug(typeof num); //number
			console.debug(typeof n); //object
			console.debug(typeof(n)); //object
			/*非数*/
			console.debug(123 / "csc"); //NaN
			console.debug(123 / "123"); //1  底层都是会转成字符处理	
			/*part2:boolean类型*/
			var res = false;
			console.debug(res)
			res = new Boolean()
			console.debug(res)
			/*代表false        NaN 0 "" null undifined */
			if ("牛屁") {
				console.debug("牛皮呀")
			}
			/*part3:String类型*/
			var b = "冲冲冲";
			b = '干干干'
			console.debug(b)
			console.debug(b.length)

			/*null  undifined 解释*/
			var pson = null; //null值，代表没有对象
			console.debug(pson);
			var aml;
			console.debug(aml); //   undifined没定义
		</script>

##JavaScript运算符；

== 等于 ===绝对等于 !==绝对不等于

<script type="text/javascript">
			/*等值预算符
					  1. == 
					  2. ===
					  3. ！==
					 * */
			var num1 = 10;
			var num2 = "10";
			console.debug(num1 == num2); //true
			console.debug(num1 === num2); //false
			console.debug(num1 !== num2); //true
			for (var i = 0; i <= 10; i++) {
				console.debug(666)
			}
		</script>		

##JavaScript流程控制；

JS中同Java一样存在流程控制语句，用法一样：

if switch while do-while for break/continue语句

##JavaScript函数；

函数是一组可以随时运行的代码语句

关键字 function

//function 函数名(参数列表){
//JS代码
//[return 返回值;]
//}
<script type="text/javascript">
			/*part1*/
			function eat() {
				console.debug(10)
			}
			eat(); //调用函数
			/*part2*/
			function run(num1, num2) {
				console.debug(num1 + num2);
			}
			run(10, 20)
			run(10)
			run();
			/*part3*/
			function sleep(num1, num2) {
				return num1 + num2;
			}
			var sum = sleep(10, 20)
			console.debug(sum)
			console.debug(sleep(55, 20))
			console.debug(run(66, 99))
			/*part4: 全局变量，局部变量*/
			var name = "全局变量"

			function walk() {
				name = "小弟弟";
			}
			//walk();
			function smile() {
				var name = "小姐姐";
			}
			smile();
			console.debug(name)
			/*匿名函数*/
			var fun = function() {
				console.debug("小哥哥")
			}
			fun();
		</script>

##JavaScript对象；

本地对象就是 ECMA-262 定义的类（引用类型），相当于Java中类的概念;_Java 类 对象[反射技术 Class cla 类就是一个对象]

自定义对象:写一个类：js眼里就是对象 ;

<script type="text/javascript">
			/*part1:Date*/
			var date = new Date();
			console.debug(date);
			date.deteFormat = function() {
				var year = this.getFullYear();
				var mouth = this.getMonth() + 1;
				var day = this.getDate();
				var hour = this.getHours();
				var min = this.getMinutes()
				var sec = this.getSeconds();
				return year + "/" + mouth + "/" + day + " " + hour + ":" + min + ":" + sec;
			}
			var frm = date.deteFormat();
			console.debug(frm)
			var str = "阿伟阿伟,始终最萎";
			var s = str.split(",", 1;);
			console.debug(s)
			var word = String.fromCharCode(65)
			console.debug(word)
			/*part3:Array*/
			var arr = new Array()
			console.debug(arr)
			arr = new Array(10) //单独写一个参数代表长度
			console.debug(arr)
			arr = new Array(10, 12, 34, 56) //写多个元素
			console.debug(arr)
			console.debug(arr[1])
			arr[66] = 88;
			console.debug(arr)
			console.debug(arr[66])

			/*part:4 for  in 遍历*/
			for (var i in arr) { //i里面存入的是索引位置
				console.debug(arr[i])
			}
		</script>


//自定义对象  
	<script type="text/javascript">
			// part1: 见识一下js
			function Person() {
				console.debug("11111");
			}
			var pson = new Person();
			console.debug(typeof pson);
			Person();
			// 字段
			function Person(name, age) {
				this.name = name;
				this.age = age;
			}
			var p = new Person("阿伟", 18);
			console.debug(p);
			console.debug(p.name);
			/*方法*/
			function eat() {
				console.debug("冲冲冲");

			}

			function Person() {
				this.c = eat;
				this.s = function() {
					console.debug("干干干");
				}
			}
			p = new Person();
			p.s();


			/*part2对象添加属性的方式详解:  js纯面向对象，很纯很纯那种*/
			/*part2.0*/
			function Animal(name, age) {
				this.name = name;
				this.age = age;
				this.toString = function() {
					console.debug(this.name + "-" + this.age);
				}
			}
			var aml = new Animal("阿亮", 18)
			console.debug(aml)
			console.debug(aml.name)
			console.debug(aml.age)
			aml.toString()

			var vml = new Animal("炜子哥", 20);
			console.debug(vml)
			//part2.1  给对象添加属性
			aml.sex = "男"; //相当于给aml对象，仅仅是给aml这个对象添加属性sex
			aml.run = function() {
				console.debug("666")
			}
			console.debug(aml)
			aml.run();

			/*part2.2给原型添加属性：Animal的对象父类添加属性*/
			Animal.prototype.song = function() {
				console.debug("还想听炜哥再骚一次")
			}
			Animal.prototype.phoneNum = "1008611";
			aml.song();
			vml.song();
			console.debug(aml.phoneNum);
			console.debug(vml.phoneNum);
		</script>

##BOM；

BOM是browser object model的缩写，简称浏览器对象模型

(1) 打开一个窗口就是一个window对象；

(2) 窗口里面使用location表示地址栏；

(3) 窗口的历史记录使用history来表示；

(4) 浏览器的信息使用navigator来表示；

(5) 窗口里面的内容使用document来表示；

window

window对象是BOM中的顶级对象，默认可以省略（即调用其函数时可以省略window.）

【没打开浏览器窗口就有一盒Window对象创建 】

##需求：定时器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			/* 
						setTimeout() 在指定的毫秒数后调用函数或计算表达式。
						clearTimeout() 取消由 setTimeout() 方法设置的 timeout。 
						
						setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。 4 1 9
						clearInterval() 取消由 setInterval() 设置的 timeout。 4 1 9 
			           */
			//eval   :  var text1 = document.getElementById('text1');
			//tout代表了定时任务
			/*var tout = setTimeout("document.getElementById('text1').value=new Date()",5000)
			            clearTimeout(tout)*/

			var res;

			function start() {
				res = setInterval("document.getElementById('text2').value=new Date()", 1000);
			}

			function stop() {
				clearInterval(res)
			}

			function change() {
				var pass = document.getElementById("pass")
				if (pass.type == "password") {
					pass.type = "text";
				} else {
					pass.type = "password";
				}
				window.location.href = "http://www.baidu.com";
			}
		</script>
	</head>
	<body>
		<input type="button" value="开始" onclick="start()">
		<input id="text1" type="text" value="">
		<input id="text2" type="text" value="">
		<input type="button" value="结束" onclick="stop()"><br />

		password:<input id="pass" type="password" /><input type="button" value="密码" onclick="change()" />
	</body>
</html>

######第一次发博客 记录一下自己一天的学习进度吧