20201106JavaScript学习笔记（1）

最新推荐文章于 2024-11-02 19:19:35 发布

芙门泡芙

最新推荐文章于 2024-11-02 19:19:35 发布

阅读量755

点赞数 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方法打印的文本会覆盖网页上的所有的文本