JavaScript 笔记

最新推荐文章于 2022-10-30 16:29:57 发布

cxy-ly

最新推荐文章于 2022-10-30 16:29:57 发布

阅读量102

点赞数

文章标签： spring

本文链接：https://blog.csdn.net/qq_42363517/article/details/119615579

版权

这篇博客详细介绍了JavaScript的基础知识，包括它的弱类型特性、事件驱动、三种引入方式以及基础语法。通过入门案例展示了如何在HTML中使用内部和行内JS。接着讲解了数据类型、运算符、条件语句（if...else、for、while）以及数组的定义、遍历和操作。最后，介绍了函数的定义和调用方式，包括有参无参和有返回值的函数。这些内容构成了JavaScript编程的基础。

摘要由CSDN通过智能技术生成

-1.概述

JS全称是JAVA Script，只能在浏览器被执行，基于对象的事件驱动的脚本语言

特点：弱类型，直译式

好处：增强了用户的交互性，相对安全，跨平台

位置：行内js,内部js，外部js

-2.入门案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 js的语法</title>
		
		<!-- 2. 内部js -->
		<script>
			alert(666);
		</script>
	</head>
	<body>
		<!-- 1. 行内js 
			事件驱动:  必须触发才会执行JS的动态效果
		 -->
		<a href="#" onclick="alert(100)">onclick单击</a>	
		<a href="#" ondblclick="alert(200)">ondblclick双击</a>	
		<a href="#" onmouseenter="alert(300)">鼠标划入</a>	
		<a href="#" onmouseout="alert(400)">鼠标划出</a>	
	</body>
</html>

3.基础语法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 JS的语法</title>
		<!-- 内部js -->
		<script>
			// 1. JS的数据类型: 是弱类型的语言,也有几种:number string boolean null undefined
				var a = 10 ;
				a = 1.9+2.6 ;
				a = 1.9+2.1 ;
				a = "hello js" ;
				a = 'hello js';
				a = true ;
				a = null ;
				alert("a的值:"+a) ;
				
				var b = '123'+'456'; //JS也可以拼串
				alert("b的值:"+b);//只定义而不赋值的变量,会得到提示undefined
			// 2. JS的运算符
				// % ++  --  
				var c = 10%3 ;
				c = c++;
				alert(c); //1
				//alert(++c);
				
				var d = 1;
				//d = d+1;
				d += 1 ; 
				alert(d); 
			
				var e = 1 ;
				var f = '1' ;
				alert(e==f); //数据的值,true
				alert(e===f); //数据的值+类型,false
				
				//三元运算符: 比较两个数里的大值
				var g = prompt("输入数字") ; //从浏览器输入的值
				var h = prompt("输入数字") ;
				alert(g>h?1:0);
				
				//typeof: 获取数据的类型
				alert(typeof 100);//number
				alert(typeof '100');//string
			
			
		</script>
	</head>
	<body>
	</body>
</html>

4.JS的语句

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 JS语句</title>
		
		<!-- HTML中引入JS代码 -->
		<script>
			// 3. while
				//需求: 如果给你1个亿,每天花一半,能花多少天
				var c = 0 ;//记录天
				var d = 100000000 ;//记录钱
				while(d > 1){
					d = d/2 ; //每天花一半
					c++; //天数++
				}
				console.log("总共花几天: "+c);
				
			// 2. for
				// 打印1~10
				for(var i=1;i<11;i++){
					console.log(i);//在浏览器用f12打开控制台
				}
				//计算1~100里4的倍数的和
				var sum = 0;
				for(var i=1;i<101;i++){
					if(i % 4 == 0){
						sum += i ;
					} 
				}
				console.log("总和是: "+sum);
			
			// 1. if...else
				var a = prompt("请输入名字");
				if(a == 'wyf' ){
					//alert("大碗牢饭");
					console.log("大碗牢饭");
				}else{
					alert("大碗宽面");
				}
				// 例子: 接收用户输入的成绩，判断成绩所属的等级
				var b = prompt("请输入成绩");
				if(b>=80 && b<=100){
					alert("优秀");
				}else if(b>=60 && b<80){
					alert("中等");
				}else if(b>=0 && b<60){
					alert("不及格");
				}else{
					alert("输入有误");
				}
		</script>
	</head>
	<body>
	</body>
</html>

5.JS的数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试js的数组</title>
		<script>
			// 1.定义数组
				var a = new Array();
//js是弱类型的语言,对数据的类型要求并不高.可以存各种类型的数据,在java里要用Object[]
				var b = new Array(1, 1.1, true, null, 'jack' );
				var c = [ ] ;
//js里的数组,长度可以随时改变
				c = [1, 1.1, true, null, 'jack'];
				console.log(c); //获取数组的数据
				console.log(c.length); //获取数组的长度
				console.log(c[2]); 
			// 2.遍历数组
				for(var i = 0 ; i < c.length ;i++){
					console.log(i + "---" + c[i] ); //下标  和 根据下标获取数据
				}			
			// 3.for ... in
				for(var i  in c){ //i是下标
					console.log(i+"~"+c[i]);
				}
		</script>
		
	</head>
	<body>
	</body>
</html>

6.JS的函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>测试 js的函数</title>
		
		<script>
			// 语法: function 函数名(参数列表){ 函数体 }
			//方式1:
				//1, 定义函数
				function a(){ //不需要参数
					console.log(100);
				}
				function a2(a,b){//需要参数
					console.log(a+b);
				}
				function a3(a){//有返回值的函数
				return a ;//通过return返回结果
				}
				//2, 调用函数
				var v = a3('jack');
				console.log(v+'你好');
				a2(1, 1.2);
				a2('jack', 10);
				a(); 
			//方式2:
				//1, 定义函数
				var b = function(){
					console.log(1000);
				}
				var b2 = function(a,b){
					console.log(a*b);
				}
				var b3 =  function(a){
					return 'hello js' ;
				}
				//2, 调用函数
				var va = b3(10);
				console.log(va);
				
				b2(2,10);
				b();
				
		</script>
	</head>
	<body>
	</body>
</html>

cxy-ly

关注

0
点赞
踩
0

收藏

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

-1.概述JS全称是JAVA Script，只能在浏览器被执行，基于对象的事件驱动的脚本语言特点：弱类型，直译式特点：弱类型，直译式好处：增强了用户的交互性，相对安全，跨平台位置：行内js,内部js，外部js-2.入门案例 ...
复制链接

扫一扫