44-javaScript

一、javaScript介绍
Java Script(脚本) -> LiveScript -> 蹭热度 -> JavaScript Sun公司 -> Oracle公司 Java 它俩的关系就像 雷锋和雷峰塔 JavaScript是一门基于对象和事件驱动的[脚本语言](面向对象<原型prototype>的编程语言)。 脚本语言:无需编译 php python… 边解释边执行 可以给HTML添加交互行为

二、js的引入方式


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--
			CSS:
				1.行内样式表  style="width:xxpx;..."
				2.内部样式表  <style></style>
				3.外部样式表   .css文件   <link>引入到HTML中
			JS:
				1.内部脚本 <script></script>
				2.外部脚本  .js文件  <script src=""></script>
				3.行内脚本  它需要借助事件
					事件:交互行为   例如:鼠标悬浮事件、鼠标移除事件、键盘按下事件
							键盘松开事件、页面加载事件、鼠标单击事件、鼠标双击事件...
		-->
		<!-- alert() 可以在浏览器窗口弹出提示框 -->
		<!--<input type="button" value="点我啊!!!" "javascript:alert('就点你!!');" />-->
		<!--<input type="button" value="点我啊!!!" "alert('就点你!!')" />-->
		<input type="button"  value="清除缓存" "alert('清除成功!请放心使用!')" />
		
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
	</body>
</html>
------------------------------------------------------------------------------------
另一个文件中的js文件中的一个文件,通过引入的方式来进行去另一个html 中进行引用
document.write("我是外部JS文件");

三、js核心的语法

1.变量

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<script type="text/javascript">
			
			/*
			 * Java:
			 * 	1.先声明再赋值
			 * 		数据类型  变量名;
			 * 		变量名 = 变量值;
			 *  2.声明并赋值
			 * 		数据类型  变量名 = 变量值;
			 */
			// JS 先声明 再  赋值
			var name;
			name = "小韩";
			
			// JS 声明并赋值
			var age = 10;
			
			// 不声明直接赋值(不推荐)
			// gender = "男"
			document.write("<strong>姓名:</strong>"+name
			              +"<br/><strong>年龄:</strong>"+age
			              +"<br/><strong>性别:</strong>"+gender);
		</script>
	</body>
</html>
-----------------------------------------------------------------------------------
2.数据类型

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			
			/*
			 * Java数据类型:
			 * 		数值:byte short int long float double
			 * 		非数值:char boolean String
			 * 
			 * 		基本数据类型:byte short int long float double char boolean
			 * 		引用数据类型:数组、类(String)、接口、枚举...
			 */
			/* JS的数据类型:
			 	undefined:未定义   只声明却未赋值就是undefined
			 	null:做判断时 和 undefined是相等的
			 	number:数值类型  整数  小数
			 	boolean:布尔类型   true  false
			 	string:字符串类型   包含着''  ""
			 	object:对象类型
			 */
			
			var classId; 
			// alert(typeof classId); // undefined
			// alert(typeof null); 历史遗留问题 导致 返回object类型
			// alert(typeof 10.1); //number 
			// alert(typeof 20) // number
			// alert(typeof false); // Python:True  False
			// alert(typeof 'xxx'); string
			// alert(typeof "xxx"); string
			
			// 面向原型的面向对象
			var array = new Array();
			var str = new String();
			alert(typeof array);
		</script>
	</body>
</html>
----------------------------------------------------------------------------------
3.字符串常用操作

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<script type="text/javascript">
			
			var str1 = "Hello World";
			// length属性 获取字符串长度
			// Java:length();
			// alert(str1.length);
			
			// 返回指定索引位置的字符  索引从0开始
//			alert(str1.charAt(4));

			// 返回字符串中检索指定字符第一次出现的位置
//			alert(str1.indexOf("o"));
			
			// 提取字符串中两个指定的索引号之间的字符  [startIndex,endIndex)
//			alert(str1.substring(0,5));
			
			// 从某个索引开始 指定长度的子字符串
//			alert(str1.substr(0,2));
			
			// 把字符串分割为子字符串数组
			var arr = "hello_world_你好_世界".split("_");
			alert(arr[0]);
			alert(arr[1]);
			alert(arr[2]);
			alert(arr[3]);
			
		</script>
	</body>
</html>
-----------------------------------------------------------------------------
4.数组

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<script type="text/javascript">
			
			// 数组的定义
			/*var arr1 = new Array(3);
			arr1[0] = "视觉";
			arr1[1] = "中国";
			arr1[2] = "版权";*/
			
			/*var arr1 = new Array("视觉","中国","版权");
			
			alert(arr1[0]);
			alert(arr1[1]);
			alert(arr1[2]);*/
			
			// JSON(报文)数组
			var arr = ["视觉","中国","版权"];
			/*alert(arr[0]);
			alert(arr[1]);
			alert(arr[2]);*/
			
			alert(arr.length);
			
			var str = arr.join("~");
			alert(str);
		</script>
	</body>
