Java小白学习指南【day39】---JavaScript基础&BOM

一、Hello JS

二、JS引入的三种方式

1、行内

<a href="javascript:alert('点了呀！')">你敢点我嘛？</a>

javascript：这是伪协议的意思，类似http协议，可以省略，但是不建议，行内JS使用几率较少，只有针对某些标签的特殊操作

2、内部

页面内的JS是写在一组<script>标签内，这组标签可以写在页面内的任意位置，但是官方推荐head标签内部写js，同时注意script必须使用双标签。

<script type="text/javascript">
		alert("你不点我自己来！");
</script>

3、外部

先单独定义一个JS文件，然后将这个JS文件与要使用的网页将关系关联起来

<script type="text/javascript" src="js/index.js"></script>

三、JS 变量

1、弱类型

使用var关键字，无论是何种数据类型的变量，均可以使用var关键字来进行声明。

var 变量名=值;可以省略var进行直接声明，但是不推荐。（js语法规则参考java的要求）

2、代码示例

<!-- 变量的使用 -->
	<script type="text/javascript">
		var name;//声明变量
		name = "字符串类型";
		console.debug(name);
		name = 88;//虽然上面是字符串，但是对类型没有强制限制，不过这种不推荐
		console.debug(name);
		age = 79;//可以省略var
		console.debug(age);
	</script>

四、JS 原始数据类型

JS中共有四种原始数据类型：number、object、boolean、string查看数据类型可以使用typeof()

<!-- 四种原始数据类型 -->
	<script type="text/javascript">
	var nu=10;
	console.debug(typeof nu);
	
	var num="嘿嘿";
	console.debug(typeof num);
	
	var num=true;
	console.debug(typeof num);
	
	var num = new Object;
	console.debug(typeof num);
        
	//判断是否是无穷数，无穷书返回false
	console.debug(isFinite(2/3));//true
	//isNaN()函数来判定当前字符是否真的不是数字
	var ac = "ac";
	console.debug(isNaN(ac));//true
	console.debug(isNaN(111));//false
        
	</script>

五、JS 运算符

1、赋值运算符

赋值运算符的使用和Java一样

<script type="text/javascript">
var a = 3;
console.debug(a);
</script>

2、算数运算符

	<script type="text/javascript">
	var x=3 + "22";//JS中+运算符中有字符串的应用，会演变为字符串的拼接
	console.debug(x);
	</script>

3、比较运算符

<script type="text/javascript">	
	var a = 222;
	var b = "222";
	console.debug(a==b);//true只比较内容
	console.debug(a===b);//false既比较内容，又比较类型
	console.debug(a!==b);//true绝对不等
</script>

4、逻辑运算符

<script type="text/javascript">	
	var x=0||1;
	console.debug(x);  //1
    </script>

六、JS 流程控制

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

1. 分支：

   (1) if语句

   (2) switch语句

2. 循环：

   (1) while语句

   (2) do-while语句

   (3) for循环

3. break/continue语句 return

4. 三目表达式

七、JS 函数

在这里函数可以理解为就是方法

1、基本语法

<script type="text/javascript">		
	function sum(){
		console.debug("这就是函数基本结构");
	}
	sum();
</script>

2、全局变量与局部变量

<script type="text/javascript">			
	var eg = "小明";//显示的全局变量
	function gan(){
		eg = "张强";//隐式的全局变量
	}
	console.debug(eg);
	gan();//隐式的全局变量在被调用的时候才会被访问
	console.debug(eg);
	
	var eg = "飞飞";//显示的全局变量
	function gan(){
		var eg = "口口";//局部变量
	}
	console.debug(eg);//全局变量
    </script>

3、匿名函数的语法

<script type="text/javascript">	
    var tt = function(){
		console.debug("匿名函数");
	}
	tt();
    </script>

八、JS 对象

1、Date日期对象

