JavaScript初始入门

JoneClassMate

已于 2022-04-01 08:55:17 修改

阅读量738

点赞数 1

文章标签： java

于 2022-03-31 18:12:51 首次发布

本文链接：https://blog.csdn.net/m0_63300795/article/details/123873288

版权

一，简介

1.JavaScript(Java脚本)是一种基于对象（Object）和事件驱动（ Event Driven）并具有安全性能的脚本语言，使用JavaScript可以轻松的实现与HTML的互操作，并且完成丰富的页面交互效果，它是通过嵌入或调入在标准的HTML语言中实现的，它的出现弥补了HTML的缺陷，是java与HTML折衷的选择。

2.基于对象：指的是程序的内部已经为用户提供好了若干个对象，用户直接使用这些对象即可。

3.面向对象：java属于面向对象的语言，面向对象是指用户自己定义类，对象需要用户自己产生。

4.java与JavaScript的关系：看图所示看看！！！！！！

二，javaScript使用

1.只需要编写script元素即可

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		/* 编写js代码 */
	</script>
</html>

2.javaScript的代码都是顺序执行的

3.如果希望控制在页面中显示

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		/* 编写js代码 */
		document.writeln("Hello World!");
	</script>
</html>

三，变量的使用

1.使用var定义一个JavaScript变量，变量的具体类型由所赋的内容来决定

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		/* 编写js代码 */
		/* 定义变量 */
		var a = 1;
		var b = 2.2;
		var c = "你好! 世界";
		var d = 'C';
		document.writeln("整形"+a);
		document.writeln("整形"+b);
		document.writeln("字符串"+c);
		document.writeln("字符串"+d);
	</script>
</html>

2.当然不用var关键字也可以

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		/* 编写js代码 */
		/* 定义变量 */
		a = 1;
		b = 2.2;
		c = "你好! 世界";
		d = 'C';
		document.writeln("整形"+a);
		document.writeln("整形"+b);
		document.writeln("字符串"+c);
		document.writeln("字符串"+d);
	</script>
</html>

四，判断循环分支

1. if判断

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		/* 编写js代码 */
		var sa = "爱与不爱me"；
		if(sa=='爱与不爱me'){
			document.writeln("条件成立");
		}else{
			document.writeln("条件不成立");
		}
	</script>
</html>

2. 在java中双等于号==是不能判断字符串相等的，而在javascript中没有限制

3. for循环

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		/* 编写js代码 */
		/* 从1开始 循环 到10结束 */
		for (var i=1; i<=10;i++) {
			document.write(i);
		}
	</script>
</html>

4. switch分支

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			var a=prompt("请输入星期");/* 输入框 */
			switch(a){/* 传入输入的值 */
				case "星期一":
				case "星期二":
				case "星期三":
				alert("今天也要努力学习！");/* 输入的值匹配以上的case内容就弹出次内容 */
				break;/* 以上条件满足就结束 */
				case "星期四":
				case "星期五":
				alert("好好休息吧! 少年")/* 输入的值匹配以上的case内容就弹出次内容 */
				break;/* 以上条件满足就结束 */
				default:/* 默认的 */
				alert("加油")/* 输入的值不匹配以上的case内容就弹出次内容 */
			}
		</script>
	</body>
</html>

五，函数

1.javascript中所有的函数都是function关键字定义的

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
	</body>
	<script type="text/javascript">
		/* 编写js代码 */
		/* 定义一个function方法 */
		function fun(s){/* 传一个参数 */
			return s;/* 返回 */
		}
		/* 调用方法 */
		var a=fun(12);/* 传参数 */
		/* 打印 */
		document.write(a);
	</script>
</html>

六，用JavaScript开发一个计算器

1. 下方直接发代码啦感兴趣的可以了解一下嘿嘿哈！！！

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<form >
		<!-- 写html代码 -->
		<!-- 定义标签 -->
		<center><img src="img/微信图片_20220331121542.jpg" style="width: 50px; height: 50px;"><font size="5" color="deeppink" style="font-family: '华文行楷';">辉辉酱计算器</font><br>
		值一 : <input type="text" id="sa"/><br><br>
		值二 : <input type="text" id="sb"/><br><br>
		结果 : <input type="text"  disabled="disabled" id="sc"/><br><br>
		<!-- 定义按钮 -->
		&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<button type="button" onclick="a('+')">+</button>&nbsp;
		<button type="button" onclick="a('-')">-</button>&nbsp;
		<button type="button" onclick="a('*')">*</button>&nbsp;
		<button type="button" onclick="a('/')">/</button>&nbsp;
		<button >清空</button></center>
		</form>
	</body>
	<script type="text/javascript">
		<!-- 写javascript代码 -->
		/* 定义一个计算器的方法 */
		function a(cs){//灵活传参
			/* 获取文本框里面的值 */
			var sa = document.getElementById("sa").value;
			var sb = document.getElementById("sb").value;
			/* 定义变量总和 */
			var sum;
			/* 判断传入的是什么值  加减乘除*/
			if(cs=="+"){
				//相加赋值给sum总和变量
				sum=parseFloat(sa)+parseFloat(sb);
			}else if(cs=="-"){
				sum=parseFloat(sa)-parseFloat(sb);
			}else if(cs=="*"){
				sum=parseFloat(sa)*parseFloat(sb);
			}else{
				sum=parseFloat(sa)/parseFloat(sb);
			}
			/* 最后都会执行的代码 赋值 */
			document.getElementById("sc").value = sum;
		}
	</script>
</html>

2. 效果图

对照片感兴趣的话可以评论私我给你喔

JoneClassMate

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript初始入门

一，简介1.JavaScript(Java脚本)是一种基于对象（Object）和事件驱动（ Event Driven）并具有安全性能的脚本语言，使用JavaScript可以轻松的实现与HTML的互操作，并且完成丰富的页面交互效果，它是通过嵌入或调入在标准的HTML语言中实现的，它的出现弥补了HTML的缺陷，是java与HTML折衷的选择。2.基于对象：指的是程序的内部已经为用户提供好了若干个对象，用户直接使用这些对象即可。3.面向对象：java属于面向对象的语言，面向对象是指用户自己定义类，..
复制链接

扫一扫