JavaScript学习总结

李苦

已于 2022-07-09 23:03:27 修改

阅读量1.3k

点赞数 3

文章标签： javascript 学习前端

于 2022-07-08 17:48:30 首次发布

本文链接：https://blog.csdn.net/qq_53069622/article/details/125679828

版权

1.什么是JavaScript

JavaScript（简称 JS，下⽂简称为 JS）是世界上最流⾏的编程语⾔之⼀，它是⼀个脚本语⾔, 通过解释器运⾏，它主要在客户端(浏览器)上运⾏, 现在也可以基于 node.js 在服务器端运⾏。
在这里插入图片描述

1.1 JS、HTML、CSS 关系

在这里插入图片描述

HTML: ⽹⻚的结构(⻣)
CSS: ⽹⻚的表现(⽪)
JS: ⽹⻚的⾏为(魂)

1.2 JS是如何运行的？

JS 通过浏览器可以直接运⾏，JS 通常是包含在 HTML ⻚⾯中的，双击 HTML ⻚⾯就可以直接运⾏。
浏览器中包含了渲染引擎（HTML 渲染引擎和 CSS 渲染引擎）+ JS 执⾏引擎。
JS 引擎也叫做 JS 解释器，典型的就是 Chrome 中内置的 V8 引擎。
JS 引擎逐⾏读取 JS 代码内容, 然后解析成⼆进制指令, 再执⾏。

2.JS用法

HTML 中的 Javascript 脚本代码必须位于标签之间。
Javascript 脚本代码可被放置在 HTML 页面的和部分中。

2.1< script > 标签

如需在 HTML 页面中插入 JavaScript，请使用

< script > 和 < /script > 之间的代码行包含了 JavaScript:
代码如下（示例）：

<script>
alert("我的第一个 JavaScript");
</script>

2.2< body > 中的 JavaScript

在本例中，JavaScript 会在页面加载时向 HTML 的 < body > 写文本：

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

2.3< head > 中的 JavaScript

函数在本例中，我们把一个 JavaScript 函数放置到 HTML 页面的部分。

该函数会在点击按钮时被调用：

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</head>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">尝试一下</button>
</body>
</html>

2.4外部的 JavaScript

也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。

外部 JavaScript 文件的文件扩展名是 .js。

如需使用外部文件，请在

<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>

你可以将脚本放置于 < head > 或者 < body >中，放在 < script > 标签中的脚本与外部引用的脚本运行效果完全一致。

myScript.js 文件代码如下：

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

注意：lamp 外部脚本不能包含 < script > 标签。

3.JS书写格式

JS 有 3 种书写格式：

⾏内格式
内嵌格式
外部格式

3.1行内格式

直接嵌⼊到 html 元素内部
在这里插入图片描述
页面结果：

注意： JS 中字符串常量可以使⽤单引号表示, 也可以使⽤双引号表示。

3.2内嵌格式

写到 script 标签中

在这里插入图片描述
套用方法：

3.3外部格式

写到单独的 .js ⽂件中。

使用步骤：先引入js，再使用js。
在这里插入图片描述
注意, 这种情况下 script 标签中间不能写代码.，必须空着(写了代码也不会执⾏)，适合代码多的情况。

3.4注释

指的是在script标签中的注释，与java中的注释方法一致。使用ctrl+/快速注释或取消注释。
在这里插入图片描述

3.5消息打印

弹出输⼊框：

alert("hello");

弹出选择框：

confirm("确认删除？");

输出信息到控制台：

console.log("这是⼀条⽇志");

重要概念: ⽇志是程序员调试程序的重要⼿段

在这里插入图片描述

4.JS基础语法

4.1变量

变量是用于存储信息的"容器"。

var x=5;
var y=6;
var z=x+y;

与代数一样，JavaScript 变量可用于存放值（比如 x=5）和表达式（比如 z=x+y）。

变量可以使用短名称（比如 x 和 y），也可以使用描述性更好的名称（比如 age, sum, totalvolume）。

变量必须以字母开头
变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
变量名称对大小写敏感（y 和 Y 是不同的变量）

4.2数据类型

JavaScript 变量还能保存其他数据类型，比如文本值 (name=“Bill Gates”)。

