前端学习——JavaScript与HTML

最新推荐文章于 2023-04-16 23:01:23 发布

Wby_Nju

最新推荐文章于 2023-04-16 23:01:23 发布

阅读量204

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/Wby_Nju/article/details/104096405

版权

前端专栏收录该内容

32 篇文章 4 订阅

订阅专栏

文章目录

HTML中使用script标签
外部的 JavaScript
- 简单示例
- 事件和函数

HTML中使用script标签

JS的简单使用

<!DOCTYPE html>
<html>
<body>
.
.
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落</p>");
</script>
.
.
</body>
</html>

效果：
在这里插入图片描述

JS的函数和事件

.html中调用函数，就onclick="myFunction()"（有参数就在里面加上需要的参数例如：onclick="onclicknum(1)）

函数需要改变界面，就获取元素的id，如str = document.getElementById("nummessege");

head标签中

示例地址

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
    document.getElementById("demo").innerHTML="你好哇，李银河";
}
</script>
</head>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">尝试一下</button>
</body>
</html>

body标签中

示例地址

<!DOCTYPE html>
<html>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">尝试一下</button>
<script>
function myFunction()
{
    document.getElementById("demo").innerHTML="你好哇，李银河";
}
</script>
</body>
</html>

外部的 JavaScript

简单示例

乱码问题：我们在遇到乱码问题的时候，是由于编码不一致导致的

<!DOCTYPE html>
<meta charset="utf-8"> 
<html>
<body>
<script src="myScript.js" charset="utf-8"></script>
</body>
</html>

myScript.js文件下

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

事件和函数

示例地址
.html文件

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
	
<h1>我的 Web 页面</h1>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">点击这里</button>
<p><b>注释：</b>myFunction 保存在名为 "myScript.js" 的外部文件中。</p>
<script src="myScript.js"></script>
	
</body>
</html>

myScript.js文件

function myFunction()
{
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}

Wby_Nju

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端学习——JavaScript与HTML

文章目录HTML中使用script标签JS的简单使用JS的函数和事件head标签中body标签中外部的 JavaScriptHTML中使用script标签JS的简单使用<!DOCTYPE html><html><body>..<script>document.write("<h1>这是一个标题</h1>");...
复制链接

扫一扫