JavaScript & TypeScript 学习总结

最新推荐文章于 2022-12-03 22:39:33 发布

狗都不写系列

最新推荐文章于 2022-12-03 22:39:33 发布

阅读量500

点赞数

文章标签： javascript typescript 学习

本文链接：https://blog.youkuaiyun.com/weixin_46631196/article/details/125474226

版权

本文是关于JavaScript和TypeScript的学习总结。JavaScript控制网页行为，包括事件反应、HTML内容操作等，常用方法如alert()、document.getElementById()。TypeScript作为JavaScript的超集，提供了静态类型检查，支持模块、函数、变量等，类型推断和面向对象特性让编程更加严谨。学习过程中发现内容丰富，需要更多时间去深入理解和实践。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

JavaScript

HTML 定义了网页的内容，CSS 描述了网页的布局，而JavaScript 控制了网页的行为。
JavaScript可以称为直接写入 HTML 输出流，而只能在 HTML 输出中使用 document.write，如果HTML在文档加载后使用该方法，会覆盖整个文档。比如运行此代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
	
<p>
JavaScript 能够直接写入 HTML 输出流中：
</p>
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");
</script>
<p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p>
	
</body>
</html>

针对事件的反应，alert() 函数在 JavaScript 中并不常用，但它对于代码测试非常方便。
JavaScript 能够对事件作出反应。比如对按钮的点击：

<button type="button" onclick="alert('欢迎!')">点我!</button>

使用 JavaScript 来处理 HTML 内容是非常强大的功能，她能轻松改变 HTML 元素的内容、改变HTML图像、改变 HTML 元素的样式，同时也被常用于验证用户的输入。
HTML 中的 Javascript 脚本代码必须位于之间的代码行包含了 JavaScript:。
JavaScript 没有任何打印或者输出的函数。这就需要它通过一些手段来输出，使用 window.alert() 弹出警告框，使用 document.write() 方法将内容写到 HTML 文档中，使用 innerHTML 写入到 HTML 元素，使用 console.log() 写入到浏览器的控制台。如果需要从 JavaScript 访问某个 HTML 元素，可以使用 document.getElementById(id) 方法。使用 “id” 属性来标识 HTML 元素，并 innerHTML 来获取或插入元素内容。
采用数组（Array）字面量定义一个数组：

[40, 100, 1, 5, 25, 10]

对象（Object）字面量定义一个对象：

{firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"}

函数（Function）字面量定义一个函数：

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

在编程语言中，变量用于存储数据值。JavaScript 使用关键字 var 来定义变量，使用等号来为变量赋值。

<script>
var x, y, z;
x = 5;
y = 6;
z = (x + y) * 6;
document.getElementById("demo").innerHTML = z;
</script>

输出66.

TypeScript

TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。
TypeScript 程序由模块、函数、变量、语句和表达式以及注释几个部分组成。
TypeScript 会忽略程序中出现的空格、制表符和换行符。空格、制表符通常用来缩进代码，使代码易于阅读和理解.
TypeScript 区分大写和小写字符。另外，在输入完每一行的指令需要换行时，可以使用或不用分号，这里没有强制的规则。
TypeScript支持两种注释：单行注释 ( // ) − 在 // 后面的文字都是注释内容。多行注释 (/* */) − 这种注释可以跨越多行。
TypeScript 变量的命名规则：

变量名称可以包含数字和字母。
  除了下划线 _ 和美元 $ 符号外，不能包含其他特殊字符，包括空格。
  变量名不能以数字开头。
变量使用前必须先声明，我们可以使用 var 来声明变量。

关于类型的推断：当类型没有给出时，TypeScript 编译器利用类型推断来推断类型。如果由于缺乏声明而不能推断出类型，那么它的类型被视作默认的动态 any 类型。
TypeScript运算符与所学的c语言中的运算符基本相同。
函数定义：函数就是包裹在花括号中的代码块，前面使用了关键词 function：
语法格式如下所示：

function function_name()
{
    // 执行代码
}

函数只有通过调用才可以执行函数内的代码。

function_name()

函数返回值：有时，我们会希望函数将执行的结果返回到调用它的地方。通过使用 return 语句就可以实现。在使用 return 语句时，函数会停止执行，并返回指定的值。

// 函数定义
function greet():string { // 返回一个字符串
    return "Hello World" 
} 
 
function caller() { 
    var msg = greet() // 调用 greet() 函数 
    console.log(msg) 
} 
 
// 调用函数
caller()

实例中定义了函数 greet()，返回值的类型为 string。
greet() 函数通过 return 语句返回给调用它的地方，即变量 msg，之后输出该返回值。。
TypeScript 声明数组的语法格式如下所示：

var array_name[:datatype];        //声明 
array_name = [val1,val2,valn..]   //初始化

或者直接在声明时初始化：

var array_name[:datatype] = [val1,val2…valn]

如果数组声明时未设置类型，则会被认为是 any 类型，在初始化时根据第一个元素的类型来推断数组的类型。
TypeScript 支持面向对象的所有特性，比如类、接口等。
TypeScript 类定义方式如下：

class class_name { 
    // 类作用域
}

定义类的关键字为 class，后面紧跟类名，类可以包含以下几个模块（类的数据成员）：

字段 − 字段是类里面声明的变量。字段表示对象的有关数据。

构造函数 − 类实例化时调用，可以为类的对象分配内存。

方法 − 方法为对象要执行的操作。

学习总结

这部分的学习相比之前所学的内容多了不是一丁半点，所学知识太多太多，虽然老师尽量在有限的时间内教会我们更多的知识，但到了这一模块我后续还是渐渐的掉到了车尾。这部分需要我在自己花大量的时间去熟悉去掌握，如果日后想要从事web技术的开发或者前端后端的开发，这更需要我去不断的磨合所学的知识。最后，学无止境，老师的授的课虽结束，但学习永远不要停下脚步。