JS基础知识概述

简介: 完整的JavaScript实现包含三个部分:ECMAScript,DOM(文档对象模型)和BOM(浏览器对象模型)

web页面的组成部分

HTML:定义了网页的内容

CSS:描述了网页的布局

JavaScript:网页的行为

完整的JavaScript

完整的JavaScript实现包含三个部分:ECMAScript,DOM(文档对象模型)和BOM(浏览器对象模型)

DOM (Document Object Model)(文档对象模型)是用于访问 HTML 元素的正式 W3C 标准

JavaScript 是脚本语言

1.JavaScript 是一种轻量级但功能强大的可插入 HTML 页面的编程语言,语法规则定义了语言结构;

2.JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行

3.使用 JavaScript 来处理 HTML 内容是非常强大的功能;JavaScript 能够改变任意 HTML 元素的大多数属性

4.HTML 中的脚本必须位于 <script> </script> 标签之间

5.JavaScript 对大小写是敏感的;当编写 JavaScript 语句时,请留意是否关闭大小写切换键

6.脚本可位于 HTML 的

或 部分中,或者同时存在于两个部分中;通常的做法是把函数放在页面底部。也可以把脚本保存到外部文件中;外部文件通常包含被多个网页使用的代码;外部 JavaScript 文件的文件扩展名是 .js;如需使用外部文件,请在 <script> </script> 标签的 "src" 属性中设置该 .js 文件

js可以通过不同的方式来输出数据

JavaScript 没有任何打印或者输出的函数

1.使用 document.write() 仅仅向文档输出写内容;如果在文档加载完成后使用该方法,会覆盖整个文档

2.使用 window.alert() 弹出警告框

3.使用 innerHTML 写入到 HTML 元素

4.alert() 函数在 JavaScript 中并不常用,但它对于代码测试非常方便

5.如果浏览器支持调试,可以使用 console.log() 方法在浏览器中显示 JavaScript 值;浏览器中使用 F12 来启用调试模式, 在调试窗口中点击 "Console" 菜单

例子如下:

<script>
    document.write(Date());
    window.alert(5 + 6);
    document.getElementById("demo").innerHTML = "段落已修改。";    //这个方法是 HTML DOM 中定义的;如需从JS访问某个HTML元素,可使用 "id" 属性来标识,并 innerHTML 来获取或插入元素内容
    console.log(c);//程序中调试是测试,查找及减少bug(错误)的过程
</script>

JavaScript 语法

JavaScript 字面量

在编程语言中,一个字面量是一个常量,如 3.14;JS字面量包括:

1.数字(Number)字面量 :可以是整数或者是小数,或者是科学计数(e)

2.字符串(String)字面量 :可以使用单引号或双引号

3.表达式字面量 :用于计算

4.数组(Array)字面量 :定义一个数组

5.对象(Object)字面量 :定义一个对象

6.函数(Function)字面量 :定义一个函数

JavaScript 变量

1.在编程语言中,变量是存储信息的"容器",用于存储数据值

2.在 JavaScript 中创建变量通常称为"声明"变量;我们使用 var 关键词来声明变量;变量声明之后,该变量是空的(没有值);如需向变量赋值,请使用等号;不过,您也可以在声明变量时对其赋值;一个好的编程习惯是,在代码开始处,统一对需要的变量进行声明

3.可以在一条语句中声明很多变量;该语句以 var 开头,并使用逗号分隔变量即可,声明也可横跨多行

4.在计算机程序中,经常会声明无值的变量。未使用值来声明的变量,其值实际上是 undefined;如果重新声明 JavaScript 变量,该变量的值不会丢失

5.变量是一个名称,可以通过变量名访问;在指令式语言中,变量通常是可变的。字面量是一个恒定的值

6.变量可以使用短名称(比如 x 和 y),也可以使用描述性更好的名称(比如 age, sum, totalvolume);变量一般以字母开头,也能以 $ 和 _ 符号开头(不过我们不推荐这么做)

7.变量名称对大小写敏感(y 和 Y 是不同的变量)

8.JavaScript 中,变量常见的是驼峰法的命名规则,如 lastName (而不是lastname)

9.当向变量分配文本值时,应该用双引号或单引号包围这个值;当向变量赋的值是数值时,不要使用引号。如果用引号包围数值,该值会被作为文本来处理

 var lastname="Doe",age=30,
 job="carpenter"; 

JavaScript 操作符

JavaScript使用 算术运算符 来计算值;使用赋值运算符给变量赋值

