JavaScript and typescript学习总结

最新推荐文章于 2024-07-12 22:54:26 发布

Anastasia

最新推荐文章于 2024-07-12 22:54:26 发布

阅读量76

点赞数

文章标签： javascript typescript 学习

本文链接：https://blog.csdn.net/weixin_52467087/article/details/125655275

版权

本文详细总结了JavaScript和TypeScript的学习要点。JavaScript作为互联网上最流行的脚本语言，适用于HTML和web，广泛应用于服务器、PC等多个平台。文章介绍了JavaScript的基本概念、用法、语法、对象和函数等内容，强调了其在HTML中的应用和输出数据的方式。同时，文章还探讨了TypeScript，它是JavaScript的超集，支持静态类型和未来ES规范，提高开发效率和代码质量。重点讲解了TypeScript中的let、const、解构、函数、类、继承和模块管理等概念。

摘要由CSDN通过智能技术生成

JavaScipt总结

JavaScript 简介

JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备

JavaScript 是脚本语言

JavaScript 是一种轻量级的编程语言。

JavaScript 是可插入 HTML 页面的编程代码。

JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JavaScript 很容易学习。
##JavaScript 用法
HTML 中的 Javascript 脚本代码必须位于 <script>与 </script>标签之间。

Javascript 脚本代码可被放置在 HTML 页面的 <body>和 <head>部分中。

`<script>`标签

如需在 HTML 页面中插入 JavaScript，请使用 <script>标签。

<script>和 </script> 会告诉 JavaScript 在何处开始和结束。

<script>和 </script> 之间的代码行包含了 JavaScript:

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

`<body>`中的 JavaScript

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

JavaScript 函数和事件

上面例子中的 JavaScript 语句，会在页面加载时执行。

通常，我们需要在某个事件发生时执行代码，比如当用户点击按钮时。

如果我们把 JavaScript 代码放入函数中，就可以在事件发生时调用该函数。

您将在稍后的章节学到更多有关 JavaScript 函数和事件的知识。

在 `<head>`或者 `<body>` 的JavaScript

您可以在 HTML 文档中放入不限数量的脚本。

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

通常的做法是把函数放入 <head>部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。

`<head>` 中的 JavaScript 函数

<!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>

`<body>`中的 JavaScript 函数

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

外部的 JavaScript

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

JavaScript 输出

JavaScript 没有任何打印或者输出的函数
###JavaScript 显示数据
JavaScript 可以通过不同的方式来输出数据：

使用 window.alert() 弹出警告框。
使用 document.write() 方法将内容写到 HTML 文档中。
使用 innerHTML 写入到 HTML 元素。
使用 console.log() 写入到浏览器的控制台。

操作 HTML 元素

如需从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法。

请使用 “id” 属性来标识 HTML 元素，并 innerHTML 来获取或插入元素内容

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个 Web 页面</h1>

<p id="demo">我的第一个段落</p>

<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>

</body>
</html>

写到 HTML 文档

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个 Web 页面</h1>

<p>我的第一个段落。</p>

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

</body>
</html>

写到控制台

可以使用 console.log() 方法在浏览器中显示 JavaScript 值

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个 Web 页面</h1>

<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

</body>
</html>

JavaScript 语法

JavaScript 是一个程序语言。语法规则定义了语言结构

JavaScript 语法

JavaScript 是一个脚本语言。

它是一个轻量级，但功能强大的编程语言。

JavaScript 字面量

在编程语言中，一般固定值称为字面量，如 3.14。

数字（Number）字面量可以是整数或者是小数，或者是科学计数(e)。
###JavaScript 变量
在编程语言中，变量用于存储数据值。

JavaScript 使用关键字 var 来定义变量，使用等号来为变量赋值：
var x, length

x = 5

length = 6

JavaScript 操作符

JavaScript使用算术运算符来计算值:

(5 + 6) * 10
JavaScript使用赋值运算符给变量赋值：
x = 5
y = 6
z = (x + y) * 10

JavaScript 语句

在 HTML 中，JavaScript 语句向浏览器发出的命令。

语句是用分号分隔：

x = 5 + 6;
y = x * 10;

JavaScript 关键字

JavaScript 关键字用于标识要执行的操作。

和其他任何编程语言一样，JavaScript 保留了一些关键字为自己所用。

var 关键字告诉浏览器创建一个新的变量：
var x = 5 + 6;
var y = x *

最低0.47元/天解锁文章

Anastasia

关注

0
点赞
踩
0

收藏

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

学习总结
复制链接

扫一扫

JavaScript and typescript学习总结

JavaScipt总结

JavaScript 简介

JavaScript 是脚本语言

<script>标签

<body>中的 JavaScript

JavaScript 函数和事件

在 <head>或者 <body> 的JavaScript

<head> 中的 JavaScript 函数

<body>中的 JavaScript 函数

外部的 JavaScript

JavaScript 输出

操作 HTML 元素

写到 HTML 文档

写到控制台

JavaScript 语法

JavaScript 语法

JavaScript 字面量

JavaScript 操作符

JavaScript 语句

JavaScript 关键字

“相关推荐”对你有帮助么？

`<script>`标签

`<body>`中的 JavaScript

在 `<head>`或者 `<body>` 的JavaScript

`<head>` 中的 JavaScript 函数

`<body>`中的 JavaScript 函数