JavaScript基础

2023-10-30

W3C
结构化语言标准:HTML XHTML XML…
表现语言标准:CSS
行为语言标准: ECMAScript JS

有的时候代码没错 就是不显示 原因你得变量 定义在了function(){}函数的外面

document()向页面输出内容
alert()直接弹出框 弹出来内容
prompt()弹出来框框以后再框框里面输入内容
isNaN("12")例外这个返回是false ,当不是数值的时候 返回true 是数值 返回false
onblur()失去焦点 离开文本框的时候


1. JS介绍

JavaScript是一门基于对象和事件驱动的脚本语言
脚本语言:无需编译 php python…
边解释边执行
可以给HTML添加交互行为


	<body>
		<!--"text/javascript"  可以省略  推荐放在body结束标签的上方  js边解释边执行-->
		<script type="text/javascript">
			//单行注释
			/*多行注释*/
			//向页面输出内容  需要加双引号/单引号  都可以
			document.write("<h1>hello world</h1>");
		</script>
	</body>

2. JS引入方式

JS:
1.内部脚本 <script></script>
2.外部脚本 .js文件 <script src=""></script>
3.行内脚本 它需要借助事件
事件:交互行为 例如:鼠标悬浮事件、鼠标移除事件、键盘按下事件
键盘松开事件、页面加载事件、鼠标单击事件、鼠标双击事件…

双引号里面不能再写双引号

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<!--
			类似于当初在HTML标签中 每一个都有style属性一样
			它们每一个也有事件对应的属性
				onclick  在点击的时候 会触发
			alert(弹出内容);
		-->
		<!-- 行内引入 -->
		<input type="button" onclick="javascript:alert('点了!咋滴!');" value="点啊!" />
		
		<!-- 外部引入  -->
		<!--<script src="js/index.js" type="text/javascript" charset="utf-8"></script>-->
		<!-- 内部编写 -->
		<script type="text/javascript">
			/*<!-- 
				// 向页面输出内容
				document.write("Hello JS"); 
			-->*/
			document.write("<h2>Hello JS</h2>");
		</script>
	</body>
</html>

在这里插入图片描述

3. 核心语法

3.1变量

	<body>
		<script type="text/javascript">
			// 第一种: JS 先声明 再  赋值
			var name;
			name="黑色";
			//document.write(name);	
			// 第二种: JS 声明并赋值
			var age=10;

			// 第三种: 不声明直接赋值(不推荐)
			// gender = "男"
			document.write("<strong>姓名</strong>"+name
			                   +"<br/>年龄"+age);
		</script>
	</body>

3.2数据类型

<body>
		<script type="text/javascript">
			/*js数据类型
			 * undefined未定义的 只声明 未赋值
			 * number整数 小数
			 * boolean true false
			 * string小写s 单引+双引号
			 * object 对象类型
			 * 
			 * typeof检测变量的返回值
			 * python中是True  False
			 */
			var classid;
		alert(typeof classid);  //显示undefined
		
		//alert(typeof null); 显示object
		//alert(typeof 10.1); 显示number
		//alert(typeof 20); 显示number
		//alert(typeof true); 显示boolean
		//alert(typeof 'xxx');显示string
		//alert(typeof "xxx"); 显示string
		
		//面向原型的面向对象
		//var array=new Array();
		//alert(typeof array);//显示object
		//var str=new String();
		//alert(typeof str);//显示object
		
		//看的只是typeof后面的数
		</script>
	</body>

3.3字符串

<body>
		<script>
			var string1="hello world";
		/*
		alert(string1.length);
		输出11		
		*/
		
		//charAt返回指定索引(从0开始)的字符
		//alert(string1.charAt(5));//输出空白 从0开始
		
		//返回字符串中检索指定字符第一次出现的位置 找不到就返回-1
		//alert(string1.indexOf("o"));
		
		// 提取字符串中两个指定的索引号之间的字符  [startIndex,endIndex)
		//alert(string1.substring(0,5)); 输出hello
		
		// 从某个索引开始 指定长度的子字符串 [)
		//	alert(string1.substr(0,3));输出hel
		

		/*索引从3开始 查找- 第一次出现的索引  结果为3*/
		//	var str1 = "你-最-衰-a";
		//	alert(str1.indexOf("-",3));

		// 把字符串分割为子字符串数组
		var str="hello_q_w".split("_");
		alert(str[0]);
		alert(str[1]);
		alert(str[2]);
		</script>
	</body>

3.4数组

<body>
		<script>
			/*
			在java中 String[] arr1=new String[3];
			var arr1=new Array(3);
			arr1[0]="qq";
			arr1[1]="ww";
			arr1[2]="ee";
			*/
			
			//两种写法
			/*
		java中	 String arr1=new Stirng{"qq","ww","ee"};
			var arr1=new Array("qq","ww","ee");
			alert(arr1[0]);
			alert(arr1[1]);
			alert(arr1[2]);
			 */
			
			//json()数组  报文
			var arr=["q","w","e"];
			/*alert(arr[0]);
			alert(arr[1]);
			alert(arr[2]);
			*/
			
			alert(arr.length);
			var str=arr.join("~");//输出q~w~e
			alert(str);
		</script>
	</body>

3.5运算符号

