前端开发_JavaScript基础

JavaScript介绍

JS是一种运行在客户端(浏览器)的编程语言,实现人机交互效果

作用:

  • 网页特效 (监听用户的一些行为让网页作出对应的反馈)

  • 表单验证 (针对表单数据的合法性进行判断)

  • 数据交互 (获取后台的数据, 渲染到前端)

  • 服务端编程 (node.js)

组成:

  • ECMAScript:规定了js基础语法核心知识。
  • Web APIs:
    • DOM 操作文档,比如对页面元素进行移动、大小、添加删除等操作
    • BOM 操作浏览器,比如页面弹窗,检测窗口宽度、存储数据到浏览器等等

JavaScript权威网站

JavaScript书写位置

  1. 内部JavaScript

    直接写在html文件里,用script标签包住

    script标签写在上面,即html文件底部

    <script>放在HTML文件的底部附近的原因是浏览器会按照代码在文件中的顺序加载 HTML。

  2. 外部JavaScript

    代码写在以.js结尾的文件里,通过script标签,引入到html页面中

    示例:<script src="my.js"></script>

    script标签中间无需写代码,否则会被忽略

    外部JavaScript会使代码更加有序,更易于复用,且没有了脚本的混合,HTML 也会更加易读

  3. 内联JavaScript

    代码写在标签内部(后面vue框架会用这种模式)

    示例:<button onclick="alert('test')">点我</button>

JS基本语法

注释

  1. 单行注释
    • //
    • 快捷键:ctrl+/
  2. 块注释
    • /* */
    • 快捷键:shift+alt+A

运算符

赋值运算符

=:将等号右边的值赋予给左边, 要求左边必须是一个容器

其他赋值运算符:+=、-=、*=、/=、%=

一元运算符

++和–,即自增和自减

前置自增:先自加再使用

后置自增:先使用再自加

比较运算符

> : 左边是否大于右边

<: 左边是否小于右边

>=: 左边是否大于或等于右边

<=: 左边是否小于或等于右边

==: 左右两边值是否相等

===: 左右两边是否类型和值都相等

!==: 左右两边是否不全等

比较结果为boolean类型,即只会得到 true 或 false

对比:

= 单等是赋值

== 是判断

=== 是全等

开发中判断是否相等,强烈推荐使用 ===

字符串比较,是比较的字符对应的ASCII码

NaN不等于任何值,包括它本身

不同类型之间比较会发生隐式转换

逻辑运算符

逻辑与:&&

逻辑或:||

逻辑非:!

运算符优先级

在这里插入图片描述

一元运算符里面的逻辑非优先级很高

逻辑与比逻辑或优先级高

结束符

使用英文分号;代表语句结束

实际开发中可写可不写

语句

表达式和语句

表达式是可以被求值的代码,JavaScript 引擎会将其计算出一个结果。

因为表达式可被求值,所以它可以写在赋值语句的右侧

语句是一段可以执行的代码

语句不一定有值,所以比如 alert() for和break 等语句就不能被用于赋值。

分支语句

  1. if语句

    if(条件){
        满足条件要执行的代码
    }
    
  2. 双分支if

    if(条件){
        满足条件要执行的代码
    }else{
        不满足条件执行的代码
    }
    
  3. 多分支if

    if(条件1){
        代码1
    }else if(条件2){
        代码2
    }
    ...
    else{
        代码n
    }
    
  4. 三元运算符

    条件?满足条件执行的代码:不满足条件执行的代码
    
  5. switch语句

    switch(数据){
        case 值1:
            代码1
            break
        case 值2:
            代码2
            break
        default:
            代码n
            break
    }
    

循环语句

  1. while循环

    while(循环条件){
        要重复执行的代码(即循环体)
    }
    
  2. for循环

    for(变量起始值;终止条件;变量变化量){
        循环体
    }
    

继续循环使用continue

跳出循环使用break

输入输出

输出语法

  1. body内输出

    document.write('要输出的内容')
    

    作用:向body内输出内容

    如果输出的内容写的是标签,也会被解析成网页元素

  2. 警告框输出

    alert('要输出的内容')
    

    作用:页面弹出警告对话框

  3. 控制台输出

    conosole.log('控制台打印')
    

    作用:控制台输出语法,程序员调试使用

输入语法

prompt('请输入:')

