JavaScript基础

Posted 2021-03-09 Leerep

javascript

简介

document.getElementById("demo").innerhtml = "Hello JavaScript";
上述语句用来查找id为“demo”的HTML元素，并把元素内容更改为“Hello JavaScript”

JavaScript能干什么？

• 改变HTML内容

document.getElementById("demo").innerHTML = 'Hello JavaScript';

• 改变HTML属性

<button onclick="document.getElementById('myImage').src='/i/eg_bulbon.gif'">开灯</button>

<img id="myImage" border="0" src="/i/eg_bulboff.gif" style="text-align:center;">

<button onclick="document.getElementById('myImage').src='/i/eg_bulboff.gif'">关灯</button>

• 改变HTML样式

document.getElementById("demo").style.fontSize = "25px";

• 隐藏HTML元素

document.getElementById("demo").style.display="none";

• 显示HTML元素

document.getElementById("demo").style.display="block";

JavaScript可同时接受双引号和单引号，如：document.getElementById("demo").innerHTML = ‘Hello JavaScript‘ ;

JavaScript代码需要写在HTML文档的标签内。

script标签可在HTML文档的head标签或body标签内，也可以写成外部脚本，然后再HTML文档里面引用，如

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

还可以通过完整的URL来链接

注意：
外部脚本不能包含script标签

JavaScript写在外部的优势：

• 分离了 HTML 和代码
• 使 HTML 和 JavaScript 更易于阅读和维护
• 已缓存的 JavaScript 文件可加速页面加载

如需向一张页面添加多个脚本文件 - 请使用多个 script 标签

<script src="myScript1.js"></script>
<script src="myScript2.js"></script>

输出

JavaScript显示方案

• window.alert() 写入警告框
• document.write() 直接写入HTML页面
• innerHTML() 写入HTML元素
• console.log() 写入浏览器控制台

innerHTML()也可以这样写：

document.getElementById("demo").innerHTML = 6 * 10; 将写入60

注意：
在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML

语句

在 HTML 中，JavaScript 语句是由 web 浏览器“执行”的“指令”。

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

所有 JavaScript 标识符对大小写敏感

单行注释以 // 开头。
任何位于 // 与行末之间的文本都会被 JavaScript 忽略（不会执行）
多行注释以 /* 开头，以 */ 结尾。

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

变量

JavaScript 变量是存储数据值的容器。

所有 JavaScript 变量必须以唯一的名称的标识。

构造变量名称（唯一标识符）的通用规则是：

• 名称可包含字母、数字、下划线和美元符号
• 名称必须以字母开头
• 名称也可以 $ 和 _ 开头（但是在本教程中我们不会这么做）
• 名称对大小写敏感（y 和 Y 是不同的变量）
• 保留字（比如 JavaScript 的关键词）无法用作变量名称

提示：JavaScript 标识符对大小写敏感

在 JavaScript 中，等号（=）是赋值运算符，JavaScript 中的“等于”运算符是 ==。

在 JavaScript 中创建变量被称为“声明”变量。
您可以通过 var关键词来声明 JavaScript 变量

声明之后，变量是没有值的。（技术上，它的值是 undefined。）

您可以在一条语句中声明许多变量。

以 var 作为语句的开头，并以逗号分隔变量：

var person = "Bill Gates", carName = "porsche", price = 15000;

声明可横跨多行：

var person = "Bill Gates",
carName = "porsche",
price = 15000;

在计算机程序中，被声明的变量经常是不带值的。值可以是需被计算的内容，或是之后被提供的数据，比如数据输入。

不带有值的变量，它的值将是 undefined。

var carName;

变量 carName 在这条语句执行后的值是 undefined

如果再次声明某个 JavaScript 变量，将不会丢它的值。

在这两条语句执行后，变量 carName 的值仍然是 "porsche"

var carName = "porsche";
var carName;     //值仍为"porsche"

如果把要给数值放入引号中，其余数值会被视作字符串并被级联。

var x = "8" + 3 + 5;        //835
x = x + 5;    //8355
x = x - 3;    //8352

var y = 3 + 5 + "8";    //88
y = y + 5;    //885
y = y - 3;    //882

注意：

var x = "8" + 3 + 5;此时x为string类型，值为“835”，x + 5也为string类型，值为“8355”，但是x - 5 为number类型，值为8350

var x = 911 + “Porsche”；此时x为string类型，值为“911Porsche”，x + 5也为string类型，值为“911Porsche5“，但是输出x - 5结果为NaN，typeof(x - 5)为number类型

typeof（NaN）结果为number