</html>
--------------------------------------------------------------------------------
5.运算符号

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<script type="text/javascript">
			
			
			// == !=
			/*var num1 = 10;
			var num2 = 10;
			alert(num1 != num2);*/ // 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>
</html>
-----------------------------------------------------------------------------
5运算符号2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			
			var num1 = "10";
			var num2 = 10;
			var num3 = "9";
			// alert(num1 == num2); // 比较内容
			// alert(num1 === num2); // 全等:既比较内容 又比较数据类型
			alert(num1 === num3); 
		</script>
	</body>
</html>
----------------------------------------------------------------------------
6.选择结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<script type="text/javascript">
			
			/*
			 * 
			 * Java:
			 * 	基础if:
			 * 		if(){
			 * 	
			 * 		}
			 * 	互斥if:
			 * 		if(){
			 * 	
			 * 		}else{
			 * 	
			 * 		}
			 *  多重if:
			 * 		if(){
			 * 	
			 * 		}else if(){
			 * 	
			 * 		}else{
			 * 		
			 * 		}
			 *  嵌套if:
			 * 		if(){
			 * 			if(){
			 * 	
			 * 			}
			 * 		}
			 * 
			 * switch(){
			 * 	case 常量1:
			 * 		break;
			 *  ....
			 * 	default:
			 * 		break;
			 * 
			 * }
			 * 	
			 * 
			 */
			
			// 进火车站
			var hasTicket = 1; // 0表示无票  1表示有票			
			var lengthOfKnife = 8; // 刀子长度
			
			// 1.安检:刀子长度不能大于9cm
			if(lengthOfKnife <= 9){
				alert("通过安检!进站!");
				// 2.检票:有票才能乘车
				if(hasTicket == 1){
					alert("可以乘车!");
				}else{
					alert("无票不允许乘车!");
				}
			}else{
				alert("没收管制刀具,登记备案!");
			}
			
		</script>
	</body>
</html>
--------------------------------------------------------------------
7.循环结构

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<script type="text/javascript">
			
			/*
			 * Java:
			 * while(){
			 * 	
			 * }
			 * 
			 * do{
			 * 	
			 * }while();
			 * 
			 * for(int i = 0; i< xxx; i++){
			 * 	
			 * }
			 * 
			 * for(数据类型 变量名 : 要遍历的数组/集合){
			 * 	
			 * }
			 * 
			 */
			
			// JS  普通for循环
			var arr = ["小1","小2","小3"];
			/*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>
---------------------------------------------------------------------
8.输入和输出

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			
			// prompt() 可以弹出带有一个文本输入框的提示信息
			// p1:提示内容
			/*var name = prompt("请输入您的姓名:");*/
			
			// p2:文本框的默认值
			var name = prompt("请输入您的姓名:","xx");
			alert("您输入的姓名:"+name);
			
		</script>
	</body>
</html>
-------------------------------------------------------------------------
8.2输入和输出

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<script type="text/javascript">
			
			// 四则运算 
			// +法
			// -法
			
			// 提示输入第一个整数   和  第二个整数    实现加法运算
			
			// 将字符串转换为整数  parseInt()
			/*var num1 = parseInt(prompt("请输入第一个整数:")); // 它返回的结果数据 为string类型
			var num2 = parseInt(prompt("请输入第二个整数:"));
			alert(num1+" + "+num2+"的结果为:"+(num1+num2));*/
			
			var num1 = prompt("请输入第一个数:") - 0;
			var num2 = prompt("请输入第二个数:") - 0;
			alert(num1+num2);
		</script>
	</body>