作用:显示一个对话框,对话框中包含含一条文字信息,用来提示用户输入文字

在这里插入图片描述

代码执行顺序:按HTML文档流顺序执行JavaScript代码

但是,alert() 和 prompt() 它们会跳过页面渲染先被执行

字面量

在计算机科学中,字面量(literal)是在计算机中描述 事/物

包括数字字面量、字符串字面量、数组字面量、对象字面量 等等

变量

变量是计算机存储数据的“容器”

**变量本质:**是程序在内存中申请的一块用来存放数据的小空间

变量的使用

声明变量

语法:let+变量名

let 不允许多次声明一个变量

声明多个变量:

多个变量中间用逗号隔开let 变量1 = 值1, 变量2 = 值2

变量赋值

语法:变量名 = 数值

也可以声明时直接赋值

let 变量名 = 赋值

更新变量

再次进行变量赋值即可

变量命名规则与规范

规则:

  • 不能用关键字

    • 关键字:有特殊含义的字符,JavaScript 内置的一些英语词汇。例如:let、var、if、for等
  • 只能用下划线、字母、数字、$组成,且数字不能开头

  • 字母严格区分大小写,如 Age 和 age 是不同的变量

规范:

  • 起名要有意义

  • 遵守小驼峰命名法

    • 第一个单词首字母小写,后面每个单词首字母大写。例:userName

数组

数组 (Array) —— 一种将 一组数据存储在单个变量名下 的优雅方式

  • **元素:**数组中保存的每个数据都叫数组元素

  • **下标:**数组中数据的编号

  • **长度:**数组中数据的个数,通过数组的length属性获得

数组声明

语法:let 数组名 = [数据1,数据2,……,数据n]

  • 数组是按顺序保存,所以每个数据都有自己的编号

  • 计算机中的编号从0开始

  • 在数组中,数据的编号也叫索引或下标

  • 数组可以存储任意类型的数据

数组使用

语法:数组名[下标](下标从0开始)

操作数组

  1. 新增

    数组名.push(元素1,...,元素n)将一个或多个元素添加到数组末尾,并返回数组的新长度

    数组名.unshift(元素1,...,元素n)将一个或多个元素添加到数组的开头,并返回数组的新长度

  2. 删除

    数组名.pop()从数组中删除最后一个元素,并返回该元素的值

    数组名.shift()从数组中删除第一个元素并返回该元素的值

    数组名.splice(start,deleteCount)从起始位置删除几个元素(deleteCount可选)

常量

使用 const 声明的变量称为“常量”。

当某个变量永远不会改变的时候,就可以使用 const 来声明,而不是let

常量不允许重新赋值,声明的时候必须赋值(初始化)

数据类型

基本数据类型

number 数字型

JavaScript 中的正数、负数、小数等 统一称为 数字类型。

数学运算符也叫算术运算符,主要包括加+、减-、乘*、除/、取余%(求模)

NaN 代表一个计算错误。它是一个不正确的或者一个未定义的数学操作所得到的结果

NaN 是粘性的。任何对 NaN 的操作都会返回 NaN

string 字符串型

