JavaScript 基础（一）

vienceTang
2,944 阅读6分钟

JavaScript 简介

1. JavaScript 简介

前端分3层

  • 结构层作用：从 HTML角度搭建网页
  • 样式层作用：从美化角度书写 CSS 样式
  • 行为层作用：从交互角度书写 JavaScript脚本

JavaScript 是一门客户端脚本语言，主要运行在浏览器中

ECMA：欧洲计算机制造商协会（时）

ES6：2015.6.17，ECMAScript 6发布正式版本，即是ECMAScript 2015

JavaScript 是由 ECMAScript、DOM（文档对象模型）、 BOM（浏览器对象模型）三者组成

JavaScript 书写

1. JavaScript 书写位置

  1. 在 HTML 的 head 标签中

    <scipt type="text/javascript"></scipt>

    注：在 HTML5 中 type="text/javascript" 不需要写

  2. 在 HTML 的 body 的闭合标签上面，既是body标签的最底部

  3. 单独的 .js 文件中书写 JavaScript 脚本，在 HTML 中通过以下代码引入

    <scipt src="xxx.js"></scipt>

2. JavaScript 注释

  • HTML

    <!-- html 注释内容 -->

  • CSS

    /* CSS 注释内容 */

  • JavaScript

    // 注释单行文本
/* 多行文本注释 */

3. alert 语法

alert 本身表示 提示 ，alert 在 JavaScript 中表示提示框

  1. alert 书写

    alert 后面紧跟小括号，小括号内书写一对引号，输出字符串（输出变量不需要引号）

  2. alert 语句分号的重要性

    alert 语句后面必须以分号结尾

  3. alert 语句解析顺序

    通常情况下：从上到下，依次执行

  4. alert 语句对空格、缩进、换行不敏感

4. 控制台（console）

  • 打开方式：

    1. 快捷键： F12
    2. 右击网页选中"检查"或者"审查元素"

  • 作用

    1. 指明错误类型和错误位置以及错误数目

    2. 在控制台可以打印语句

      注：console.log("XXX"); 控制台执行输出 XXX

console 是 JavaScript 的内置对象

常量

分为数字、字符串、undefined（未定义的）、 Boolean值

1. 数字类型 number

数字类型分为整数、浮点数（小数）、特殊值

1.1 整数

十进制表示法、八进制表示法、十六进制表示法

在进行算术运算时：都会转换成十进制

八进制表示法：前缀0，0o，0O，后面数字0-7

十六进制表示法：前缀0x，0X，后面数字0-7，字母a-f或者A-F

八进制：逢八进一

console.log(010); // 输出 8
console.log(0100); // 输出 64
console.log(01000);  // 输出 512
console.log(010000); // 输出 4096

注：八进制的后面数都不能超过7，若前缀是0且后面数字超过7，则强制转换成十进制；若前缀为0o，0O则报错

十六进制：逢十六进一

console.log(0x10); // 输出 16
console.log(0x100); // 输出 256
console.log(0X1000);  // 输出 4096

注：十六进制中，若前缀是0x或者0X且后面数字不在0-9和a-f(A-F)中，则报错

负数在前面加 - 即可

1.2 浮点数（小数）

浮点数是由 整数.小数组成，浮点数只有十进制，若无整数部分可写成**.小数**（小数点前面的0可以省略）

console.log(.893); // 输出 0.893
console.log(1.6789e3); // 输出 1678.9
console.log(567.89e-3); // 输出 0.56789

注：JavaScript 支持幂的写法

1.3 特殊值

①：Infinity 表示无穷

浏览器对于数值计算能力有限，当超过一点数值时，正值输出 Infinity ，负值输出 -Infinity

console.log(89e1233456); // 输出 Infinity
console.log(-89e1233456); // 输出 -Infinity
console.log(1/0); // 输出 Infinity
console.log(-1/0); // 输出 -Infinity

②：NaN 表示 not a number

console.log(NaN); // 输出 NaN
console.log(0/0); // 输出 NaN

2. 字符串类型 string

表示方法：必须用一对引号包裹

特殊字符: 表示方法使用反斜杠+符号

\n： 换行

\t：tab制表符

\"： 双引号

\'：单引号

变量 variables

变量可以看成一个容器，里面可以存放任何数据（常量、函数、数组）

1. 定义变量（声明，赋值，使用）

var a; // 声明变量a（声明）
a = 10; // 给变量a赋值为常量10（赋值）
console.log(a); // 输出变量a的值（使用）

