JavaScript 基础

最新推荐文章于 2022-11-23 17:32:46 发布

霖霏晗

最新推荐文章于 2022-11-23 17:32:46 发布

阅读量394

点赞数 1

分类专栏： javascript

本文链接：https://blog.csdn.net/xxz_best/article/details/50482529

版权

javascript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

JavaScript 是脚本语言

JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 可以插入 HTML 页面

JavaScript：写入 HTML 输出

<!DOCTYPE html>
<html>
<body>
<p>
JavaScript 能够直接写入 HTML 输出流中：
</p>
<script>
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
document.write("<p>你好</p>");
</script>
<p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p>
</body>
</html>

JavaScript：对事件作出反应

<button type="button" οnclick="alert('Welcome!')">点击这里</button>

alert() 函数在 JavaScript 中并不常用，但它对于代码测试非常方便。

JavaScript：改变 HTML 内容

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript改变html内容</h1>
<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p>
<script>
function myFunction()
{
x=document.getElementById("demo");  // 找到元素
x.innerHTML="Hello，鹿晗!";    // 改变内容
}
</script>
<button type="button" οnclick="myFunction()">点击这里</button>
</body>
</html>

JavaScript：改变 HTML 图像

<!DOCTYPE html>
<html>
<body>
<script>
function changeImage()
{
element=document.getElementById('myimage')
if (element.src.match("bulbon"))
  {
  element.src="/images/eg_bulboff.gif";  //点击之前的图片。  
  }
else
  {
  element.src="/images/eg_bulbon.gif";   //点击之后的图片
  }
}
</script>

<img id="myimage" οnclick="changeImage()" src="/images/eg_bulboff.gif">
<p>点击图片改变图片</p>
</body>
</html>

JavaScript：改变 HTML 样式

<!DOCTYPE html>
<html>
<body>
<h1>JavaScript 能改变 HTML 元素的样式。</h1>
<p id="demo">
JavaScript 能改变 HTML 元素的样式。
</p>
<script>
function myFunction()
{
x=document.getElementById("demo") // 找到元素
x.style.color="#ff0000";          // 改变样式
}
</script>
<button type="button" οnclick="myFunction()">点击这里</button>
</body>
</html>

<head>和<body>中的JavaScript

脚本可位于 HTML 的 <body> 或 <head> 部分中，或者同时存在于两个部分中。

一般会放在head中或者body的底部，或者放在同一个位置，这样不会影响页面内容

也可以通过外部文件引用js

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

通过指定的 id 来访问 HTML 元素，并改变其内容：

<script>
document.getElementById("demo").innerHTML="My First JavaScript";
</script

直接把 <p> 元素写到 HTML 文档输出中

<!DOCTYPE html>
<html>
<body>

<h1>LH7</h1>

<script>
document.write("<p>LH7.LH7</p>");
</script>

</body>
</html>

代码显示效果为

<!DOCTYPE html>
<html>
<body>
<h1>鹿晗</h1>
<p>LH7！LH7！LH7</p>
<button οnclick="myFunction()">点击这里</button>
<script>
function myFunction()
{
document.write("糟糕！文档消失了。");
}
</script>
</body>
</html>

代码展现效果为

注意：

使用 document.write() 仅仅向文档输出写内容。

如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