JavaScript学习笔记

最新推荐文章于 2023-05-10 17:24:33 发布

破晓2018

最新推荐文章于 2023-05-10 17:24:33 发布

阅读量209

点赞数

分类专栏： javaweb 文章标签： JAVAWEB

本文链接：https://blog.csdn.net/Poxiao2017/article/details/81159683

版权

javaweb 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

JavaScript的使用

导入js方式

在html页面中直接插入javascript
引入外部的javascript

外部的js文件中不能包含<script>标签。

在导入外部js文件的<script>标签中不能在写javascript代码。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<title>js导入</title>
<!-- 1、在html页面中直接插入javascript -->
	<script>
		alert("hello js");
	</script>
<!-- 引入外部的javascript -->
	<script src="xxx.js">
	 	//不能在写javascript代码
	</script>
</head>
<body>
	
</body>
</html>

js基础语法

var 运算符（variable 的缩写）加变量名定义的
JavaScript 对大小写敏感

变量可以存在两种数据类型，即原始类型与引用类型。原始类型相当于 Java基本数据类型

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
	<script>
		var a = null;
		alert(typeof(a));//通过typeof方法可以获取一个变量的类型
	</script>
</head>
<body>
<!-- 数字转换成字符串 -->
	<script>
		var x = null;
		var y = "abc";
		var z = 12;
		alert(typeof z.toString());	//把number转为string
	</script>
<!-- 字符串转换成数字 -->
	<script>
		var a = "123zb3";
		var b = parseInt(a);
		alert(b);
		alert(typeof(b));
	</script>
<!-- 强制类型转换 -->
	<script>
	//转为Boolean类型
		var x = 0;
		alert(Boolean(x));
	//转为数字
		//var y = "4d5as4d5";	//Nan
		var y = "415484";	
		alert(Number(y));	//4545
	//转为字符串
		var z = 1;
		alert(String(z));	 //true
	</script>
	
</body>
</html>

js逻辑语句

同JAVA （if-else）（switch）（for/for in）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- if-else -->
	<script>
		var sex = 'male';
		if(sex == 'male'){
			alert('你是男生');
		}else{
			alery('你是女生');
		}
	</script>
<!-- switch -->
	<script>
		var season = 1;
		switch(season){
		case 1:
			alert("xxxx");
			break;
		case 2:
			alert("xxxx");
			break;
		}
	</script>
<!-- for/for in -->
	<script>
		for(var i = 0;i < 3;i++)
			alert(i);
	</script>
	<script>
		var arr = [1,2,5,4,1,6];
		for(idx in arr){
			//idx是索引,遍历的是索引
			alert(arr[idx]);
		}
	</script>
</body>
</html>

js常用对象

Boolean主要用于提供将布尔值转换成字符串的 toString() 方法。
Array 对象用于在单个的变量中存储多个值。
String 类定义了大量操作字符串的方法，例如从字符串中提取字符或子串，或者检索字符或子串。
Date 对象用于处理日期和时间。
Math 对象用于执行数学任务。
RegExp 对象表示正则表达式，它是对字符串执行模式匹配的强大工具。

类似JAVA

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<!-- Boolean -->
<script>
	//把字符串转为对象
	var b = new Boolean('true');
	alert(typeof(b)); //Object
	//对象转为原始Boolean类型
	var b2 = Boolean(b);
	alert(typeof(b2)); //boolean
</script>

<!-- Number -->
<script type="text/javascript">
	//String转为Numer包装类对象
	var n1 = new Number('3');
	alert(typeof(n1)); //object
	//对象转为原始Number类型
	var n2 = Number(n1);
	alert(typeof(n2)); //number
</script>

<!-- Array -->
<script>
	//创建数组
	var arr1 = new Array();
	arr1.push('fdsf','sss');
	alert(arr1.length); //2
	
	//创建数组
	var arr2 = new Array(2);
	arr2.push('brother');
	alert(arr2[2]);	//brother
	//控制台输出	（重）
	console.log(arr1.toString());
</script>


<!-- String -->
<script>
	var s1 ="你好,我";
	console.log(typeof(s1));
	
	//基本数据类型转对象
	var s2 = new String(s1);
	console.log(typeof(s2));	//object
	
	//对象转string类型
	var s3 = String(s2);
	console.log(typeof(s3)); //string
	
	//'我'的位置
	var index = s2.indexOf('我');
	alert(index); //3
	</script>