JavaScript语言有多种类型的运算符:

Type 实例 描述
赋值,算术和位运算符 = + - * / << >> 在 JS 运算符中描述
条件,比较及逻辑运算符 == != < > 在 JS 比较运算符中描述

JavaScript 语句

1.在 HTML 中,JavaScript 语句向浏览器发出的命令,告诉浏览器要做的事情;语句通常是用分号分隔的,在一行中可编写多条语句;浏览器按照从上到下的顺序执行JS语句

document.getElementById("demo").innerHTML="你好 Dolly";
document.getElementById("myDIV").innerHTML="你最近怎么样?";

2.JavaScript 可以分批地组合起来;代码块以左花括号开始,以右花括号结束;代码块的作用是一并地执行语句序列

function myFunction(){
    document.getElementById("demo").innerHTML="你好Dolly";
    document.getElementById("myDIV").innerHTML="你最近怎么样?";
}

3.JavaScript 语句通常以一个 语句标识符 为开始,并执行该语句;语句标识符是保留关键字

JavaScript 语句标识符 (关键字) :

语句 描述
break 用于跳出循环
catch 语句块,在 try 语句块执行出错时执行 catch 语句块
continue 跳过循环中的一个迭代
do ... while 执行一个语句块,在条件语句为 true 时继续执行该语句块
for 在条件语句为 true 时,可以将代码块执行指定的次数
for ... in 用于遍历数组或者对象的属性(对数组或者对象的属性进行循环操作)
function 定义一个函数
if ... else 用于基于不同的条件来执行不同的动作
return 退出函数
switch 用于基于不同的条件来执行不同的动作
throw 抛出(生成)错误
try 实现错误处理,与 catch 一同使用
var 声明一个变量
while 当条件语句为 true 时,执行语句块

4.JavaScript 会忽略多余的空格。可以向脚本添加空格,来提高其可读性

5.可以在文本字符串中使用反斜杠对代码行进行换行

 document.write("你好 \
 世界!");

JavaScript 关键词

JavaScript 语句通常以关键词为开头。 例如:var 关键词告诉浏览器创建一个新的变量

JavaScript 标识符

和其他任何编程语言一样,JavaScript 保留了一些标识符和关键字为自己所用,这些关键字有些在当前的语言版本中并没有使用,但在以后 JavaScript 扩展中会用到

JavaScript 标识符必须以字母、下划线(_)或美元符($)开始;后续的字符可以是字母、数字、下划线或美元符(数字是不允许作为首字符出现的,以便 JavaScript 可以轻易区分开标识符和数字)

JavaScript 注释

1.我们可以添加注释来对 JavaScript 进行解释,或者提高代码的可读性;JavaScript 不会执行注释

2.单行注释以 // 开头;多行注释以 / 开始,以 / 结尾;我们一般把注释放到代码行的结尾处

3.注释也可以用于阻止其中一条代码行的执行(可用于调试)

JavaScript 数据类型

1.JavaScript 数据类型:字符串(String)、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空(Null)、未定义(Undefined);编程语言中,数据类型是一个非常重要的内容。

2.JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型

3.字符串是存储字符(比如 "Bill Gates")的变量;字符串可以是引号中的任意文本;也可以使用引号,只要不匹配包围字符串的引号即可

4.JavaScript 只有一种数字类型。数字可以带小数点,也可以不带;极大或极小的数字可以通过科学(指数)计数法来书写

5.布尔(逻辑)只能有两个值:true 或 false;布尔常用在条件测试中

6.数组下标是基于零的,所以第一个项目是 [0],第二个是 [1],以此类推

7.对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义;属性由逗号分隔;空格和折行无关紧要;声明可横跨多行;对象属性有两种寻址方式:

name=person.lastname
name=person["lastname"]

8.Undefined 这个值表示变量不含有值,可以通过将变量的值设置为 null 来清空变量

9.当您声明新变量时,可以使用关键词 "new" 来声明其类型

10.JavaScript 变量均为对象。当您声明一个变量时,就创建了一个新的对象

JavaScript 函数

1.函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块;函数就是包裹在花括号中的代码块,前面使用了关键词 function;当调用该函数时,会执行函数内的代码;可以在某事件发生时直接调用函数(比如当用户点击按钮时),并且可由 JavaScript 在任何位置进行调用

2.JavaScript 对大小写敏感。关键词 function 必须是小写的,并且必须以与函数名称相同的大小写来调用函数