<script type="text/javascript">
    /* 1、语法 */
	//1.创建一个对象
	var date = new Date();
	//2.给这个对象添加方法
	date.dateFormat = function() {
		var d = new Date();
		var year = d.getFullYear();
		var month = d.getMonth() + 1; //返回的月份是从0开始11结束
		var day2 = d.getDate(); //月中的天数是从1到31
		var hour = d.getHours(); //取值范围0到23
		var minute = d.getMinutes(); //取值范围是0到59
		var second = d.getSeconds(); //取值范围是0到59
		//yyyy/MM/mm HH:mm:ss
		console.debug(year + '/' + month + '/' + day2);
	}
	var time = date.dateFormat();
	console.debug(time);
    </script>

2、String字符串对象

<script type="text/javascript">
    //方法比骄多，可以查询API进行使用
	var str = "a,D,C,S,e,r";
	console.debug(str);
	console.debug(str.split(','));//会以数组的形式打印
	console.debug(str.toUpperCase());//转换成大写
	console.debug(str.toLowerCase());//转换成小写
	console.debug(str[2]);
	
	var s = String.fromCharCode(77,78,70);//MNF根据字符编码创建一个字符串。
	console.debug(s);
    </script>

3、Array数组对象

JavaScript中创建类其实和创建函数【函数也是一种对象】是一样的语法，所以为了做区分方法名称小写，创建类名称首字母大写

<script type="text/javascript">
    /* 1、语法 */
	/* Array数组对象 */	
	var arr = new Array(12,11,34,32);
	console.debug(arr[2]);//打印指定索引的数据
	arr[20] = 33;//可以对指定索引进行赋值
	console.debug(arr);
	console.debug(arr.join("$"));
	
	var arr = new Array();//基本声明
	console.debug(arr);
	
	var arr = new Array(10);//一个数字的话是声明长度
	console.debug(arr);
	
	var arr = new Array(12,11,34,32);
	console.debug(arr);
	
	
	//数组的遍历方式1，类似java的普通for循环
	arr2 = new Array(22,33,55,11,33);
	for(var i = 0 ; i < arr2.length ; i++){
		console.debug(arr2[i]);
	}
	
	//数组的遍历方式2，类似java的foreach
	arr3 = new Array(1,2,3,4);
	for(var i in arr3){
		console.debug(arr3[i]);
	}
    </script>

4、自定义对象

<script type="text/javascript">
/* 1、语法 */
	//1、自定义一个对象
	function User(name, pwd) {
		this.name = name;
		this.pwd = pwd;
		this.add = function() {//对象中的动态属性再调用函数
			console.debug(name + "----" + pwd);
		}
	}
	var user = new User("张三", 1111);
	//console.debug(user);
	//console.debug(user.pwd);
	//user.add();

	//2、给对象增加某个属性，但是只有该对象可以使用
	user.haha = function() {
		console.debug(this.name)
	}
	user.sex = "滚";
	//user.haha();
	//console.debug(user.sex)
	
	//3、自己定义方法，使用prototype
	User.prototype.yy = function(){//一定要要注意区分大小写，也就是区分类和函数
		console.debug(this.name+"先生")
	}
	user.yy();
	console.debug(user)
    </script>

九、BOM

BOM是browser object model的缩写，简称浏览器对象模型，直白的说就是把浏览器界面看成是一个对象。

<script type="text/javascript">
/* 1、语法 */
	/* 
		1、window是一个对象，而且是一个顶级对象，所以在使用方法时可以省略
	 */
	//window.close();
	//close();
	
	//2、三种弹窗的方式
	//alert("非法警告");
	
	/* var i = confirm("是否已满18岁");
	if(i){
		console.debug("即将进入精彩地带");
	}else{
		console.debug("只允许你偷偷看一眼");
	} */
	
	/* var i = prompt("你和猪🐖有什么区别");
	if(i == "没有区别"){
		console.debug("你真棒");
	}else{

	console.debug("我看没有区别");
	} */

	//3、定时任务
	/* function talk() {
		console.debug("准备好迎接惊喜了嘛");
	}
	setTimeout("talk()", 4000) */
	//通过clearTimeout()进行取消

	// 4、window.location  由于window 是顶级对象，所以可以不写window
	var loc = window.location
	console.debug(loc)

	var url = loc.href;//获取当前的地址值
	console.debug(url)

	//window.location.href = "http://www.baidu.com"//为你的当前页面设置了地址值，跳转到这个地址
 </script>