JS基础

发布于 2021-08-31  270 次阅读


js的输出方式

alert()     警告框

document.write()    在页面上输出

console.log()   在控制台输出

JS基础语法

基本数据类型

number  数字类型

undefined   未定义类型,值和数据类型一致的基本数据类型

string  字符串类型,单引号里面的一句话,没有任何意义

function    函数类型

boolean 布尔类型,只有两个值:true,false

object  对象类型

JS声明变量的方式

var

let

    1. 和var比起来,作用域不同,或者说,当代码块执行完毕之后,let声明的变量就会直接消失
 
    2. let不允许变量提升,var可以

const

    1. const声明的是常量而不是变量。这条规则只对值类型有效,对引用类型无效

基本数据类型的计算

如果计算出现错误,那么会提示,值为NaN = Not a Number

+   加法运算

    数字类型+undefined类型 = NaN

    函数类型+数字类型 = 字符串(把函数和数字进行拼接)

    布尔类型+数字类型   true = 1  false = 0

    字符串类型和任何基本数据类型相加,都会把它传化成字符串,并且拼接起来

  - 减法

    * 乘法

/   除法

%   取余/求模

++  自增运算

    a++ 是先进行赋值运算,然后a+1
 
    ++a 是先+1,在进行赋值运算

--  自减运算

==  等于,数据类型可以不同,但是值相同

=== 全等于,值和数据类型都相同

JS流程控制

判断

if...else   判断

    if(判断条件)   一条执行代码
 
    if(判断条件){
 
        执行代码块
 
    }

三元运算符/三目运算符

    判断条件 ? 真的值 : 假的值

switch...case

    switch(变量){
        case '变量可能的值1':
            执行代码
            break;
        case '变量可能的值2':
            执行代码
            break;
    }

循环

for(初始化变量;判断条件;自增自减){
循环体
}

函数

声明函数

function 函数名称(){
函数内容
}

匿名函数

var 变量(函数名称) = function(){
函数内容
}

回调函数

把整个函数当做参数传递,就叫做回调

函数的返回值

函数的返回值就是函数的执行结果

根据函数是否有返回值可以把函数分成直接过程函数和执行结果函数

无论什么情况,函数一旦执行到return,就会立即停止

递归函数

自己调用自己的函数就叫做递归函数

// 用递归 来求 5 的阶乘
// n! = n * (n-1)!

// 定义一个函数,用于求 n 的阶乘
function func(n)
{
if (n == 1)
{
return 1;
}

    // func(n-1) 因为传递的参数是 n-1,那么就是求 (n-1) 的阶乘
    return n * func(n-1);
}
console.log(     func(5)   );

自执行函数

自执行函数就是当它被定义出来,就会自动执行的函数。不需要调用,传参也很方便

    (function aaa(a,b){
    return sum=a+b
    }) (1,2)

对象

声明对象/实例化对象

通过字面量实例化对象:

var a = {}

通过构造函数实例化对象:

var a = new Object()

内置对象

Math对象

Math.random()   随机数,0-1之间的12位小数

Math.floor()    向下取整

Math.ceil()     向上取整

Math.max()      获取最大值

Math.round()    四舍五入

Date对象

getDate函数:      返回日期的“日”部分,值为1~31。
getDay函数:       返回星期,值为0~6,0表示星期日。
getHours函数:      返回日期的“小时”部分,值为0~23。
getMinutes函数:      返回日期的“分钟”部分,值为0~59。
getMonth函数:      返回日期的“月”部分,值为0~11。
getSeconds函数:     返回日期的“秒”部分,值为0~59。
getTime函数:      返回系统时间。
getTimezoneOffset函数: 返回此地区的时差(当地时间与GMT格林威治标准时间的地区时差),单位为分钟。
getYear函数:      返回日期的“年”部分。返回值以1900年为基数,如1999年为99。
parse函数:       返回从1970年1月1日零时整算起的毫秒数(当地时间)
setDate函数:      设定日期的“日”部分,值为0~31。
setHours函数:       设定日期的“小时”部分,值为0~23。
setMinutes函数:      设定日期的“分钟”部分,值为0~59。
setMonth函数:       设定日期的“月”部分,值为0~11。其中0表示1月,...,11表示12月。
setSeconds函数:     设定日期的“秒”部分,值为0~59。
setTime函数:      设定时间。时间数值为1970年1月1日零时整算起的毫秒数。
setYear函数:      设定日期的“年”部分。
toGMTString函数:    转换日期成为字符串,为GMT格林威治标准时间。
setLocaleString函数:     转换日期成为字符串,为当地时间。
UTC函数:          返回从1970年1月1日零时整算起的毫秒数(GMT)。

String对象

