JavaScript学习笔记

最新推荐文章于 2023-05-10 17:24:33 发布
最新推荐文章于 2023-05-10 17:24:33 发布
阅读量209 收藏
点赞数
分类专栏： javaweb 文章标签： JAVAWEB
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Poxiao2017/article/details/81159683
版权

JavaScript的使用

 

导入js方式

  1. 在html页面中直接插入javascript
  2. 引入外部的javascript
  1. 外部的js文件中不能包含<script>标签。  

  2. 在导入外部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基础语法

  1.  var 运算符（variable 的缩写）加变量名定义的
  2. 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常用对象

  1.  Boolean主要用于提供将布尔值转换成字符串的 toString() 方法。
  2. Array 对象用于在单个的变量中存储多个值。
  3. String 类定义了大量操作字符串的方法，例如从字符串中提取字符或子串，或者检索字符或子串。
  4. Date 对象用于处理日期和时间。
  5. Math 对象用于执行数学任务。

  6. 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函数和事件

  1. 创建函数

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

    函数体;

    return 返回值

    }

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

    函数体;

    }

     

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

  3. 全局函数

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对象方法

  1. window对弹框的三个方法,alert,confirm,prompt（常用）
  2. open方法：打开另一个链接相当于a标签
  3. 定时器(指定时间执行任务)
  4. 定时器应用:注册后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学习笔记
11-24
学习JavaScript时，了解这些基础知识是至关重要的。随着深入学习，你将接触到更高级的概念，如闭包、异步编程（回调函数、Promise、async/await）、模块系统以及现代框架如React、Vue和Angular的使用。JavaScript的...
尚硅谷JavaScript高级学习笔记
javaThinker的专栏
03-08 977
JavaScript中函数是对象。我们后续描述构造函数的内存模型时，会将构造函数称为构造函数对象。typeof 运算符来查看值的类型，它返回的是类型的字符串值 会做数据转换 输出： 每个函数都有一个prototype属性，它默认指向一个0bject空对象(即称为:原型对象) 给原型对象添加属性、方法，函数的所有实例对象自动拥有原型中的属性(方法) 16、显式原型和隐式原型 和 中保存的都是原型对象的地址值。Fun的prototype、f的__proto__属性什么时
javascript 学习笔记
Katios
05-25 7230
注释“//”表示单行注释 “/* */”可以用来多行注释变量1.变量必须使用字母、下划线(_)或者美元符($)开始。2.然后可以使用任意多个英文字母、数字、下划线(_)或者美元符($)组成。3.不能使用JavaScript关键词与JavaScript保留字4.变量区分大小写 javascript作为一种脚本语言可以放在html页面中任何位置，但是浏览器解释html时是按先后顺序的，所以前
Javascript入门学习笔记
weixin_61370021的博客
04-27 4597
JS入门学习笔记，JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。
javaScript学习笔记（一）js基础
热门推荐
一叶知秋
09-21 13万+
================================= 公众号 关注一波 （一叶知秋博客） 不定期分享视频资料 一、简介 1、概述： JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。 诞生于1995年，当时的主要目的是验证表单的数据是否合法。 Java...
JavaScript 学习笔记 超详细（b站pink老师）
weixin_59531237的博客
05-10 5790
1. JavaScript （是什么？是一种运行在客户端（浏览器）的编程语言，实现人机交互效果。2. 作用（做什么？– 网页特效 (监听用户的一些行为让网页作出对应的反馈)– 表单验证 (针对表单数据的合法性进行判断)– 数据交互 (获取后台的数据, 渲染到前端)– 服务端编程 (node.js)3. JavaScript的组成（有什么？
javaScript学习笔记
03-10
个人在学习javaScript过程中做的一些笔记和代码实例
Ruffy javascript 学习笔记
10-29
Ruffy javascript 学习笔记
JavaScript学习笔记讲解
05-07
这只是JavaScript学习笔记的一小部分，JavaScript还有更多高级特性和概念，如对象、数组、函数、类、模块、闭包等，以及DOM操作、事件处理、Ajax异步请求等内容，需要进一步深入学习和实践才能掌握。
JavaScript学习笔记.pdf
11-21
JavaScript 学习笔记 JavaScript 是互联网上流行的脚本语言，可以用于 HTML 和 web，广泛应用于服务器、PC、笔记本、平板电脑和智能手机等设备。JavaScript 是一种轻量级的编程语言，可以插入 HTML 页面的编程代码...
JavaScript 学习笔记（十一）
10-29
继续学习的是document对象。
JavaScript 学习笔记（五）
10-29
在这一部分的学习笔记中，我们将深入探讨JavaScript中的本地对象、内置对象以及宿主对象，同时也会涉及作用域和关键字`this`的使用。 首先，我们来看本地对象。本地对象是JavaScript引擎自身提供的对象，它们直接由...
JavaScript 学习笔记一些小技巧
10-29
以下是一些JavaScript学习过程中的小技巧，它们可以帮助你更高效地编写和理解代码。 一、错误处理与try...catch语句 在JavaScript中，错误处理是一个关键的组成部分。`try...catch`语句用于捕获和处理可能出现的...
计算机监测与维护实习研究报告.doc
07-18
计算机
110N10F7-VB一种N-Channel沟道TO220封装MOS管
最新发布
07-18
110N10F7-VB；Package：TO220；Configuration：Single-N-Channel；VDS：100V；VGS：20（±V）；Vth：3V；RDS(ON)=5mΩ@VGS=10V；ID：120A；Technology：Trench；
《单片机原理与接口技术》--试卷A及参考答案.doc
07-18
单片机
数字疗法产业发展白皮书202364页.pdf
07-18
数字疗法产业发展白皮书202364页
CSS与JavaScript学习笔记：从入门到精通
本资源是一份详细的CSS与JavaScript学习笔记，适合初学者系统学习这两种关键的前端技术。首先，我们来探讨CSS： **CSS简介** - CSS全称为层叠样式表（Cascading Style Sheets），其核心作用是定义HTML元素的外观和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值