</html>
----------------------------------------------------------------------------
9.自定义函数和方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		
		<!-- onblur 失去焦点事件 -->
		<!--<input type="text" id="" value="" "method3(this.value)" />-->
		<!--<input type="button" name="" id="" value="点我" "method1()" />-->
		<script type="text/javascript">
			
			/*
			 * public void 方法名(){
			 * 	
			 * }
			 * 
			 * public 返回值类型 方法名(){
			 * 	
			 * }
			 * 
			 * public void 方法名(参数列表){
			 * 	
			 * }
			 * 
			 * public 返回值类型 方法名(参数列表){
			 * 	
			 * }
			 */
			
			/*
			 * JS函数语法:
			 * 	function 方法名(参数列表){
			 * 		// 
			 * 		[return ...]
			 *  }
			 */
			
			// 无参无返
			/*function method1(){
				alert("呵呵");
			}*/
			// method1(); // 调用
			
			// 无参有返
			/*function method2(){
				alert("呵呵");
				return "蔡徐坤";
			}
			
			var name = method2();
			alert(name);*/
			
			// 有参无返
			/*function method3(var num1,var num2){
				
			}*/
			
			/*function method3(val){
				alert(val);
			}*/
			
			// method3("呵呵 纪检委来了!");
			
			// 有参有返
			function method4(val){
				return val;
			}
			
			
			var v = method4("一刀999");
			alert(v);
			
			/*
			 * python:  def:define  function
			 * 		def 方法名(参数列表):
			 * 			# 方法体
			 */
		</script>
	</body>
</html>







  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
完整版:https://download.csdn.net/download/qq_27595745/89522468 【课程大纲】 1-1 什么是java 1-2 认识java语言 1-3 java平台的体系结构 1-4 java SE环境安装和配置 2-1 java程序简介 2-2 计算机中的程序 2-3 java程序 2-4 java类库组织结构和文档 2-5 java虚拟机简介 2-6 java的垃圾回收器 2-7 java上机练习 3-1 java语言基础入门 3-2 数据的分类 3-3 标识符、关键字和常量 3-4 运算符 3-5 表达式 3-6 顺序结构和选择结构 3-7 循环语句 3-8 跳转语句 3-9 MyEclipse工具介绍 3-10 java基础知识章节练习 4-1 一维数组 4-2 数组应用 4-3 多维数组 4-4 排序算法 4-5 增强for循环 4-6 数组和排序算法章节练习 5-0 抽象和封装 5-1 面向过程的设计思想 5-2 面向对象的设计思想 5-3 抽象 5-4 封装 5-5 属性 5-6 方法的定义 5-7 this关键字 5-8 javaBean 5-9 包 package 5-10 抽象和封装章节练习 6-0 继承和多态 6-1 继承 6-2 object类 6-3 多态 6-4 访问修饰符 6-5 static修饰符 6-6 final修饰符 6-7 abstract修饰符 6-8 接口 6-9 继承和多态 章节练习 7-1 面向对象的分析与设计简介 7-2 对象模型建立 7-3 类之间的关系 7-4 软件的可维护与复用设计原则 7-5 面向对象的设计与分析 章节练习 8-1 内部类与包装器 8-2 对象包装器 8-3 装箱和拆箱 8-4 练习题 9-1 常用类介绍 9-2 StringBuffer和String Builder类 9-3 Rintime类的使用 9-4 日期类简介 9-5 java程序国际化的实现 9-6 Random类和Math类 9-7 枚举 9-8 练习题 10-1 java异常处理 10-2 认识异常 10-3 使用try和catch捕获异常 10-4 使用throw和throws引发异常 10-5 finally关键字 10-6 getMessage和printStackTrace方法 10-7 异常分类 10-8 自定义异常类 10-9 练习题 11-1 Java集合框架和泛型机制 11-2 Collection接口 11-3 Set接口实现类 11-4 List接口实现类 11-5 Map接口 11-6 Collections类 11-7 泛型概述 11-8 练习题 12-1 多线程 12-2 线程的生命周期 12-3 线程的调度和优先级 12-4 线程的同步 12-5 集合类的同步问题 12-6 用Timer类调度任务 12-7 练习题 13-1 Java IO 13-2 Java IO原理 13-3 流类的结构 13-4 文件流 13-5 缓冲流 13-6 转换流 13-7 数据流 13-8 打印流 13-9 对象流 13-10 随机存取文件流 13-11 zip文件流 13-12 练习题 14-1 图形用户界面设计 14-2 事件处理机制 14-3 AWT常用组件 14-4 swing简介 14-5 可视化开发swing组件 14-6 声音的播放和处理 14-7 2D图形的绘制 14-8 练习题 15-1 反射 15-2 使用Java反射机制 15-3 反射与动态代理 15-4 练习题 16-1 Java标注 16-2 JDK内置的基本标注类型 16-3 自定义标注类型 16-4 对标注进行标注 16-5 利用反射获取标注信息 16-6 练习题 17-1 顶目实战1-单机版五子棋游戏 17-2 总体设计 17-3 代码实现 17-4 程序的运行与发布 17-5 手动生成可执行JAR文件 17-6 练习题 18-1 Java数据库编程 18-2 JDBC类和接口 18-3 JDBC操作SQL 18-4 JDBC基本示例 18-5 JDBC应用示例 18-6 练习题 19-1 。。。

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值