<!-- Date -->
<script>
	var dt = new Date(); //返回当前日期的对象
	console.log( "年"+ dt.getFullYear());
	console.log( "月"+(dt.getMonth()+1));	//月是从0到11
	console.log( "日"+dt.getDate());
	console.log( "时"+dt.getHours());
	console.log( "分"+dt.getMinutes());
	console.log( "秒"+dt.getSeconds());
	//年2018 月7 日21  时11  分1  秒12
</script>

<!-- Math  -->
<script>
	var pi = Math.PI;
	console.log( 'PI:' + pi );
	console.log( '4的平方' + Math.pow(4,2) );
	console.log( '生成一个随机数：' + Math.random());
</script>


<!-- RegExp  -->
<script type="text/javascript">
	//检验邮箱
	var email = "7777@qq.com";
	var reg = /^[A-z0-9_]+@[A-z0-9]+\.[A-z]+$/;  //不要有多余空格
	//  /^ 代表开始 , $/代表结束 , \.代表小数点
	console.log(reg.test(email)); //true
</script>




</body>
</html>

JS函数和事件

创建函数

function 函数名称(参数列表){

函数体;

return 返回值

}

var 函数名称=function(参数列表){

函数体;

}
如果调用时传递的参数与函数定义时参数个数不一致，在函数中通过对象arguments,获取所有函数中的参数
全局函数

encodeURI()	把字符串编码为URI 把中文转为uri编码,实际开发中使用
decodeURI()	解码URI
encodeURIComponent()	把字符串编码为URI组件
decodeURIComponent()	解码一个编码的URI组件

4. 常见事件

onclick事件	onchange事件
onfocus获得焦点事件	onblur失去焦点事件
onmouseover:鼠标悬浮的事件	onmouseout:鼠标离开的事件
onload:加载完毕的事件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js函数和事件</title>
</head>
<body>
<!-- 创建函数 -->
<script>
	function add1( a , b ){
		alert( a + b );  //23
	}
	add1( 11 , 12 );
	
	var add2 = function( a , b ){
		alert( a + b );   //12
	}
	add2(11,1);
	
	function add3( a , b ){
		return a + b;	//3
	}
	alert(add3( 1 , 2 ));
	/*
	
		对象arguments,我们可以通过它来获取所有函数中的参数
	
	*/
	function add4(a,b){
		//内置一个参数数组
		for( var i = 0;i < arguments.length; i++ ){
			console.log(arguments[i]); //11 12 13 45 将传递过来的数据全部打印出来
		}
	}
	add4(11,12,13,45);
</script>


<!-- 全局函数 -->
<script>
	//encodeURI() 把字符串编码为URI 把中文转为uri编码,实际开发中使用
	var url1 = "http://www.baidu.com/恩恩";
	var s1 = encodeURI(url1);
	console.log(s1);//http://www.baidu.com/%E6%81%A9%E6%81%A9
	
	//decodeURI() 解码URI
	var s2 = decodeURI(s1);
	console.log(s2);//http://www.baidu.com/恩恩
	
	//encodeURIComponent() 把字符串编码为URI组件
	var s3 = encodeURIComponent(url1);
	console.log(s3); //http%3A%2F%2Fwww.baidu.com%2F%E6%81%A9%E6%81%A9
	
	//decodeURIComponent() 解码一个编码的URI组件
	var s4 = decodeURIComponent(s3);
	console.log(s4);
	
</script>
<!--*****************************常见事件**************************************-->

<!-- onclick事件 -->
<script>
	function clickme(){
		alert("点击的事件");
	}
</script>
<button onclick="clickme()">点击我</button>

<!-- onchange事件 -->
<script>
	//实现二级联动
	//监听city的改变
	function Change(){
		//获取区域的标签
		var _cityTag = document.getElementById('_city');
		//获取城市的标签
		var cityTag = document.getElementById('city');
		//根据选择的城市不同，获取不同城市的值
		var cityValue = cityTag.value;
		
		//判断当前选择的城市下有哪些区域
		switch(cityValue){
		case 'gz':
			//更改子标签的内容
			_cityTag.innerHTML = '<option>天河区</option><option>白云区</option><option>越秀区</option>';
			break;
		case 'sz':
			//更改子标签的内容
			_cityTag.innerHTML = '<option>深圳区</option><option>深圳区</option><option>深圳秀区</option>';
			break;
		case 'zh':
			//更改子标签的内容
			_cityTag.innerHTML = '<option>珠海</option><option>珠海</option><option>珠海</option>';
			break;
		}
	}
