js最基础教程

JavaScript（ECMAScript）

javascript是一门脚本语言

遵从ECMAScript规范

客户端JS：运行在自己的电脑上

服务端：node.js，运行于操作系统层面

浏览器中审查元素中console可以用来编写；

用VScode来编写前端代码

扩展包中live server（实时看到结果）， prettier（格式化） 来编写

保存时即格式化 （ctrl+shift+p） ->输入settings->UI->输入formatsave（✔）

若要符号更改：http://github.com/tonsky/FiraCode打开ttf全部安装-> 打开settings

->Font Family(Fira Code)->ctrl+shift+p输入font ligature->Edit in settings.json

->加上一行editor.fontLigature:true,

(以上不是必要的)

新建html文件：输入！，按下tab键可以自动补全，右键Open with Live Server可以自动运行浏览器

打开浏览器后，右击inspect可以查看js文件

js基本语法

js为弱类型语言，没有编译阶段，一个变量可以随意赋值，若没有手动赋值，则系统默认赋值undefined

根据浏览器中f12中 查看器，控制台，网络进行调试（firefox 浏览器）

数据类型 var , 变量必须定义

var 变量名 = 值

可以一行中初始化+赋值

变量名：第一个单词小写，后面的大写

常量定义

const 变量名 = 值 OR const 变量名 = 函数方式

标识符和关键字

标识符：字母，数字，$,下划线，不能使用关键字做标识符，不能以数字开头

关键字：。。。

数据类型

boolean ： var 变量名 = true OR False

number：var 数字 = 变量名（整数，浮点数）包括（NaN—(Not a number) 结果本该是一个数字，但是运算过程导致他不是一个数字是出现， Infinity-无穷大）

string ：var 变量名 = ” “ , 可以是单引号，也可以是双引号。

定义

var x = "123";
var x1 = new String("abc");//内置类，为object子类
s.length // 获取长度
//具体类型参考帮助文档

substr与substring区别

undefined： var 变量名 = undefined，变量未定义为undefined

null： var 变量名 = null

引用类型：object及object的子类

prototype属性（常用，给类动态扩展属性和函数,所有都可以扩展）

JS定义类

//定义类,两种方式
function 类名(形参){
    
}

类名 = function(形参){
    
}

//创建对象的语法
new 构造方法名(实参)；//构造方法名和类名一致

function sayhello()
{
    
}

sayhello();//这种方式就是当作普通函数

//这种方式表示把sayhello当作一个类创建对象
var obj = new sayhello();//obj是一个引用，保存内存地址指向堆中的地址

类的定义和构造函数定义

function user(a,b,c)
{
    this.sno = a;
    this.sname = b;
    this.sage = c;
}

var u1 = new user(1,"son",20);
//访问
u1.sno  OR   u1["sno"]


//常用匿名函数

Emp = function(ename,salary)
{
    this.ename = ename;
    this.salary = salary;
    this.getSalary = function()//函数
    {
        return this.price;
    }
}

var e1 = new Emp("smith",800);

//动态扩展
Emp.prototype.getEname()
{
    return this.ename;
}

var pname = e1.getEname();//调用

有一个新的类型symbol

typeof

变量名 可以查看变量数据类型，结果为上面6个小写的字符串之一

console.log(变量) 可以打印

类型转换与函数

number+string number会转换为string类型

parselnt():字符串转换为整数

parseFloat():字符串转换为小数

isNan(数据) 结果为true表示不是一个数字，为false表示是一个数字。

math.ceil(数字) 向上取整

Boolean(数据)将非布尔类型转化为布尔类型

注释：

// : 当行注释

/* 内容 */多行注释

/**

*内容

*内容

*/ 文档注释，之后可分离出来生成文档注释

赋值操作符：=

一元操作符

-：负数

+：+在字符串前面，转换括号内字符串为数字

++， --：同C语言

算术操作符

+, -, *, /,%

**（指数）

比较操作符

== ： 两边值转换为同一类型后

===： 值和类型都相同

逻辑操作符

&&, ||, ! : 同C,有短路特性

数字变为真假值

4-> true, !4->false

位运算：同C

三目运算符

条件： 真 ？ 假

void运算符

既保留住超链接的样式，同时用户点击该超链接的时候执行一段JS代码，但页面不能跳转

<a herf = "javascript：void(0)”  oncilick = "window.alert("hello")></a>

原理：执行表达式，但不返回任何结果

void()小括号中必须有表达式

前面的javascript不能省略

语句块

let创建的变量与const创建的常量只能在语句块中访问

var创建的变量可以在任何地方访问

分支语句

与C语言相同（if，else if ，else）

switch case 也与C语言相同

