20201106JavaScript学习笔记（1）

最新推荐文章于 2024-06-03 09:20:03 发布

芙门泡芙

最新推荐文章于 2024-06-03 09:20:03 发布

阅读量710

点赞数 1

分类专栏： JavaScript学习文章标签： javascript

本文链接：https://blog.csdn.net/Li_black/article/details/109539518

版权

JavaScript学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

JavaScript学习笔记（1）

大家好我是小黑！！！很高兴能在这里分享自己学习JavaScript的经历。其实在大一的时候我有跟随课程学习过这门脚本语言，但是老师并没有深入来学习，只是一两节课就过去，导致现在要重新学习了。我会把每一次学习的笔记做成一个系列，如果其中有不对的地方，欢迎指出，谢谢！

我是跟随菜鸟教程来学习的，如果有记录的不全面的地方也欢迎大家在私信或者在评论区中指出，谢谢！

1、JavaScript 的基本用法

先贴代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>myfirstJavaScript</title>
		<script><!--在头部里面的JavaScript代码-->
		function display(){
			//这里创建了一个函数用于展示当前的日期
			//注意函数创建的语法是 function 函数名(){具体实现}
			document.getElementById("demo").innerHTML = Date() ;
			//这里是调用了DOM model 的一个方法，通过ID 找到相对应的元素（在本实例中指的是下方id为“demo”的p元素），然后将它的文本（innerHTML）更改为当前日期
		}
		function changeImage(){
			element = document.getElementById('myimage') ;
			//这里getElementById方法获得HTML中id为myimage的元素
			if (element.src.match("bulbon")){ // match方法是字符串匹配函数，现在只需知道它起到判断图片名字的作用即可，如果名字等于图片1，就更换为图片2，简单的if else条件判断，在网页中你可以点击一下灯泡查看效果
				element.src = "pic_bulboff.gif" ;
			}
			else {
				element.src = "pic_bulbon.gif" ;
			}
		}
	</script>
	</head>
	
	<body>
		<h1>
			my first javascript program
		</h1>
		<p id="demo" onclick="alert('you click p')">This is a paragraph</p>
		<!--注意这里onclick里面调用了alert，设置了一个点击事件，点击事件里面传入点击后执行的函数，你可以在网页中点击此处看看效果-->
		
		<button type="button" onclick="display()">show date</button>
		
		<script>		<!--body部分里面的JavaScript语句-->
			document.write("Helloworld！") ;
			document.write("<h1>This is a header</h1>") ;//动态添加html元素的其中一种方法
			document.write("<p>This is a paragraph</p>") ;
		</script>
		<img id = "myimage" onclick="changeImage()" src="pic_bulboff.gif" width="100" height="180" >
	</body>
</html>

这里提供图片资源：
请添加图片描述

在这里插入图片描述

PS：

1、体验一下在body中定义JavaScript和在head里面定义JavaScript的区别：

在body中定义的JavaScript代码，在网页加载过程中就已经被执行

<script>		<!--body部分里面的JavaScript语句-->
			document.write("Helloworld！") ;
			document.write("<h1>This is a header</h1>") ;//动态添加html元素的其中一种方法
			document.write("<p>This is a paragraph</p>") ;
		</script>

如图：

在这里插入图片描述
但是如果将该代码片转移一下位置

function display(){
			document.getElementById("demo").innerHTML = Date() ;
			document.write("<h1>This is a header</h1>") ;
			document.write("<p>This is a paragraph</p>") ;
		}

此时我们再点击button，结果如下：

在这里插入图片描述为什么会这样呢？
本人理解：
这是因为在body中的JavaScript语句在网页加载完成前已经被执行完成，所以代码所起的作用已经成为了网页的一部分，但是头部中的JavaScript函数并没有被执行，当点击修改后的button后，document.write方法打印的文本会覆盖网页上的所有的文本

2、JavaScript调用方式：

1、直接在head部分定义JavaScript的所有代码
2、在body中定义调用JavaScript的所有代码。
3、在head部分引用外部js文件。

在上面的代码中，我们已经实现了前两种，但是在实际开发中我们讲究的是实现与调用分离，我们应该通过在该html文件外的一个js文件中定义js代码，然后引用进来进行使用。这样有什么好处呢？
先上代码片：

<script src="new_file.js"></script>

第一：如果html的代码很长的话，在冗长的代码中寻找JavaScript代码段会是一件很头疼的事情，我们如果采用外部文件的形式的话，我们在修改、debug等工作中仅仅修改一个文件即可。

第二：对于用户来说，他们不需要知道页面上某个逻辑如何实现，只需知道如何使用这个功能。外部文件把调用和实现分离，用户只需知道哪里能干嘛，不需要知道实现的细节。

Thanks♪(･ω･)ﾉ

芙门泡芙

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
20201106JavaScript学习笔记（1）

JavaScript学习笔记（1）大家好我是小黑！！！很高兴能在这里分享自己学习JavaScript的经历。其实在大一的时候我有跟随课程学习过这门脚本语言，但是老师并没有深入来学习，只是一两节课就过去，导致现在要重新学习了。我会把每一次学习的笔记做成一个系列，如果其中有不对的地方，欢迎指出，谢谢！我是跟随菜鸟教程来学习的，如果有记录的不全面的地方也欢迎大家在私信或者在评论区中指出，谢谢！JavaScript的基本用法：（1）...
复制链接

扫一扫