JavaScript学习笔记一：javaScript用法

最新推荐文章于 2024-09-29 18:24:40 发布

坐着地板打地鼠

最新推荐文章于 2024-09-29 18:24:40 发布

阅读量132

点赞数

分类专栏： JavaScript 文章标签： javascript html js

本文链接：https://blog.csdn.net/qq_41494557/article/details/106067113

版权

JavaScript 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

JavaScript学习笔记

JavaScript用法

Html中的脚本必须位于标签之间

脚本被放置在html页面的和中

script标签

[如需在html页面中插入JavaScript，要使用<script>标签;

<script></script>标签意味着JavaScript的开始与结束;

<script></script>之间的代码包含了JavaScript;

萌新初体验：MyFirstJavaScriptPage

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>FirstJavaScriptPage</title>
<script>
    //函数myfunction()
function myfunction(){
    document.write("使用函数来执行doucment.write，即在文档加载后再执行这个操作，会实现文档覆盖");
    alert("hello，Word！JavaScript！！！");
}

document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");

</script>
</head>
<body>


<p >

您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p>
<button type="button" onclick="myfunction()">点击这里</button>
</body>
</html>

为了方便代码阅读，通常将JavaScript函数写在head中,又或者放置在页面底部，这样就不会干扰到页面的内容了。

①根据以上案例可知：HTML 输出流中使用 document.write，相当于添加在原有html代码中添加一串html代码。而如果在文档加载后使用（如使用函数），会覆盖整个文档。

②在标签中设置onclick事件调用函数时，是οnclick=函数名()，而不是οnclick=函数名，可以结合java中的方法进行理解，具体例子如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>OnclickTest1</title>
<script>
		//方法
		function onClickFunction(){
			document.getElementById("demo").innerHTML="onclick事件触发相应处";
		}

</script>
</head>
<body>	
		
		<button  id="demo"  onclick="onClickFunction()" type="button">触发事件按钮</button>
</body>
</html>

外部javaScript

为了使代码页面内容与修饰分离，更方便阅读代码修改，可以将JavaScript文件放置在外部，JavaScript的文件扩展名为js，格式为：

<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>

实例1：

	<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试JavaScript外部文件</title>
</head>
<body>
		<h1>html测试页面</h1>
		<p id="demo">这是一个测试段落</p>
		<button type="button" onclick="outdoorFunction()">点击这里测试</button>
		<script type="text/javascript" src="myScript.js"></script>
</body>
</html>

/**
 * 外部JavaScript文件
 */

function outdoorFunction(){
	 document.getElementById("demo").innerHTML="外部脚本触发成功";
}

执行效果：

在这里插入图片描述

坐着地板打地鼠

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录