在 JavaScript 中，类似 “Bill Gates” 这样一条文本被称为字符串。

JavaScript 变量有很多种类型，但是现在，我们只关注数字和字符串。

当您向变量分配文本值时，应该用双引号或单引号包围这个值。

当您向变量赋的值是数值时，不要使用引号。如果您用引号包围数值，该值会被作为文本来处理。

var pi=3.14;  
// 如果你熟悉 ES6，pi 可以使用 const 关键字，表示一个常量
// const pi = 3.14;
var person="John Doe";
var answer='Yes I am!';

运行结果：
在这里插入图片描述

4.3条件语句

通常在写代码时，您总是需要为不同的决定来执行不同的动作。您可以在代码中使用条件语句来完成该任务。

在 JavaScript 中，我们可使用以下条件语句：

if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
if…else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
if…else if…else 语句- 使用该语句来选择多个代码块之一来执行
switch 语句 - 使用该语句来选择多个代码块之一来执行

if 语句

if (condition)
{
    当条件为 true 时执行的代码
}

if…else 语句

if (condition)
{
    当条件为 true 时执行的代码
}
else
{
    当条件不为 true 时执行的代码
}

4.4Switch语句

switch(n)
{
    case 1:
        执行代码块 1
        break;
    case 2:
        执行代码块 2
        break;
    default:
        与 case 1 和 case 2 不同时执行的代码
}

请使用 default 关键词来规定匹配不存在时做的事情

4.5循环语句

JavaScript 支持不同类型的循环：

for - 循环代码块一定的次数
for/in - 循环遍历对象的属性
while - 当指定的条件为 true 时循环指定的代码块
do/while - 同样当指定的条件为 true 时循环指定的代码块
For 循环

for (语句 1; 语句 2; 语句 3)
{
    被执行的代码块
}

while 循环

while (条件)
{
    需要执行的代码
}

do/while 循环

do
{
    需要执行的代码
}
while (条件);

5.JS HTML DOM

通过 HTML DOM，可访问 JavaScript HTML 文档的所有元素。
查找 HTML 元素
通常，通过 JavaScript，您需要操作 HTML 元素。

为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：

通过 id 找到 HTML 元素
通过标签名找到 HTML 元素
通过类名找到 HTML 元素

通过 id 查找 HTML 元素

在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。

本例查找 id=“intro” 元素：

var x=document.getElementById("intro");

通过标签名查找 HTML 元素
本例查找 id=“main” 的元素，然后查找 id=“main” 元素中的所有 < p > 元素：

var x=document.getElementById("main");
var y=x.getElementsByTagName("p");

通过类名找到 HTML 元素

本例通过 getElementsByClassName 函数来查找 class=“intro” 的元素：

var x=document.getElementsByClassName("intro");

5.1改变 HTML

改变 HTML 输出流
JavaScript 能够创建动态的 HTML 内容：

今天的日期是： Fri Jul 08 2022 17:13:09 GMT+0800 (中国标准时间)

在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。

<!DOCTYPE html>
<html>
<body>

<script>
document.write(Date());
</script>

</body>
</html>

注意：绝对不要在文档(DOM)加载完成之后使用 document.write()。这会覆盖该文档。
改变HTML内容
修改 HTML 内容的最简单的方法是使用 innerHTML 属性。

如需改变 HTML 元素的内容，请使用这个语法：

document.getElementById(id).innerHTML=新的 HTML

本例改变了 < p >元素的内容：

<html>
<body>

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML="新文本!";
</script>

</body>
</html>

本例改变了

元素的内容：

<!DOCTYPE html>
<html>
<body>

<h1 id="header">Old Header</h1>

<script>
var element=document.getElementById("header");
element.innerHTML="新标题";
</script>

</body>
</html>

实例讲解：

上面的 HTML 文档含有 id=“header” 的
元素
我们使用 HTML DOM 来获得 id=“header” 的元素
JavaScript 更改此元素的内容 (innerHTML)
改变HTML属性
如需改变 HTML 元素的属性，请使用这个语法：

document.getElementById(id).attribute=新属性值
本例改变了 < img > 元素的 src 属性：

<!DOCTYPE html>
<html>
<body>

