JavaScript 学习笔记

dmr · 发表于 5 小时前

1.JavaScript改变html元素标签值

<p id="demo">JavaScript 能够改变 HTML 内容。</p>
<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>点击我！</button>

复制代码

2.JavaScript改变 HTML 属性值

<button onclick="document.getElementById('myImage').src='/img/bg.gif'">改变状态</button>

复制代码

3.JavaScript改变 HTML 样式 (CSS)

<p id="demo">JavaScript 能够改变 HTML 元素的样式。</p>
<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">点击我！</button>

复制代码

4.JavaScript 显示隐藏的 HTML 元素

<p id="demo" style="display:none">Hello JavaScript!</p>
<button type="button" onclick="document.getElementById('demo').style.display='block'">点击我！</button>

复制代码

5.JavaScript 使用

①.<script> 标签

在 HTML 中，JavaScript 代码必须位于 <script> 与 </script> 标签之间。

<script>
document.getElementById("demo").innerHTML = "hello JavaScript!";
</script>

复制代码

②.JavaScript 函数和事件

JavaScript 函数是一种 JavaScript 代码块，它可以在调用时被执行。<head> 或 <body> 中的 JavaScript
您能够在 HTML 文档中放置任意数量的脚本。

③.外部脚本

脚本可放置与外部文件中。

<!DOCTYPE html>
<html>
<body>
<h2>外部 JavaScript</h2>
<p id="demo">一个段落。</p>
<button type="button" onclick="myFunction()">试一试</button>
<p>（myFunction 存储在名为 "myScript.js" 的外部文件中。）</p>
<script src="/demo/myScript.js"></script>
</body>
</html>

复制代码

6.JavaScript 输出

JavaScript 显示方案

JavaScript 能够以不同方式“显示”数据：

使用 window.alert() 写入警告框

window.alert(5 + 6);//弹出框展示11

复制代码

使用 document.write() 写入 HTML 输出

document.write(5 + 6);//输出11

复制代码

使用 innerHTML 写入 HTML 元素

document.getElementById("demo").innerHTML = 5 + 6;//<span style="background-color: rgb(255, 255, 255);">输出：11</span>

复制代码

使用 console.log() 写入浏览器控制台

console.log(5 + 6);

复制代码

JavaScript 程序

计算机程序是由计算机“执行”的一系列“指令”。

在编程语言中，这些编程指令被称为语句。

JavaScript 程序就是一系列的编程语句。

注意：在 HTML 中，JavaScript 程序由 web 浏览器执行。

avaScript 语句

JavaScript 语句由以下构成：

值、运算符、表达式、关键词和注释。

这条语句告诉浏览器在 id="demo" 的 HTML 元素中输出 "Hello Kitty."：

document.getElementById("demo").innerHTML = "Hello Kitty.";

复制代码

大多数 JavaScript 程序都包含许多 JavaScript 语句。

这些语句会按照它们被编写的顺序逐一执行。

注意：JavaScript 程序（以及 JavaScript 语句）常被称为 JavaScript 代码。

分号 ;
分号分隔 JavaScript 语句。

请在每条可执行的语句之后添加分号

a = 5;
b = 6;
c = a + b;

复制代码

如果有分号分隔，允许在同一行写多条语句：

a = 5; b = 6; c = a + b;

复制代码

JavaScript 空白字符
JavaScript 会忽略多个空格。您可以向脚本添加空格，以增强可读性。

JavaScript 代码块

JavaScript 语句可以用花括号（{...}）组合在代码块中。

代码块的作用是定义一同执行的语句。

您会在 JavaScript 中看到成块组合在一起的语句：

实例

function myFunction() {
document.getElementById("demo").innerHTML = "Hello Kitty.";
document.getElementById("myDIV").innerHTML = "How are you?";
}

复制代码

JavaScript 关键词
JavaScript 语句常常通过某个关键词来标识需要执行的 JavaScript 动作。

下面的表格列出了一部分将在教程中学到的关键词：

关键词	描述
break	终止 switch 或循环。
continue	跳出循环并在顶端开始。
debugger	停止执行 JavaScript，并调用调试函数（如果可用）。
do ... while	执行语句块，并在条件为真时重复代码块。
for	标记需被执行的语句块，只要条件为真。
function	声明函数。
if ... else	标记需被执行的语句块，根据某个条件。
return	退出函数。
switch	标记需被执行的语句块，根据不同的情况。
try ... catch	对语句块实现错误处理。
var	声明变量。

注意：JavaScript 关键词指的是保留的单词。保留词无法用作变量名。

微信扫一扫，分享更方便