JavaScript 自学笔记

  • A+
所属分类：Web前端
摘要

浏览器分成两个部分，渲染引擎和JS引擎Notes: 浏览器本身并不会执行JS代码，而是通过内置JavaScript引擎(解释器)来执行JS代码。JS引擎执行代码时逐行解释每一句源码(转换成机器语言)，然后由计算机去执行，所以JavaScript语言归为脚本语言，会逐行解释执行。
便宜好用的国外VPS推荐

JavaScript学习

1. 简介

  • JavaScript是世界上最流行的语言之一，是一种运行在客户端的脚本语言
  • 脚本语言：不需要编译，运行过程中由js解析器(js引擎)逐行来进行解释并运行
  • 现在也可以基于Node.js技术进行服务器端编程

2. 浏览器执行JS简介

浏览器分成两个部分，渲染引擎和JS引擎

  • 渲染引擎：用来解析HTML与CSS，俗称内核，比如chrome浏览器的blink,老版本的webkit
  • JS引擎：也称为JS解释器。用来读取网页中的JavaScript代码，对其处理后运行，比如chrome浏览器的V8

Notes: 浏览器本身并不会执行JS代码，而是通过内置JavaScript引擎(解释器)来执行JS代码。JS引擎执行代码时逐行解释每一句源码(转换成机器语言)，然后由计算机去执行，所以JavaScript语言归为脚本语言，会逐行解释执行。

3. JS的组成

graph TD A[JavaScript]-->B[ECMAScript] A[JavaScript]-->C[DOM] A[JavaScript]-->D[BOM]

  • ECMAScript:JavaScript语法

  • DOM:页面文档对象模型

    文档对象模型(Document Object Model),是W3C组织推荐的处理可扩展标记语言的标准编程接口。通过DOM提供的接口可以对页面的各种元素进行操作(大小，位置，颜色等)

  • 浏览器对象模型

    BOM(Browser Object Model)是指浏览器对象模型，它提供了独立于内容的，可以与浏览器窗口进行互动的对象结构，通过BOM可以操作浏览器窗口，比如弹出框，控制浏览器的跳转，获取分辨率等

4. JS位置

JS有3种书写位置，分别为行内，内嵌和外部

<!DOCTYPE html> <html lang="en"> <head>     <meta charset="UTF-8">     <meta name="viewport" content="width=device-width, initial-scale=1.0">     <title>Document</title>     <!-- 2.内嵌式的js -->     <script>         alert('Completed');     </script>     <!-- 3.外部js script双标签 -->     <script src="test.js"></script> </head> <body>     <!-- 1.行内式的js,直接写道元素的内部 -->     <input type="button" value="Submit" onclick="alert('Submit Complete')"> </body> </html>

4.1 行内式JS

  • 可以将单行或少量JS代码写在HTML标签属性中(以on开头的属性)，如:onclick
  • 注意单双引号的使用：在HTML中推荐使用双引号，JS中我们推荐使用单引号
  • 特殊情况下使用

4.2 外部JS

  • 适合于JS代码量比较大的情况

  • 引用外部JS文件的script标签中间不可以写代码

    <script src="test.js"></script>

5. JavaScript输入输出语句

方法 说明 归属
alert(msg) 浏览器弹出警示框 浏览器
console.log(msg) 浏览器控制台打印输出信息 浏览器
prompt(info) 浏览器弹出输入框，用户可以输入 浏览器

5.1 JavaScript显示数据

  • 使用window.alert()弹出警告框
  • 使用document.write()方法将内容写道HTML文档中
  • 使用innerHTML写入到HTML元素中
  • 使用console.log()写入到浏览器的控制台

6. 变量

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

使用变量的时候，一定要声明变量，然后赋值。声明变量本质是去内存申请空间

6.2 声明一个变量并赋值，称之为变量的初始化

//<script>   //1. 用户输入姓名   var myname = prompt('请输入你的名字')   //2. 输出这个用户名   alert(myname) //</script>

6.3 同时声明多个变量

同时声明多个变量时，只需要写一个var，多个变量名之间使用英文逗号隔开

var age = 10,name = 'zs',sex = 'male';

6.4 变量声明特殊情况

情况 说明 结果
var age;console.log(age); 只声明 不赋值 undenfined
console.log(age) 不申明 不赋值 直接使用 报错
age = 10;console.log(age); 不声明 只赋值 10

6.5 变量的数据类型

变量是用来存储值的所在处。它们有名字和数据类型，变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中.JavaScript是一种弱类型或者说动态语言.这意味着不用提前声明变量的类型，在程序运行过程中，类型会被自动确定。

var age = 10;             //这是一个数字型 var address = "Guangzhou" //这是一个字符串

在代码运行时，变量的数据类型是由JS引擎根据=右边变量值的数据类型来判断的，运行完毕之后，变量就确定了数据类型。

JavaScript拥有动态类型，同时也意味着相同的变量可用作不同的类型:

var x = 6;      //x为数字 var x = "Bill"; //x为字符串

6.6 数据类型的分类

JS把数据类型分为两类:

  • 简单数据类型(Number,String,Boolean,Undefined,Null)
  • 复杂数据类型(object)

简单数据类型说明如下:

简单数据类型 说明 默认值
Number 数字型，包含整型值和浮点值，如21，0.21 0
Boolean 布尔值类型，如true,false,等价于1和0
String 字符串类型，如"张三"，注意JS里面，字符串都带引号 ""
Undefined var a;声明了变量a 但是没有给值，此时a = undefined undefined
Null var a = null;声明了变量a为空值

6.6.1 JS中八进制在数字前面加0，十六进制在数据前面加0x

数字型的三个特殊值:

  • Infinity,代表无穷大，大于任何数值
  • -Infinity,代表无穷小，小于任何数值
  • NaN,Not a number,代表一个非数值
console.log(Number.MAX_VALUE * 2);  //Infinity无穷大 console.log(-Number.MAX_VALUE * 2); //Infinity无穷小 console.log('老师' - 100);          //NaN

isNan()用来判断一个变量是否为非数字的类型，返回true或者false

6.6.2 字符串类型String

字符串型可以是引号中的任意文本，其语法为单引号' '和双引号""

JS可以用单引号嵌套双引号，或者用双引号嵌套单引号(外双内单，外单内双)

便宜好用的国外VPS推荐