笔记总结: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("正在登录")
}

你可能感兴趣的:(Web前端,前端,笔记,javascript)