这篇博客总结了JavaScript和TypeScript的基础知识，包括ECMAScript的基本语法与运算符、基本对象如Function、Array、Boolean、Date、Math、RegExp及Global对象。详细介绍了函数语法、DOM操作和BOM中的Window对象。同时，对TypeScript的基础语法，如编译参数、保留关键字、变量声明、运算符、条件语句和函数、类进行了阐述。
目录
ECMAScript
1.基本语法与运算符
1.与HTML结合方式
1.内部JS
*定义一个<Script>，标签体内容就是js代码
2.外部JS
*定义<Script>，通过src属性引入外部的js文件
*注意：写在任意位置都行 hui会影响执行次序，
2.注释
1.单行注释 //
2.多行注释 /* */
3.数据类型
1.原始数据类型(基本数据类型)：
1.number：
2.string：字符串
3.Boolean：
4.null：对象为空的占位符
5.undefined：没有初始化的变量
2.引用数据类型：对象
4.变量
*Java语言是强类型语言，Javascript是弱类型语言
*语法：
5.运算符
1.一元运算符
++，--，+
注意：在js中，如果运算数怒视运算符所要求的类型会强制转换。
*其他类型转number
*string转number：按照字面值转换，如果字面值不是数字，则转成NaN（不是数字的数字）
*boolean转number：true转为1，false转为0
2.算术运算符
4.比较运算符
===（全等于）：比较之前先对比类型，如果不等直接返回false
5.逻辑运算符
&&，||，！
6.三元运算符
? ：
7.特殊语法
1.变量的定义使用关键词var关键词，也可以不使用
*用：定义变量的是局部变量，不用是全局变量（不建议）
6.流程控制语句
switch（变量）：可以接收任意数据类型
while（变量）：
8.练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>九九乘法表</title>
<style>
td{
border: 1px solid;
}
</style>
<script>
document.write("<table align='center'>");
//基本for循环
for(var i=1;i<=9;i++)
{
document.write("<tr>")
for (var j=1;j<=i;j++)
{
document.write("<td>")
document.write(i+"*"+j+"="+(i*j)+" ");
document.write("</td>")
}
}
</script>
</head>
<body>
</body>
</html>
```2.基本对象
1.Function对象：
1.创建
1.var fun = new Function(形式参数列表，方法体）
2.function 方法名称（形式参数列表）{
方法体
}
3.var 方法名=function(形式参数列表){
方法体
}
2.方法
3.属性
length:代表参数的个数
4.特点
1.定义方法是：形参的类型不写。返回值类型也不写
2.方法是一个对象，如果定义名称相同的方法，会重写
3.在JS中，方法的调用只与方法的名称有关，与参数列表无关
4.在方法声明中有一个隐藏的内置对象（数组） arguments,封装所有的实际参数
5.调用
方法名称（实际参数列表）
2.Array对象：
* 1.创建：
1.var arr=new array(元素列表);
2.var arr=new array(默认常数);
3.var arr=new [元素列表];
* 2.方法
1.join() 将数组中的元素按照指定的分隔符拼接成字符串
2.push（）将新元素添加到数组的末尾，并返回新的长度。
* 3.属性
1.长度 length
* 4.特点
1.JS中，数组元素的类型可变
2.JS中，数组长度可变
3.Boolen对象
4.Data对象
Date 日期对象
* 1.创建
* var d = new Date();
* 2.方法
* toLocaleString（）;使用区域设置约定将 Date 对象转换为字符串
* getTime():返回自 1970/01/01 以来的毫秒数：
5.Math对象
1.创建：
* 特点：Math对象不用创建，直接使用MAth.方法名()
2.方法：
*random(),返回0~1之间的随机数,含0不含1
*ceil(x) 对 x 进行上舍入
*floor(x) 对 x 进行下舍入
*round(x) 把 x 四舍五入为最接近的整数
3.属性：
PI
6.RegExp 正则表达式对象
1.正则表达式：定义字符串的组成规则。
1.单个字符:[ ]
*特殊符号代表特殊含义的单个字符
\d :单个数字字符[0~9]
\w :单个单词字符[ a-zA-Z0~9]
2.量词符号：
？:表现出现0次或一次
* :表示出现0次或多次
+ :表示出现一次或多次
{m,n} :表示 m<=数量<=n
*如果m缺省:{ ，n}：最多n次
*如果n缺省:{ m，}：最少m次
3.开始结束符号
* ^:开始
* $:结束
2.正则对象:
1.创建：
const reg = new RegExp("正则表达式");
const reg = /正则表达式/;2.方法：
1.test( ): 通过模式来搜索字符串，然后根据结果返回 true 或 false。
const reg = new RegExp("\\w{6,12}");
const reg2 = /^\w{6,12}$/;
const username="zhangsan";
const flag = reg2.test(username);
alert(flag);8.Global对象
1.特点：全局属性和函数可用于所有内置 JavaScript 对象。
2.方法：
1.encodeURI() 对 URI 进行编码。
2.decodeURI() 解码 URI。
3.decodeURIComponent() 解码 URI 组件。
4.encodeURIComponent() 对 URI 组件进行编码。
5.parseInt() 解析字符串并返回整数
*逐一判断每一给字符是否为数字，直到不是数字为止，将前面的数字转换成number
6.isNaN() 确定值是否是非法数字 如果该值等于 NaN，则此函数返回 true。否则返回 false。
7.eval() 评估字符串并像脚本代码一样执行它。
const str="小菜鸡";
const en =encodeURI(str);
document.write(en+"<br>");//%E5%B0%8F%E8%8F%9C%E9%B8%A1
const s=decodeURI(en);
document.write(s,"<br>");
const str1="小菜鸡";
const en1 =encodeURIComponent(str1);
document.write(en1+"<br>");//%E5%B0%8F%E8%8F%9C%E9%B8%A1
const s1=decodeURIComponent(en1);
document.write(s1,"<br>");
const str2="1234a";
const num=parseInt(str2);
document.write(num+"<br>");
const a=NaN;
document.write(a==NaN);
document.write(isNaN(a)+"<br>");
const jscode="alert(1234)";
eval(jscode);函数语法
JavaScript 函数通过 function 关键词进行定义，其后是函数名和括号 ()。
函数名可包含字母、数字、下划线和美元符号（规则与变量名相同）。
圆括号可包括由逗号分隔的参数
函数调用
函数中的代码将在其他代码调用该函数时执行：
- 当事件发生时（当用户点击按钮时）
- 当 JavaScript 代码调用时
- 自动的（自调用）
函数返回
当 JavaScript 到达 return 语句，函数将停止执行。
如果函数被某条语句调用，JavaScript 将在调用语句之后“返回”执行代码。
函数通常会计算出返回值。这个返回值会返回给调用者
DOM简单学习
*功能：控制html文档的内容
*代码：获取页面标签（元素）对象Element
*document.getElementById("id值");通过元素的id获取元素对象
*操作Element对象：
1.修改属性值：
1.明确获取的对象是哪一个？
2.查看api文档，找其中有哪些属性可以设置
2.修改标签体内容
*属性：innerHTML
1.获取元素
2.标签修改内容
事件简单学习
*功能：某些组件在执行了某些操作后，触发某些代码的执行。
*绑定事件
1.直接在html标签上，指定事件的属性，属性值就是js代码
1.事件：onclik---单击事件
2.通过js获取属性
BOM
1.概念：Browser Object Model 浏览器对象模型
*将浏览器的各个组成部分封装成对象
2.组成：
*Window：窗口对象
*Navigator：浏览器对象
*Screen：显示器屏幕对象
*History：历史记录对象
*Location：地址栏对象
Window：窗口对象
1.创建
2.方法
1.与弹出框有关的方法
alert( ) 显示带有一段消息和一个一个确认按钮的警告框
confirm( ) 显示带有一段消息以及确认按钮和取消按钮的对话框。
*如果用户点击确定按钮，则 confirm() 返回 true。如果点击取消按钮，则 confirm() 返回 false。
prompt( ) 显示可提示用户输入的对话框。
*如果用户单击提示框的取消按钮，则返回 null。如果用户单击确认按钮，则返回输入字段当前显示的文本。
2.与打开关闭浏览器的方法
close() 关闭浏览器窗口。关闭调用的浏览器页面
open() 打开一个新的浏览器窗口或查找一个已命名的窗口。
3.与定时器有关的的方式
setTimeout() 在指定的毫秒数后调用函数或计算表达式。
*参数
JavaScript 代码串或者毫秒数。
**提示：**setTimeout() 只执行 code 一次。如果要多次调用，请使用 setInterval() 或者让 code 自身再次调setTimeout()。
返回值：唯一标识，用于取消定时器
clearTimeout() 取消由 setTimeout() 方法设置的 timeout。
setInterval() 按照指定的周期（以毫秒计）来调用函数或计算表达式。
clearInterval() 取消由 setInterval() 设置的 timeout。
4.特点
*window窗口对象不需要创建可以直接使用 window，window.方法名()
*window引用可省略。方法名();
Typescript
TypeScript是JavaScript类型的超集（当前我们处于ES5），它可以编译成纯JavaScript。
TypeScript给JavaScript加上可选的类型系统，给JavaScript加上静态类型后，就能将调试从运行期提前到编码期，诸如类型检查、越界检查这样的功能才能真正发挥作用。 TypeScript的开发体验远远超过以往纯JavaScript的开发体验，无需运行程序即可修复潜在bug。
基础语法
常用编译参数
tsc 常用编译参数如下表所示：
| 序号 | 编译参数说明 |
|---|---|
| 1. | --help 显示帮助信息 |
| 2. | --module 载入扩展模块 |
| 3. | --target 设置 ECMA 版本 |
| 4. | --declaration 额外生成一个 .d.ts 扩展名的文件。 tsc ts-hw.ts --declaration 以上命令会生成 ts-hw.d.ts、ts-hw.js 两个文件。 |
| 5. | --removeComments 删除文件的注释 |
| 6. | --out 编译多个文件并合并到一个输出的文件 |
| 7. | --sourcemap 生成一个 sourcemap (.map) 文件。 sourcemap 是一个存储源代码与编译代码对应位置映射的信息文件。 |
| 8. | --module noImplicitAny 在表达式和声明上有隐含的 any 类型时报错 |
| 9. | --watch 在监视模式下运行编译器。会监视输出文件，在它们改变时重新编译。 |
TypeScript 保留关键字的
| as | catch | switch | |
| case | if | throw | else |
| var | number | string | get |
| module | type | instanceof | typeof |
| public | private | enum | export |
| finally | for | while | void |
| null | super | this | new |
| in | return | true | false |
| any | extends | static | let |
| package | implements | interface | function |
| do | try | yield | const |
| continue |
提示：typeScript 区分大写和小写字符。
变量声明
变量的命名规则：
-
变量名称可以包含数字和字母。
-
除了下划线 _ 和美元 $ 符号外，不能包含其他特殊字符，包括空格。
-
变量名不能以数字开头。
变量使用前必须先声明，我们可以使用 var 来声明变量。
我们可以使用以下四种方式来声明变量：
声明变量的类型及初始值；
声明变量的类型，但没有初始值，变量值会设置为 undefined；
声明变量并初始值，但不设置类型，该变量可以是任意类型；
声明变量没有设置类型和初始值，类型可以是任意类型，默认初始值为 undefined；
运算符
TypeScript 主要包含以下几种运算：
1.算术运算符
2.逻辑运算符
3.关系运算符
4.按位运算符
5.赋值运算符
6.三元/条件运算符
7.字符串运算符
8.类型运算符
条件语句
if 语句：由一个布尔表达式后跟一个或多个语句组成；
if...else 语句：一个 if 语句后可跟一个可选的 else 语句，else 语句在布尔表达式为 false 时执行。
switch语句：一个 switch 语句允许测试一个变量等于多个值时的情况。每个值称为一个 case，且被测试的变量会对每个 switch case 进行检查。
for 循环： for 循环用于多次执行一个语句序列，简化管理循环变量的代码。
for...in 循环：for...in 语句用于一组值的集合或列表进行迭代输出。
while 循环：while 语句在给定条件为 true 时，重复执行语句或语句组。循环主体执行之前会先测试条件。
TypeScript 函数
函数就是包裹在花括号中的代码块，前面使用了关键词 function。
函数只有通过调用才可以执行函数内的代码。
function test() { // 函数定义
console.log("调用函数")
}
test() // 调用函数TypeScript 类
TypeScript 是面向对象的 JavaScript。
定义类的关键字为 class，后面紧跟类名，类可以包含以下几个模块（类的数据成员）：
-
字段 − 字段是类里面声明的变量。字段表示对象的有关数据。
-
构造函数 − 类实例化时调用，可以为类的对象分配内存。
-
方法 − 方法为对象要执行的操作。
扫一扫
615
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
