笔记总结：Web前端——JavaScript基础

JavaScript基础

一、JavaScript基础

1.简介

JS是一种解释性脚本语言，不需要编译，用于向HTML添加交互行为。

JS由ECMAScript(ES)、DOM(Document Object Model)和BOM(Browser Object Model)组成。

2.JS基本结构

<script type="text/javascript">
    //JS代码
</script>

可以在HTML任意位置编写，脚本中访问的元素必须在前面有定义

3.JS执行过程

浏览器向服务器发送网站请求，服务器收到请求后向浏览器发送一个网站。浏览器开始执行网站代码，当发现代码中有CSS和JS链接时，再次向服务器发送请求，服务器返回CSS和JS的代码。

4.JS引入方式

• 行内脚本

  <input type="button" value="点击" onclick="alter('你点击了按钮')">
  

• 内部脚本

  <input type="button" value="点击" id="btn">
  <script type="text/javascript">
      document.getElementById("btn").onclick=function(){
          alter('你点击了按钮');
      }
  </script>
  

• 外部脚本

  引入：

  <script type="text/javascript" src="js文件地址"></script>
  

  js文件：

  document.getElementById("btn").οnclick=function(){
  	alter('你点击了按钮');
  }
  

二、JS语法

js一行语句后的分号可省略

1.数据类型

数据类型	说明
undefined	当变量没有赋值时，默认为undefined
null	空值，与undefined值相同，类型不同
number	var num = 10;
boolean	var valid = true;
string	var name=“张三”;
object	var obj = new Object(); var student = {name:“张三”， sex:”男“};

2.变量

1. var关键字

   JS是弱类型语言，没有类型之分。

   var mag = 20;
   msg = true;
   

2. let关键字

   let a = 1;
   a = "1";
   

3. let和var的区别

   {
       var a = 1;
   	let b = 2;
   }
   //console表示控制台 log表示添加日志
   console.log(a);
   console.log(b);
   

   var在一个脚本中是全局变量，而let是局部变量

3. 字符串

• 单引号和双引号都表示字符串

• 字符串常用方法：

  方法	说明
  charAt(index)
  indexOf(str,index)	从index位置开始查找，可省略，未找到返回-1
  subString(start,end)	[start,end)
  split(str)
  replace(oldStr,newStr)	只能替换第一个oldStr

• typeof 运算符：返回变量的类型

  console.log(typeof a);
  

4.数组

1. 创建数组

   let 数组名 = new Array(length);
   let 数组名 = new Array(数组元素1，数组元素2...);
   let 数组名 = [数组元素1，数组元素2...];	//在JS中中括号表示数组
   

2. 数组元素赋值

   与Java一样

3. 常用方法

   方法	说明
   push(v1,v2…)	将元素添加到数组末尾，数组长度发生变化
   join(str)	将数组中的所有元素按str拼接起来，返回string
   splice(index,count)	从下标位置开始删除count个元素
   splice(index,count,v1,v2,v3…)	删除后再将给定元素添加到删除位置，如果添加元素较多则将后面的元素往后移动
   concat(arr1,arr2,arr3…)	数组拼接返回新数组，empty占位，原数组不变

5.对象

let 对象名 = new Object();
对象名.属性名 = 属性值;

//使用大括号创建对象
let 对象名 ={
    属性名:属性值,
    属性名:属性值
};

对象无定义，直接设置其属性

console.log(对象);	//会打印对象信息

三、运算符

与java的区别：

• 两个整数相除得到结果可能是浮点数

• ===比较内容的同时检查数据类型是否一致

• !==内容和数据类型有一个不同则为真

• 2和”2“在内容上相同，但在数据类型上不同

• 判断数据类型

  let a = 10;
  // a === "number" 为true
  

四、流程控制语句

与Java区别

•   //数组遍历下标
    for(let index in arr){
        console.log(arr[index])
    }
    //对象遍历属性
    for(let attribute in stu){
        //对象属性值除了使用点外还可以使用中括号属性名（字符串）取值
        console.log(stu[attribute])
    }
  

五、函数

1.系统函数

1. 窗体函数

   函数	说明
   altert(“提示信息”)	提示对话框
   confirm(“提示信息”)	确认对话框，返回用户是否点击了确认
   prompt(“提示信息”)	输入对话框，返回用户输入的内容，取消为null，无输入为空值

2. 数字相关函数

   函数	说明
   parseInt()	字符串转整数，只要是以数字开头的字符串，取最前面的数字
   parseFloat()	0.1可以省略为.1
   isNaN()	判断是否不是数字

3. Math类函数

   方法	说明
   ceil(数字)
   floor(数字)
   round(数字)	四舍五入取整
   random()	[0,1)之间的随机浮点数
   abs(数值)

2.自定义函数

function [函数名]（参数1，参数2......）{	//没有参数类型
    ...
    return 返回值;	//需要时写，不需要时不写
}

//函数调用
函数名（参数1，参数2...）

一个函数的返回值也可以是一个函数定义，形成函数嵌套定义

function calculate(a,b,c){
    let result = a * b;
    return function (d){
        return result + c * d; 
    }
}

let s = calculate(1,2,3) //此时s当中存储了一个函数
let num = s(4)  //再次调用函数得到结果

//闭包
let num2 = calculate(1,2,3)(4)
(function calculate(a,b,c){
    let result = a * b;
    return function (d){
        return result + c * d; 
    }
})(1,2,3)(4)

3.元素事件和函数

名称	说明
click	鼠标左键点击
blur	元素失去焦点
focus	元素获得焦点
keydown	键盘按键按下，未释放
keyup	键盘按键按下后释放
mouseover	鼠标移动到元素上
mouseout	鼠标移动到元素外，两者合起来就是伪类样式hover
change	元素内容发生改变，只有当用户按下enter键或输入框失去焦点后才会触发事件，应用于下拉列表或者文件上传
input	元素内容发生改变，输入内容改变时立即触发
keypress	键盘按键按下，不论释放or不释放
mouseenter	鼠标进入

开启元素事件在事件名前加上on，关闭事件在前面加上off

function showValue(){
    //document为文档对象，功能是操作页面元素
    let input = document.getElementById("username")
    console.log(input.value)	//用户输入值
    console.log(input.getAttribute("self")) //自定义属性需要使用方法来获取值
}

示例：用户按下enter键登录

input.onkeydown = function (e){ //e是一个事件对象，event
    if(e.code === "Enter"){
        login();
    }
}
document.getElementById("password").onkeydown = function (e){
    if(e.code === "Enter"){
        login();
    }
}

function login(){
    console.log("正在登录")
}