switch(a){
    case 1:
        alert("aaa");
        break;
    default:
        alert("bbb");
        break;
}

循环语句

while循环，do-while循环，for循环。

break终止循环，continue跳过此次循环

函数

不需要指定返回值类型

function 函数名(形参){
    函数体
}

函数名 = function (形参){
    函数体
}

function Puttt(sth)
{
    console.log("ba"+sth);
}
Puttt("aa");

与C相同， 不用形参类型，可以有返回值

调用时不用数据类型,若没赋值则系统默认传入undefined

调用时传递的参数没规定个数

将函数名赋给一个变量

var mutiply = function multi(a,b)
{
    return a*b;
}

console.log(mutiply(2,6)); //返回12

multi可以去掉，为匿名函数。不影响操作结果

函数先调用在定义

函数默认值：

有默认值的时候，调用函数时不用给形参

若有多个参数，想用默认值的地方用undefined代替

递归

与C相同

arguments

用户传进多个参数，相当于不断传进数组中的每一个元素

function log()
{
    for(let i = 0;i < arguments.length();i++)
        {
            console.log(arguments[i]);
        }
}

log("abc","efg");//能打印出abc与efg

函数的重载

方法名或者函数名一样，形参不同（个数，类型，顺序）

若两个函数同名，后面的函数会覆盖前面的

作用域

局部变量只在局部有效，若局部与全局名字相同，局部可以覆盖全局的。

当一个变量定义时没用var关键字，则变量为全局变量

var let

var和let都是定义全局与局部变量时作用域相同，

{}中定义的var出了大括号可以访问，let出了大括号不能访问

箭头函数

var gre = (name,weather) =>{	
	console.log("he" + name + "o" + weather);
}

var increament = x => x+1;

箭头函数为匿名函数

返回函数的函数

function squaresum(a,b)
{
    function square(x){
        return x * x;
    }
    return square(a)+square(b);
}

闭包

外部函数返回内部函数的函数名（外界只能访问他的值，而不能修改他的值）

柯里化curry

变量一个个输入，固定前几个变量的值，更改最后一个变量的值

自执行函数

外部访问不到内部，防止数据被篡改，防止冲突

回调函数

cb()

一段函数作为另一个函数的参数调用

自己把这个函数代码写出来了，但是这个函数不是自己负责调用，有其他程序负责调用该函数

数组

可放不同数据类型

var arr = [];

var arr2 = new Array()一个数为长度，多个数为元素

自动扩容

遍历数组

for(var i = 0;i < arr.length;i++){
    alert(arr[i]);
}

for(var i in arr){
    alert(arr[i]);
}

for in 遍历对象

User= function(username,password)
{
    this.username = username;
    this.password = password;
}

user1 = new User("lili","123");

for(var u in user1){
    alert(u) // u是属性名,string变量名
    alert(user1["u"]);
}

join(’’) 将数组中元素取出来用” “中东西连接

push() 末尾添加一个元素

pop()弹出一个元素

reverse()反转

js中数组模拟栈的数据结构

js介绍

Js是事件驱动型语言，依靠事件去驱动，然后执行对应的程序。

页面打开的时候，js代码并不会执行，只会把js代码注册到按钮的事件上，事件发生后，js代码会被浏览器自动调用。

js在html中嵌入的三种方式

第一种方式

<body>
    <!--
		1.要实现的功能，用户点击按钮，弹出消息框
		2.有一个事件叫做单击：click。对应的事件句柄为：onclick。事件句柄是事件单词前加上on，事件句柄是以html标签属性存在的。
	-->
    <input type = "button" value = "hello" onclick = "window.alert('hello')"/>
</body>

js字符串可以使用双引号，也可以使用单引号。

window.alert("消息") 可以弹出消息框，window.可以省略不写,会阻塞html页面

js语句结束可以使用分号，也可以不使用。

第二种方式（脚本块的方式）

<body>
    <script type = "text/javascript">
        window.alert("hello")
    </script>
</body>

暴露在脚本块当中的程序，在页面打开的时候执行，并且遵循自上而下，并且遵循自上而下的顺序执行，代码的执行事件为打开浏览器。

js脚本块在一个页面中可以多次出现，位置是随意的。

第三种方式(js文件)

<body>
    <script type = "text/javascript" src = "js1.js"></script>
</body>

window.alert("hello")//js1.js

引入外部的文件，js文件会自上而下执行

必须有结束标签

引入js文件中中代码块内容不会执行

JS事件

（1）blur 失去焦点

（2）focus 获得焦点

（3）click 鼠标单击

（4）dblclick 鼠标双击

（5）change 下拉列表中项改变，或文本框内容改变

（6）keydown 键盘按下