charAt()          返回指定索引的位置的字符
indexOf()           从前向后检索字符串,看是否含有指定字符串
lastIndexOf()        从后向前检索字符串,看是否含有指定字符串
concat()          连接两个或多个字符串
被拼接的字符串本身不会改变,需要接受concat的返回值才行。
如果是多个字符串拼接,可以直接在参数中进行传递
match()             使用正则表达式模式对字符串执行查找,并将包含查找结果最为结果返回
replace()         替换一个与正则表达式匹配的子串
需要接受replace的返回值
一般情况下,在评论或者实时聊天中需要用到的比较多
search()          检索字符串中与正则表达式匹配的子串。如果没有找到匹配,则返回 -1。
slice(start,end)     根据下表截取子串
截取字符串之后,原来的字符串不会发生改变
两个参数分别是开始位置和结束位置,可以使用负数,负数是从后向前算起
substring(start,end)   根据下表截取子串
split()            根据指定分隔符将字符串分割成多个子串,并返回素组
参数是一个字符串,会按照参数传递的字符串把需要切个的字符串切割为若干个数组
substr(start,length)    根据长度截取字符串
toUpperCase()       返回一个字符串,该字符串中的所有字母都被转化为大写字母。
toLowerCase()       返回一个字符串,该字符串中的所有字母都被转化为小写字母。

数组对象

concat()     表示把几个数组合并成一个数组
join()       设置分隔符连接数组元素为一个字符串
pop()       移除数组最后一个元素
shift()      移除数组中第一个元素
slice(start,end)  返回数组中的一段
splice()      可以用来删除,可以用来插入,也可以用来替换
push()        往数组中新添加一个元素,返回最新长度
sort()       对数组进行排序
reverse()    反转数组的顺序
toLocaleString()   把数组转换为本地字符串
array对象属性:
length        表示取得当前数组长度 (常用)
constructor     引用数组对象的构造函数
prototype     通过增加属性和方法扩展数组定义

Global对象

全局属性和函数,可用于所有内建的JavaScript对象
escape()     对字符串编码
eval()       把字符串解析为JavaScript代码并执行
isNaN()      判断一个值是否是NaN
parseInt()      解析一个字符串并返回一个整数
parseFloat()     解析一个字符串并返回一个浮点数
number()     把对象的值转换为数字
string()     把对象的值转换为字符串

正则表达式对象

元字符
\d  代表所有数字

\D  代表所有非数字

\s  代表所有空字符(空格,换行,回车)

\S  代表所有的非空字符
方括号
[abc]   代表的是字符串中含有a或者b或者c

    如果字母过多,可以缩写成[a-z]
 
    同理:[0-9]  [A-Z]

(130|188|189) 代表130或者188或者189中的一个
量词
^n  以n为开头

n$  以n为结尾

m{n} 有n个m

m{n,} 至少有n个m
修饰符
m   执行多行匹配

i   忽略大小写

g   全局匹配

AJAX对象

实例化ajax对象   XMLHttpRequest对象

readyState  如果这个值等于4,那么说明,整个前后台交互的逻辑没有问题

responseText    服务器返回给你的数据

status  服务器状态码,由服务器返回给你

    200 请求成功,没有问题
    404 地址有问题,资源没找到
    500-505 说明服务器问题
    304 说明和上次的请求没有任何区别
onreadystatechange  如果readyState发生改变,那么都会触发该事件

    onreadystatechange = function(){
        console.log(readyState发生改变了);
    }

open(请求方式,请求地址,是否是异步)  准备发送请求

    请求方式:GET/POST,请求方式和后台要符合。
    请求地址:所谓的url地址。如果这里地址写错了,那么就会出现404
    是否异步:目前全选是
send    发送请求

DOM

DOM (Document Object Model) 译为文档对象模型,是 HTML 和 XML 文档的编程接口。
HTML DOM 定义了访问和操作 HTML 文档的标准方法。
DOM 以树结构表达 HTML 文档。

 DOM

Node 节点

获取页面中的节点
getElementById()    通过id获取页面节点

getElementsByTagName()  通过标签名称获取页面节点

getElementsByClassName()    通过class名称获取页面节点

getElementsByName()     通过name获取页面节点
节点的属性
innerHTML     设置或者获取节点内部的内容

innerText     设置或者获取节点内部的文字

parentNode    获取节点的父节点

childNodes    获取节点的子节点

attributes    获取节点的属性节点  只能获取,不能修改
节点操作方法
appendChild()   把某个节点插入另一个节点内

removeChild()   删除子节点

insertBefore(要插入的节点,要插在谁前面)  在指定的子节点之前插入一个节点

createElement() 创建属性节点

事件

onclick 单击事件

ondblclick  双击事件

onmousedown 鼠标按下事件

onmouseup   鼠标抬起事件

onmousemove 鼠标移动事件

    鼠标的坐标是e.clientX和e.clientY

onkeydown   当键盘按下的时候

onkeyup     当键盘抬起的时候

onfocus     获取焦点

onblur      失去焦点

onchange    当value改变的时候

onload      当加载完毕之后

onmouseover 鼠标移入的时候触发该事件

onmouseout  鼠标移出的时候触发该事件

onmouseenter    鼠标移入

onmouseleave    鼠标移出

总结

js非常非常重要,虽然现在的框架很多,用框架开发也会很方便,但是不可否认的是,原生js是这些框架的底层,学好js,对以后开发和使用框架都有很大的帮助,此外js的算法也是个重点亦是难点,可以在闲暇时刻多刷一刷leetcode,算法学好对找工作会有很大对帮助的

仿写英雄联盟首页(半成品)

笔者由于时间有限只仿写了一部分 项目地址