<img id="image" src="smiley.gif">

<script>
document.getElementById("image").src="landscape.jpg";
</script>

</body>
</html>

实例讲解：

上面的 HTML 文档含有 id=“image” 的元素
我们使用 HTML DOM 来获得 id=“image” 的元素
JavaScript 更改此元素的属性（把 “smiley.gif” 改为 “landscape.jpg”）

5.2改变CSS

改变html样式
如需改变 HTML 元素的样式，请使用这个语法：

document.getElementById(id).style.property=新样式
下面的例子会改变 < p > 元素的样式：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
 
<p id="p1">Hello World!</p>
<p id="p2">Hello World!</p>
<script>
document.getElementById("p2").style.color="blue";
document.getElementById("p2").style.fontFamily="Arial";
document.getElementById("p2").style.fontSize="larger";
</script>
<p>以上段落通过脚本修改。</p>
 
</body>
</html>

5.3事件

HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。
对事件做出反应
我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。

如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码：

οnclick=JavaScript
HTML 事件的例子：

当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML 表单时
当用户触发按键时

在本例中，当用户在 < h1 > 元素上点击时，会改变其内容：

<!DOCTYPE html>
<html>
<body>
<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>
</body>
</html>

使用 HTML DOM 来分配事件
HTML DOM 允许您使用 JavaScript 来向 HTML 元素分配事件：

向 button 元素分配 onclick 事件：

<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
</script>

在上面的例子中，名为 displayDate 的函数被分配给 id=“myBtn” 的 HTML 元素。

按钮点击时Javascript函数将会被执行。

6.JS函数

JavaScript 使用关键字 function 定义函数。

函数可以通过声明定义，也可以是一个表达式。

6.1函数声明

在之前的教程中，你已经了解了函数声明的语法 :

function functionName(parameters) {
  执行的代码
}

函数声明后不会立即执行，会在我们需要的时候调用到。

function myFunction(a, b) {
    return a * b;
}

6.2函数表达式

JavaScript 函数可以通过一个表达式定义。

函数表达式可以存储在变量中：

var x = function (a, b) {return a * b};

在函数表达式存储在变量后，变量也可作为一个函数使用：

var x = function (a, b) {return a * b};
var z = x(4, 3);

以上函数实际上是一个匿名函数 (函数没有名称)。

函数存储在变量中，不需要函数名称，通常通过变量名来调用。

6.3函数是对象

在 JavaScript 中使用 typeof 操作符判断函数类型将返回 “function” 。

但是JavaScript 函数描述为一个对象更加准确。

JavaScript 函数有属性和方法。

arguments.length 属性返回函数调用过程接收到的参数个数：

function myFunction(a, b) {
    return arguments.length;
}

toString() 方法将函数作为一个字符串返回:

function myFunction(a, b) {
    return a * b;
}

var txt = myFunction.toString();

6.5箭头函数

ES6 新增了箭头函数。

箭头函数表达式的语法比普通函数表达式更简洁。

(参数1, 参数2, …, 参数N) => { 函数声明 }

(参数1, 参数2, …, 参数N) => 表达式(单一)
// 相当于：(参数1, 参数2, …, 参数N) =>{ return 表达式; }

当只有一个参数时，圆括号是可选的：

(单一参数) => {函数声明}
单一参数 => {函数声明}

没有参数的函数应该写成一对圆括号:

() => {函数声明}

// ES5
var x = function(x, y) {
     return x * y;
}
 
// ES6
const x = (x, y) => x * y;

有的箭头函数都没有自己的 this。不适合定义一个对象的方法。

当我们使用箭头函数的时候，箭头函数会默认帮我们绑定外层 this 的值，所以在箭头函数中 this 的值和外层的 this 是一样的。

箭头函数是不能提升的，所以需要在使用之前定义。

使用 const 比使用 var 更安全，因为函数表达式始终是一个常量。

如果函数部分只是一个语句，则可以省略 return 关键字和大括号 {}，这样做是一个比较好的习惯:

const x = (x, y) => { return x * y };

注意：IE11 及更早 IE 版本不支持箭头函数。

李苦

关注

3
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习总结

JavaScript学习总结
复制链接

扫一扫