（7）keyup 键盘弹起

（8）load 页面加载完毕★

（9）mousedown 鼠标按下

（10）mouseover 鼠标经过

（11）mousemove 鼠标移动

（12）mouseout 鼠标离开

（13）mouseup 鼠标弹起

（14）reset 表单重置

（15）submit 表单提交

（16）select 文本被选定

事件句柄通常在事件前加上on，事件句柄出现在一个标签的属性位置上（事件句柄以属性的形式存在）

注册事件的第一种方式

直接在标签中使用事件句柄

<input type = "button" value = "hello" onclick = "sayhello"/>

以上将sayhello函数注册到按钮上，等待click事件发生后，发生回调

注册事件的第二种方式

纯js代码完成事件的注册

<body>
    <input type = "button" value = "hello" id = "mybtn"/>
    <script type = "text/javascript">
    	var btnobj = document.getElementById("mybtn");//根据id获取对象
        btnobj.onclick = 函数名字,匿名函数//不加小括号
        document.getElementById("mybtn").onclick = function()
        {
            
        }//等同于上面一种
    </script>
</body>

执行顺序：onload（页面加载完了才会发生）

<body>
    <script type = "text/javascript"></script>
    	window.onload = function(){
    		document.getElementById("btn").onclick = function(){
    			alert("hello");
    	}
    }
    
    <input type = "button" value = "hello" id = "btn"/>
</body>

页面加载过程中，将函数注册给load事件

页面加载完毕后，load事件发生，执行回调函数

回调函数执行过程中，将函数注册给click事件

函数被调用

一个节点对象中只要有的属性都可以"." id.属性

捕捉回车与esc键盘

//回车键键值13，esc 27
window.onload = function()
{
    var usernameElt = document.getElementById("username");
    usernameElt.onkeydown = function(event){
        //获取键值
        if(event.keyCode === 13)
            {
                alert("正在验证...")
            }
    }
}

<input type = "text" id = "username"/>

回调函数在实际上是浏览器调用函数

浏览器再调用函数的时候回传一个参数

event为刚刚发生的事件，为事件对象，获取当前发生事件的入口

DOM（文档对象模型）

对网页中的节点进行增删改，html文档是一颗DOM树

顶级对象：document

BOM包含DOM

window.document = document

document是window下面一个分支

获取文本框的value

window.onload = function(){
    alert(document.getElementById("username").value)
}

<input type = "text" id = "username">

修改则在value后面加上=赋值

this. 代表的是当前的节点对象。获取.后面的属性

innerHTML与innerTEXT属性

都是设置元素内部的内容

<input type = "button" value = "设置div中内容" id = "mybtn">

<div id = "div1"></div>

<script type = "text/javascript">
	window.onload = function(){
        var btn = document.getElementById("mybtn");
        btn.onclick = function(){
            var divElt = document.getElementById("div1")；
            divElt.innerHTML = “<font color = "red"></font>”；
        }
    }
</script>

//innerHTML 会把后面字符串当作html代码解释
//innerTEXT 会把后面字符串当作普通字符串

正则表达式

字符串格式匹配

常见正则表达式

参考文档

创建正则表达式

第一种方式

var regExp = /正则表达式/flags；

第二种方式

var regExp = new RegExp("正则表达式"，"flags");

关于flags：

​ g：全文匹配

​ i：忽略大小写

​ m：多行搜索（当前面是正则表达式时，m不能用，只有普通字符串能用）

正则表达式对象的test()方法

true OR flase = 正则表达式.test(用户填写的字符串)//true为匹配成功

去除字符串前后字符串的空白（trim）

username = username.trim()

复选框的全选和取消全选

window.onload = function(){
    var Quan = document.getElementById("quanxuan");
    Quan.onclick = function(){
            var aihao = document.getElementsByName("aihao")//获取name,形成一个数组
            if(Quan.checked){		//获取复选框的选中状态
                for(car i = 0;i < aihao.length;i++){
                    aihao[i].checked = true;
                }
            }
        	else{
            		for(car i = 0;i < aihao.length;i++){
                    	aihao[i].checked = false;
                }
        	}
        }
    }
}
<input type = "checkbox" id = "quanxuan"/>
<input type = "checkbox" name = "aihao" id = "smoke"/>
<input type = "checkbox" name = "aihao" id = "drink"/>    

获取下拉列表选中项的value

onchange：下拉列表的改变

日期类

获取
var nowtime = new Date();
转化为本地时间
nowtime = nowtime.toLocaleString();
输出
document.write(nowtime);

setInterval()方法

参考帮助文档

BOM（浏览器对象模型）

打开浏览器窗口，关闭，前进，后退，浏览器地址栏上地址

顶级对象：window