通过单引号( ‘’) 、双引号( “”)或反引号( ` ) 包裹的数据都叫字符串,单引号和双引号没有本质上的区别,推荐使用单引号。

无论单引号或是双引号必须成对使用

单引号/双引号可以互相嵌套,但是不以自已嵌套自已(口诀:外双内单,或者外单内双)

必要时可以使用转义符 \,输出单引号或双引号 \'\"

+运算符 可以实现字符串的拼接。

数字相加,字符相连

模板字符串

拼接字符串和变量

语法:

  • `` (反引号)

  • 在英文输入模式下按键盘的tab键上方那个键

  • 内容拼接变量时,用 ${ } 包住变量

  • 示例:

  • document.write(`我的名字是${name},今年${age}`)
    

boolean 布尔型

表示肯定或否定时在计算机中对应的是布尔类型数据。

它有两个固定的值 true 和 false,表示肯定的数据用 true(真),表示否定的数据用 false(假)

undefined 未定义型

未定义是比较特殊的类型,只有一个值 undefined。

只声明变量,不赋值的情况下,变量的默认值为 undefined,

null 空类型

JavaScript 中的 null 仅仅是一个代表“无”、“空”或“值未知”的特殊值

null 和 undefined 区别:

  • undefined 表示没有赋值
  • null 表示赋值了,但是内容为空

引用类型

object 对象

检测数据类型

typeof 运算符可以返回被检测的数据类型。它支持两种语法形式:

  • 作为运算符: typeof 变量名 (常用的写法)
  • 函数形式: typeof(变量名)

类型转换

JavaScript是弱数据类型: JavaScript也不知道变量到底属于那种数据类型,只有赋值了才清楚

使用表单、prompt 获取过来的数据默认是字符串类型的,此时就不能直接简单的进行加法运算

隐式转换

某些运算符被执行时,系统内部自动将数据类型进行转换,这种转换称为隐式转换。

规则:

+号两边只要有一个是字符串,都会把另外一个转成字符串

除了+以外的算术运算符 比如 - * / 等都会把数据转成数字类型

显示转换

转换为数字型

  • Number(数据)

    • 转成数字类型
    • 如果字符串内容里有非数字,转换失败时结果为 NaN(Not a Number)即不是一个数字
    • NaN也是number类型的数据,代表非数字
  • parseInt(数据)

    • 只保留整数
  • parseFloat(数据)

    • 可以保留小数

转换为字符型:

  • String(数据)
  • 变量.toString(进制)

函数

function,是被设计为执行特定任务的代码块

函数可以把具有相同或相似逻辑的代码“包裹”起来,通过函数调用执行这些被“包裹”的代码逻辑,这么做的优势是有利于精简代码方便复用

函数使用

函数声明

function 函数名(参数列表) {
    函数体
}

参数列表可以省略

示例:

function f1(){
    document.write('hello')
}

function f2(num1,num2){
    document.write(num1+num2)
}

函数命名规范

和变量命名基本一致

尽量小驼峰式命名法

前缀应该为动词

命名建议:常用动词约定

函数调用

函数名(传递的参数列表)

如果某个参数没有给对应形传实参,默认是undefined

函数返回值

当函数需要返回数据出去时,用return关键字

区别于java的是,java需要声明返回类型,这里直接返回就可以了

示例:

function getSum(x,y){
    return x+y
}

没有return的函数默认返回undefined

匿名函数

没有名字的函数, 无法直接使用。

  1. 函数表达式

    将匿名函数赋值给一个变量,并且通过变量名称进行调用 我们将这个称为函数表达式

    语法:

    lef fn = function(){
        函数体
    }
    

    调用:

    fn()
    
  2. 立即执行函数

    避免全局变量时间的污染

    // 方式1
    (function(){函数体})();
    
    // 方式2
    (function(){函数体}());
    

    多个立即执行函数要用 ; 隔开,要不然会报错

对象

JavaScript里的一种数据类型

对象组成

对象由属性和方法组成

let 对象名 = {
    属性名: 属性值,
    方法名: 函数
}

对象使用

对象声明

let 对象名 = {}

//示例
let 对象名 = new Object()

//示例
let person = {}

对象属性调用

//语法:对象名.属性名

//示例
let person = {
    uname: '老师',
    age: 18,
    gender: '女'
}

console.log(person.name)

如果对象属性为多次属性或 - 等属性,点操作就不能使用了

需要换用以下方式:

//示例:
let person = {
    'user-name': '老师',
    age: 18,
    gender: '女'
}

console.log(person['user-name'])

对象属性修改

语法:对象名.属性名 = 新值

对象新增属性

语法:对象名.新属性 = 新值

示例:

let person = {
    uname: '老师',
    age: 18,
    gender: '女'
}

person.address = '成都'

对象删除属性

语法:delete 对象名.属性

对象方法

方法的声明和正常函数声明相同

let 对象名 = {
    方法名: function() {...}
}

方法调用和属性调用类似:对象名.方法名()

遍历对象

使用 for in 语法进行遍历

//示例
let person = {
    uname: '老师',
    age: 18,
    gender: '女'
}

for (let i in person){
    console.log(i)	//打印属性名
    console.log(person[i])	//打印属性值
}

内置对象

JavaScript内部提供的对象,包含各种属性和方法给开发者调用

Math

Math对象是JavaScript提供的一个“数学”对象

Math对象包含的方法有:

  • random:生成0-1之间的随机数(包含0不包括1)
  • ceil:向上取整
  • floor:向下取整
  • max:找最大数
  • min:找最小数
  • pow:幂运算
  • abs:绝对值