<body>
		<script>
			//var num11=10;
			//var num22=10;
			//alert(num11==num22);//true
			//alert(num11!=num22);//false
			
				
			// 在字符串和数值进行比较时/计算 会自动将字符串转换为数值
			var num1 = "10";
			var num2 = 10;
			// alert(num1 == num2); // true
			// alert(num1-9);//输出1
			 
			 		
			// 凡是与字符串用+号拼接的 都变成了字符串
			//alert(num1 + 9); // 109
			
			// Java:equals()
			var num1 = "10";
			var num2 = "100";
			alert(num1 == num2); // false*/
			
		</script>
<body>
		<script>
			var num1="10";
			var num2=10;
			var num3="9";
			//alert(num1==num2);//true 比较内容
			alert(num1===num2);//false 全等:既比较内容 又比较数据类型
		
		</script>
	</body>

3.6逻辑控制语句

<html>
	<head>
		<meta charset="UTF-8">
		<title>选择</title>
	</head>
	<body>
		<script type="text/javascript">
		
			//1有票   0无票
			var hasTicket=1;
			var lengthOfKnife=10;
			
			
			if(lengthOfKnife<=9){
				alert("进站");
				//检票
				if(hasTicket==1){
					alert("可以乘车");
				}else{
					alert("无票 不允许坐车");
				}
			}else{
				alert("没收");
			}
		</script>
	</body>
</html>

<html>
	<head>
		<meta charset="UTF-8">
		<title>循环</title>
	</head>
	<body>
		
		<script>
			/**
			 * js中 只有while 普通for
			 * while()
			 * 
			 * do{
			 * 	
			 * }while();
			 * 
			 * 
			 * for(int i-0;i<9;i++){}
			 * 
			 * for(数据类型 变量名:要遍历的数组){}
			 */
			
			var arr=["q","w","e"];
			
			for(var i=0;i<arr.length;i++){
				alert(arr[i]);
			}
			
			
			var i=0;//初始化循环变量
			while(i<arr.length){
				alert(arr[i]);
				i++;
			}
		</script>
	</body>
</html>

3.7输入输出

<body>
		<script>
			//prompt()  p1:提示内容
			var str=prompt("请输入姓名");
		alert("您的姓名"+str);
			
			//p1:提示内容    p2:文本框的默认值
			var name=prompt("请输入你的颜色","red")
			alert("你的颜色"+name)
		</script>
	</body>

在这里插入图片描述

<body>
		<script>
			/*
			var num1=prompt("请输入第一个数");  // 它返回的结果数据 为string类型
			var num2=prompt("请输入第二个数");
			
			alert(num1+"+"+num2+"的结果为"+(num1+num2));
			1   2  输出12  
			实现加法  下面来解决
			*/
			
			//parseInt字符串转为整数(1,2,3。。。)类型
			/*
			var num1=parseInt(prompt("请输入第一个数"));
			var num2=parseInt(prompt("请输入第二个数"));
			alert(num1+num2);
			*/
			
			//转为数值类型
				var num1 = prompt("请输入第一个数:") - 0;
			var num2 = prompt("请输入第二个数:") - 0;
			alert(num1+num2);
			
			
		</script>
	</body>
parseFloat(num1)

3.8自定义函数

<body>
	
		<script>
			/*
			 * public void 方法名(){
			 * 	
			 * }
			 * 
			 * public 返回值类型 方法名(){
			 * 	
			 * }
			 * 
			 * public void 方法名(参数列表){
			 * 	
			 * }
			 * 
			 * public 返回值类型 方法名(参数列表){
			 * 	
			 * }
			 */
			
			/*
			 * JS函数语法:
			 * 	function 方法名(参数列表){
			 * 		// 
			 * 		[return ...]
			 *  }
			 */
			
			/*无参无返
			function method1(){
				alert("呵呵")
			}
			method1();//调用
		*/
		
		/*	//无参有返
			function method2(){
			
				return "蔡徐坤";
			}
			
			var name=method2();
			alert(name)
		*/	
			
		/*	//有参无返
				function method3(vall){
				alert(vall);
			}
			method3("hehe");
		*/
		
				// 有参有返
			function method4(val){
				return val;
			}
			
			
			var v = method4("一刀999");
			alert(v);
			
		
		</script>
	</body>

在这里插入图片描述


==获取input里面的值 ==

<body>
	<!-- onblur 失去焦点事件 -->
	<!--我希望当我失去焦点的时候 自动弹出内容-->
		<input type="text" id="" value="" οnblur="method3(this.value)" />
		<script>
			function method3(vall){
				alert(vall);
			}
			
		</script>
	</body>

结果 你输入什么内容 就会弹出来什么内容

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

JavaScript基础 的相关文章

  • termux下安装centos安装python

    安装termux 链接 f droid 下载安装 授存储权限 termux setup storage 提示输入y 换源 termux change repo 获权 termux chroot 先安装依赖 pkg install pytho
  • 冯乐乐之二 shader的数学

    冯乐乐目录 第2章渲染流水线介绍 第三章 Unity shader基础 基础shaderLab语言 shader结构 属性properties 主角SubShader 备胎Fallback shader三大类型 Unity宠儿表面着色器 聪
  • Python 程序设计练习1.2

    从键盘输入三个数到a b c中 按公式值输出 在同一行依次输入三个值a b c 用空格分开 输出 b b 4 a c的值 输入格式 在一行中输入三个数 输出格式 在一行中输出公式值 输入样例 在这里给出一组输入 例如 1 7 3 输出样例
  • Linux下查找和删除7天以前的文件

    在工作做 项目里runtime目录下产生很多日志文件 需要定期去删除 记一次linux下清理过期日志的过程 环境说明 删除 var log 下7天以前的 log文件 用到的命令 find rm 命令示例 find data www runt

随机推荐