前端学习笔记

Web原生（HTML+CSS+JavaScript）

HTML

ctrl + H：查看类的方法的源码

一般标签

<h1></h1>
<h2></h2>
<p></p>
<div></div>

自闭和标签

<hr /> <!--水平分隔线-->
<br /> <!--换行符-->

特殊字符

• 空格： 
• 大于：>
• 小于：<

CSS

div {<!--标签名选择-->

}
.class {<!--属性选择器-->

}
#id {<!--id选择器-->

}
background-color: red; <!--背景颜色-->
<!--Text 文本-->
color: green; <!--文本颜色-->
text-align: center; <!--文本对齐方式-->
text-decoration: none; <!--删除文本下划线-->
<!--list 列表-->
list-style-type: circle; <!--列表项前面的样式-->
list-style-image: url('xxx'); <!--列表项前面的样式（自定义图标）-->
<!--Table 表格-->

JavaScript

基础语法

<script type="text/javascript">
	window.onload = function(){ //页面加载完成后发生的事件

	}
</script>

alert(<info>)：信息提示框

prompt(<info>)：信息输入框

confirm(<info>)：信息确认框

变量

• 变量类型

  var var1 = 123：声明变量时使用var关键字

  var var2 = new Object()

  var var3：声明为定义，值为undefine

  var var4 = null：声明定义为null时，类型为Object

  typeof <var>：获取 <var>变量的类型

  Javascipt中的变量类型：

  • number
  • string
  • boolean
  • function
  • Object
  • undefine

• 运算符

  10 / 0: Inifinity

  10 % 0: NaN

  '1' == 1(true): 当两边数据类型不一样时会先将两端数据类型转换为相同的然后比较

  '1' === 1(false)

JSON

JSON.stringfy(js_obj)：将js对象转换成json字符串

JSON.parse(json_str)：将json字符串转换成js对象

对象

Number

• Number.parseInt(int_str)

函数

function func_name(a, b) {
    return ;
}

js中的函数可以传入不同的类型，而且传入的值也可以和原函数声明的不同，当传入的值数量多余函数声明的时函数只使用前面的几个值，当传入的值数量少于函数声明的时，后面缺省的值即为 undefine

匿名函数：

(function func_name() {
  
})

运算符

• ===：严格等于、!==：严格不等于

• typeof(var)：获取变量var的数据类型

• ||：逻辑或运算符

  var1 || var2 //当var1是Truthy时返回var1，当var1是Falsy时返回var2

• ??：判断变量是否Nullish

  n = n?? var //当n===null || n ===undefine时返回var

• ?.：当前面的变量为Nullish时不执行后面的方法

• ...：展开运算符（作用：可用于复制数组和对象（复制只是浅拷贝），合并数组和对象）

let arr = [1, 2, 3];
let arr2 = [...arr];   //1, 2, 3
let obj = {
    name: 'scy',
    age: 21
};
let obj2 = {...obj};   // name: 'scy', age: 21

事件

• onmouseover, onmousemove, onmouseleave：鼠标事件

• onclick：点击事件

• onchange：值发生修改

  对于 input输入框，onchange是输入框失去焦点后的值是否发生改变

• onfocus

• onblur

BOM编程

window.onload = function() { //给页面的onload加载完成方法绑定事件
  
}

window

• location

  location.href = "website"：跳转到指定的页面

• history

  history.forward()：浏览器下一页

  history.back()：浏览器上一页

  history.go(num)：向前跳转num页

• sessionStorage

• localStorage

DOM编程

document

document.getElementById([id])：id查找器

本地存储

//本地保存（浏览器关闭数据保留）
window.localStorage.setItem(<key>, <value>) //window可以省略
let val = localStorage.getItem(<key>)
localStorage.removeItem(<key>) //删除一个键值对
localStorage.clear() //清除所有键值对

//会话保存（浏览器关闭数据也清除）
sessionStorage.setItem(<key>, <value>)
let val = sessionStorage.getItem(<key>)
sessionStorage.removeItem(<key>) //删除一个键值对
sessionStorage.clear() //清除所有键值对

Nodejs

• fetch-api（获取服务器数据）

{
    "type": "module",
    "devDependencies": {
        "express": "^4.18.1"
    }
}

Typescript

• Javascript为动态类型语言，Typescript为静态类型语言，在创建并编辑 xxx.ts文件之后需要将 xxx.ts文件编译成 xxx.js文件

TS中的变量类型：