</script>
<select name = "city" id = "city" onchange = "Change()">
	<option value = "gz">广州</option>
	<option value = "sz">深圳</option>
	<option value = "zh">珠海</option>
</select>
<select name = "_city" id = "_city">
	<option>天河区</option>
	<option>白云区</option>
	<option>越秀区</option>
</select>

<!-- onfocus获得焦点事件  onblur失去焦点事件-->
<script>
	//onfoucus获得焦点的事件   onblur失去焦点的事件
	function begin(){
		document.getElementById('tip').innerHTML = '输入中';
	}
	function end(){
		document.getElementById('tip').innerHTML = '输入结束';
	}
</script>
<span id = 'tip'></span><br>
请输入用户名<input type = "text" name = "username" onfocus = "begin()" onblur = "end()"> <!-- 绑定方法 -->


<!--onmouseover:鼠标悬浮的事件 onmouseout:鼠标离开的事件 -->
<script>
	function over(){
		alert("鼠标悬浮的事件");
		console.log("鼠标悬浮的事件");
	}
	
	function out(){
		alert("鼠标离开的事件");
		console.log("鼠标离开的事件");
	}
</script>
<div id = "d1"style = "width:100px;height:100px;background-color:red" onmouseover = "over()" onmouseout = "out()">aaaaaa</div>





<!-- onload:加载完毕的事件 -->
<div id = "dd" style = "width:100px;height:100px;background-color:blue"></div>
<script>
	//需要吧div的内容写在前面
	window.onload = function(){
		document.getElementById("dd").innerHTML = "加载完成";
	}
</script>

</body>
</html>

jsWindow对象方法

window对弹框的三个方法,alert,confirm,prompt（常用）
open方法：打开另一个链接相当于a标签
定时器(指定时间执行任务)
定时器应用:注册后5s跳转首页

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<!-- window对弹框 -->
<script type="text/javascript">
	function click1() {
		//alert是window对象的方法,平时开如可以省略window
		window.alert("党的十九大招开了");//提示框
	}
	
	function click2() {
		//显示带有一段消息以及确认按钮和取消按钮的对话框。
		//用户选择后，会返回true或者false
		var rsl = window.confirm("你确定要分手吗？");
		alert(rsl); //点击是提示true 
	}
	
	function click3(){
		//显示可提示用户输入的对话框,点确定后，返回用户输入的密码，点取消，返回null
		var rsl = prompt("请输入你的银行卡密码");
		alert("你输入的密码是:" + rsl)
	}
</script>
<button onclick="click1();">点击1</button>
<button onclick="click2();">点击2</button>
<button onclick="click3();">点击3</button>




<!-- open方法 -->
<script>
	function click4(){
		//打开另一个连接
		window.open("http://www.baidu.com");
	}
</script>
<button onclick = "click4()">打开其他连接</button>




<!-- 定时器(指定时间执行任务) -->
<script type="text/javascript">
	var timer;
	//开启定时器
	function myStart(){
		timer = setTimeout(function(){
			console.log("5s后显示的内容");
		},5000)
	}
	
	function myClear(){
		clearTimeout(timer);
	}
</script>
<button onclick = "myStart()">开启定时器。5s后执行</button>
<button onclick = "myClear()">清除定时器</button>


<!-- 定时器:注册后5s跳转首页 -->
<br>注册成功<span id = "timespan">5</span>s后自动跳转到百度
<script>
	var second = 5;
	var timez = setInterval(function(){
		var spanTag = document.getElementById("timespan");
		if(second > 0){
			second--;
			spanTag.innerHTML = second;
		}else{
			clearInterval(timez); //时间到了清除定时器
			window.location = "http://www.baidu.com";
		}
	},1000);//每循环一次1000ms
</script>

</head>
<body>

</body>
</html>

破晓2018

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习笔记

JavaScript的使用导入js方式在html页面中直接插入javascript 引入外部的javascript外部的js文件中不能包含&lt;script&gt;标签。在导入外部js文件的&lt;script&gt;标签中不能在写javascript代码。 &lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;...
复制链接

扫一扫