JavaScript基础学习（1）

最新推荐文章于 2022-08-02 16:45:47 发布

christin7

最新推荐文章于 2022-08-02 16:45:47 发布

阅读量194

点赞数

分类专栏： JavaScript基础学习文章标签： js

本文链接：https://blog.csdn.net/christin7/article/details/106561452

版权

JavaScript基础学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

JavaScript基础学习（1）

JavaScript 基础知识

JavaScript 基础知识

简介

JavaScript 是属于 HTML 和 Web 的编程语言。
这篇笔记涵盖 JavaScript 基础内容和高级教程。

JavaScript 能够改变 HTML 内容
getElementById() 是多个 JavaScript HTML 方法之一。

本例使用该方法来“查找” id=“demo” 的 HTML 元素，并把元素内容（innerHTML）更改为 “Hello JavaScript”：

Example:

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

$[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-0xonv1px-1591286802321)(C:/Users/84388/Desktop/javascript\img\简介.JPG)]$

JavaScript 使用

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

head中的JavaScript

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction() {
    document.getElementById("demo").innerHTML = "段落被更改。";
}
</script>
</head>

<body>

<h1>一张网页</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">试一试</button>

</body>
</html>

body 中的JavaScript

<!DOCTYPE html>
<html>
<body> 

<h1>A Web Page</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">试一试</button>

<script>
function myFunction() {
   document.getElementById("demo").innerHTML = "段落被更改。";
}
</script>

</body>
</html>

外部脚本引入JS

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-r3AhrI73-1591286802323)(img/外部脚本.jpg)]

外部JS的优势

在外部文件中放置脚本有如下优势：

分离了HTML和JS代码
使HTML和JS代码更容易阅读和维护
已缓存的JS代码可以加速网页的加载

外部引用实例

URL 链接至脚本：（一般是模板）
<script src="https://www.w3school.com.cn/js/myScript1.js"></script>

指定目录至脚本：(对于自主编写的JS最为常用)
<script src="/js/myScript1.js"></script>

当前文件夹至脚本：
<script src="myScript1.js"></script>

JavaScript 输出

JavaScript 不提供任何内建的打印或显示函数。

JavaScript 显示方案

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

window.alert()：创建警告框
document.write()：创建HTML输出
innerHTML：创建HTML元素
console.log：写入浏览器控制台

注意事项

出于测试目的，使用 document.write() 比较方便。（在 HTML 文档完全加载后使用 document.write() 将删除所有已有的 HTML，所以 document.write() 方法仅用于测试）

JavaScript 语句

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

JavaScript 语句

JavaScript 语句由以下构成：值、运算符、表达式、关键词和注释。

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

JavaScript 分隔符

分号分隔JavaScript语句

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

(您可能在网上看到不带分号的例子。以分号结束语句不是必需的，但我们仍然强烈建议您这么做。)

JavaScript 空白字符

JavaScript 会忽略多个空格。您可以向脚本添加空格，以增强可读性。
下面这两行是相等的：

var person = "Bill";
var person="Bill";

在运算符旁边（ = + - * / ）添加空格是个好习惯：

var x = y + z;

JavaScript 行长度和折行

为了达到最佳的可读性，程序员们常常喜欢把代码行控制在 80 个字符以内。

JavaScript 代码块

JavaScript 语句可以用花括号（{…}）组合在代码块中。
代码块的作用是定义一同执行的语句。

JavaScript 关键词

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

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