声明：必须使用var 后面紧跟空格和变量名

注：只能存放一个数据， 只保存最后一个数据

命名规则：

  1. 第一个字符由字母、下划线（_）、美元符号（$）组成
  2. 其他字符由数字、字母下划线、美元符号组成
  3. 不能使用关键字、保留字
  1. 不能以数字开头
  2. Javascript 严格区分大小写

注：变量若未声明直接使用，会产生引用错误：Uncaught Reference Error：变量名 is not defined

2. 变量赋值

JavaScript 中，= 表示赋值，把等号右边的数据赋值给左边的变量，左边变量的值发生变化，右边不发生变化

注：变量在声明后未赋值直接使用，会输出：undefined：未定义

3. 变量声明提升

  1. 通常把声明和赋值写在一起

    var a = 10;  // (声明+赋值)

  2. 同时定义多个变量

    var name = ‘vience’, sex = ‘男’, age = 23, height = 180;

    一个 var 可以定义多个变量，用逗号分开，以分号结束

console.log(a); // 输出 undefined
var a = 10;
// 等同于
var a;
console.log(a);
a = 10;

JavaScript 特性：当引用一个未声明的变量时，不会抛出错误，只会输出undefined

预解析： JavaScript代码在解析时，会将所有的声明首先执行（只声明不赋值），称为预解析

注： JavaScript 输出 undefined 情况

// 第一种
console.log(a);
var a;
// 第二种
var a;
console.log(a);
// 第二种
var a = undefined;
console.log(a);

数据类型

数据类型分为简单数据类型和复杂数据类型

  • 简单数据类型
    • 数字类型 number : 整数、浮点数、特殊值（Infinity、NaN）
    • 字符串类型 string : 字符串
    • 布尔类型 boolean : 真（true）、 假（fasle）
    • undefined : undefined
    • null : null
  • 复杂数据类型
    • 对象 Object
    • 函数 Function
    • 数组 Array

1. 数据类型的检测

  • typeof() / typeof + 空格 + 检测的数据

    var a = 10, b= '10', c = 2.787, d = Infinity, e = NaN, f = true, g = undefined;
console.log(typeof(a));  // number
console.log(typeof(b));  // string
console.log(typeof(c));  // number
console.log(typeof(d));  // number
console.log(typeof(e));  // number
console.log(typeof(f));  // boolean
console.log(typeof(g));  // undefined

  • 变量的数据类型，根据变量的值的类型来确定

    var a = 1, b = '1';
console.log(typeof a+b);  // number1
console.log(typeof +b);  // number
console.log(typeof(a+b));  //string

    解析：

    + 在含有字符串的类型中表示拼接typeof a ==> number

    + 使用在一个数字字符串之前可以把该字符串隐式转成数字类型

2. 数据类型转换

  1. number ===> string

    + 在 JavaScript 中，加号（+）表示连接符，尤其是在number和string之间时，拼接后产生string类型

    当加号（+）两边都是数字类型时，表示加法

    var c = 12;
c = c + '';
console.log(typeof(c)) // string

  2. string ===> number

prompt：弹出框，用于文字（string类型）的输入。

​ 两个参数：第一个用于提示文本，第二个默认文本（可以省略）参数之间用逗号隔开

prompt("请输您的年龄", 18);

①prompt 输入的数据可以用变量接收

②prompt 输入的数据类型都是string类型

var age = prompt("请输入您的年龄")；
console.log(typeof(age)) // string

string ===> number 的三种方式

  • Number()：将任何数据类型转换成数字类型

  • parseInt()：将string类型转换成整数/NaN

  • parseFloat()：将string类型转换成浮点数/NaN

3. parseInt() 和 parseFloat()

  • parseInt() 作用：对数字进行取整

    ​ 第一个参数：进行处理的字符串数据，第二个参数转换的进制（可以省略）

    console.log(paseInt("12.999"))	// 12
console.log(paseInt("12今天"))	// 12
console.log(paseInt("今天12"))	// NaN
console.log(paseInt("0.999今天"))		// 0

  • paseFloat 作用：将字符串转换为浮点数（参数同上）

    console.log(paseFloat("12.111"))	// 12.111
console.log(paseFloat("0.78e1"))	// 7.8
console.log(paseFloat(".12今天12"))	// 0.12
console.log(paseFloat("今天1.2"))		// NaN

    paseFloat() 会忽略第一个浮点数后面的所有数据

avatar
文章
阅读
粉丝