Web基础之初识JavaScript

最新推荐文章于 2022-07-20 21:59:26 发布

BlueSky_USC

最新推荐文章于 2022-07-20 21:59:26 发布

阅读量539

点赞数

分类专栏： web基础文章标签： web基础 JS基础 JS实战 JavaScript 脚本语言

本文链接：https://blog.csdn.net/BlueSky_USC/article/details/70214882

版权

web基础专栏收录该内容

28 篇文章 3 订阅

订阅专栏

Web基础之初识JavaScript

一、JavaScript简介：

1、JS的身世：

JavaScript是NetScape公司为Navigator浏览器开发的，是写在HTML文件中的一种脚本语言，能实现网页内容的交互显示。当用户在客户端显示该网页时，浏览器就会执行JavaScript程序，用户通过交互的操作来改变网页的内容，来实现HTML语言无法实现的效果。

如果将网页比作模特
HTML表示模特自身
CSS表示模特的服装修饰
JS则结合模特自身和修饰达到动态，表示模特的动作。

2.JS的使用方法：

3.JS的基本语法：

JavaScript的执行顺序：按照在HTML文件中出现的顺序依次执行

大小写敏感：JavaScript严格区分大小写

忽略空白符和换行符

通过\对代码进行折行操作：

document.write(' hello\ world');

注释:

单行注释//

多行注释/*注释内容*/

JavaScript的保留字

通过document.write()向文档书写内容

通过console.log()向控制台写入内容

JavaScript中调试的错误

通过alert()进行调试

通过控制台进行调试

4.What Can JS Do(就让我装一下吧)

JavaScript：写入 HTML 输出
JavaScript：对事件作出反应
JavaScript：改变 HTML 内容
JavaScript：改变 HTML 属性
JavaScript：改变 HTML 样式
JavaScript：验证输入

5.DOM了解

当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）
常见用法
查找 HTML 元素 getElementsByTagName
getElementsByName
getElementById
创建节点
createElement
createTextNode
appendChild
删除节点
removeChild

6、JS常用事件

二、JS实战

实战一：JS改变HTML中的内容以及内容样式、JS事件响应

效果图：点击更改按钮后，HTML中的内容以及样式发生改变

源代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>我的第一个JS</title>
		<style type="text/css">
		/*原来的样式*/
			#poem{
				color: green;
				font-family: "华文行楷";
				font-size: 25px;
			}
		</style>
		<!--
        	作者：offline
        	时间：2017-04-17
        	描述：JS代码改变原有的内容和样式
        -->
		<script type="text/javascript">
			function changePoem(){
				var poem=document.getElementById("poem");
				poem.innerHTML='黑发不知勤学早；白首方知后悔迟；';
				poem.style.color='red';
				poem.style.fontSize='20px';
				poem.style.fontFamily='微软雅黑';
			};
		</script>
	</head>
	<body>
		<!--HTML中的原始内容，CSS样式见上面-->
		<pre id="poem">
			举杯邀明月；
			对影成三人；
		</pre>
		<!--更改按钮，这涉及到了JS事件响应，当按钮被点击的时候回执行JS中的函数-->
			<input type="button" value="更改" style="width:100px; height:30px" οnclick="changePoem()"/>
	</body>
</html>

实战二：JS计算三角形的面积

效果图：点击计算按钮后，会显示计算结果

源代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>JS计算三角形的面积</title>
		<script type="text/javascript">
			function getvalue(){
				//通过id得到用户的输入
				var a=parseFloat(document.getElementById('a').value);
				var b=parseFloat(document.getElementById('b').value);
				var c=parseFloat(document.getElementById('c').value);
				//判断是否能构成三角形
				if(a<0 ||  b<0 || c<0 || a+b<c || a+c<b || b+c<a ||
					Math.abs(a-b)>c || Math.abs(a-c)>b || Math.abs(b-c)>a ){
					alert("不能构成三角形！");
				}else{
				//如果能则利用海伦公式计算面积
					var p=(a+b+c)/2;
					var s=Math.sqrt(p*(Math.abs(p-a))*(Math.abs(p-b))*(Math.abs(p-c)));
					alert("面积为："+s.toFixed(2));
				}
			}
		</script>
	</head>
	
	<body>
		<!--这里用到了三个输入文本框-->
		请输入三角形的边长：
		<input type="text" id="a" style="width: 80px;" />
		<input type="text" id="b" style="width: 80px;"/>
		<input type="text" id="c" style="width: 80px;"/>
		<!--计算按钮-->
		<input type="button"  value="计算"  οnclick="getvalue()"/>
	</body>
</html>

实战三：JS计算斐波那契数列

效果图：点击计算按钮后，会显示计算结果

源代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>斐波那契数列</title>
	</head>
	<body>
		<script type="text/javascript">
		
		//斐波那契数列的计算函数（递归计算）
		function feibonaqi(index){
			if(index==1 || index==2){
				return 1;
			}else{
				return feibonaqi(index-1)+feibonaqi(index-2);
			}
		}
		//计算斐波那契数列的函数
		function getvalue(){
		var text=document.getElementById('index');
			alert("计算结果为："+feibonaqi(text.value));
		}
		
		</script>
		<!--文本输入框和计算按钮-->
		<input type="text" id="index" name="请输入计算的数字" />
		<input type="button"  value="计算" οnclick="getvalue()"/>
	</body>
</html>

三、总结：

相信通过上面的三个实战小项目，对JS有了一定的了解；

通过上面的例子，我们可以看到，JS能够改变HTML中的内容，样式等；并能够对事件监听进行响应；这里我们可能需要对JS 的语法有一定的了解；上面的代码还是比较简单的，不过，越是简单的代码，就越要多敲两遍，增加对JS的熟悉；

这里，我们会觉得JS的语法和Java的语法有点不太一样，Java是一种强类型语言，有整形，浮点型，字符型等数据类型，而JS是一种弱类型语言，对于习惯了用强类型语言编程的我们来说，可能需要一点时间来适应这种弱类型编程；

共勉！

BlueSky_USC

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Web基础之初识JavaScript

Web基础之初识JavaScript一、JavaScript简介：1、JS的身世：JavaScript是NetScape公司为Navigator浏览器开发的，是写在HTML文件中的一种脚本语言，能实现网页内容的交互显示。当用户在客户端显示该网页时，浏览器就会执行JavaScript程序，用户通过交互的操作来改变网页的内容，来实现HTML语言无法实现的效果。如果将
复制链接

扫一扫