3.在调用函数时,您可以向其传递值,这些值被称为参数,这些参数可以在函数中使用;您可以发送任意多的参数,由逗号 (,) 分隔;当您声明函数时,要把参数作为变量来声明;变量和参数必须以一致的顺序出现,第一个变量就是第一个被传递的参数的给定的值,以此类推;函数很灵活,您可以使用不同的参数来调用该函数,这样就会给出不同的消息

4.有时,我们会希望函数将值返回调用它的地方,通过使用 return 语句就可以实现;在使用 return 语句时,函数会停止执行,并返回指定的值;但此时整个 JavaScript 并不会停止执行,仅仅是函数。JavaScript 将继续执行代码,从调用函数的地方,函数调用被返回值取代

5.在 JavaScript 函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它。(该变量的作用域是局部的)。可以在不同的函数中使用名称相同的局部变量,因为只有声明过该变量的函数才能识别出该变量。
只要函数运行完毕,本地变量就会被删除

6.在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它;如果把值赋给尚未声明的变量,该变量将被自动作为全局变量声明

7.JavaScript 变量的生命期从它们被声明的时间开始;局部变量会在函数运行以后被删除;全局变量会在页面关闭后被删除

JavaScript 字符集

JavaScript 使用 Unicode 字符集;Unicode 覆盖了所有的字符,包含标点等字符;Unicode 使文本的处理、存储和运输,独立于平台和语言

Unicode 可以由不同的字符集实现。最常用的编码是 UTF-8 和 UTF-16

字符集 描述
UTF-8 UTF8 中的字符是1到4字节长,可以代表Unicod 标准中的任何字符;UTF-8向后兼容 ASCII, 是电子邮件和网页的首选编码
UTF-16 16位Unicode转换格式是一种可变长度的Unicode字符编码,能编码整个Unicode指令表,主要用于操作系统和环境,如 Microsoft Windows、Java 和 .NET

Unicode的前128个字符(与 ASCII 一一对应)使用一个与 ASCII二进制值相同的八位组进行编码,使有效的 ASCII 文本在进行 UTF-8 编码时也是有效的;所有的 HTML 4 处理器支持 UTF-8,所有的 HTML 5 和 XML 处理器支持 UTF-8 和 UTF-16

HTML5 中默认的字符编码是 UTF-8

目录
相关文章
N..
|
25天前
|
存储 JavaScript 前端开发
JavaScript基础知识
JavaScript基础知识
N..
16 1
|
4月前
|
存储 JavaScript 前端开发
JavaScript基础知识:JavaScript 的基本数据类型有哪些?
JavaScript基础知识:JavaScript 的基本数据类型有哪些?
25 0
|
5月前
|
移动开发 JavaScript 前端开发
Vue系列教程(05)- 基础知识快速补充(html、css、js)
Vue系列教程(05)- 基础知识快速补充(html、css、js)
106 0
N..
|
25天前
|
JavaScript 前端开发 API
Vue.js概述
Vue.js概述
N..
18 2
|
1月前
|
存储 XML 前端开发
编程笔记 html5&css&js 036 CSS概述
编程笔记 html5&css&js 036 CSS概述
|
6月前
|
JSON JavaScript 前端开发
前端JavaScript入门到精通,javascript核心进阶ES6语法、API、js高级等基础知识和实战 —— JS进阶(四)完结撒花✿✿ヽ(°▽°)ノ✿
前端JavaScript入门到精通,javascript核心进阶ES6语法、API、js高级等基础知识和实战 —— JS进阶(四)完结撒花✿✿ヽ(°▽°)ノ✿
531 0
|
3月前
|
前端开发 JavaScript 安全
JavaScript 中的宿主对象和原生对象:开发者必知的基础知识(下)
JavaScript 中的宿主对象和原生对象:开发者必知的基础知识(下)
JavaScript 中的宿主对象和原生对象:开发者必知的基础知识(下)
|
3月前
|
XML 存储 JavaScript
JavaScript 中的宿主对象和原生对象:开发者必知的基础知识(上)
JavaScript 中的宿主对象和原生对象:开发者必知的基础知识(上)
JavaScript 中的宿主对象和原生对象:开发者必知的基础知识(上)
|
4月前
|
数据采集 JavaScript 前端开发
Vue Nuxt.js 概述
Vue Nuxt.js 概述
80 0
|
4月前
|
前端开发 JavaScript 开发者
JavaScript基础知识:async/await 是如何工作的?
JavaScript基础知识:async/await 是如何工作的?
35 0