JavaScript基础

对Javascript有一个初步了解，为 数据可视化 等学科做一个基础准备

文章目录

• • 1.概述
  • 2.JS基础
  • • 2.1语法结构
    • 2.2语句和语句块
    • 2.3函数
    • 2.4注释
    • 2.5标识符
    • 2.6变量
  • 3.数据类型
  • • 3.1String类型
    • 3.2数值数据类型（Number）
    • 3.3其他
  • 4.运算符和表达式
  • • 4.1算术表达式
    • 4.2赋值表达式
    • 4.3关系表达式
    • 4.4逻辑表达式
    • 4.4条件表达式
    • 4.5其他表达式
  • 5.程序结构（简述）
  • • 5.1顺序结构
    • 5.2分支结构
    • 5.3循环结构
  • 6.对象（简述）

1.概述

JS是一个运行于浏览器环境中的语言，是一种嵌入到html页面内的解释型程序设计语言，被设计用来向HTML页面添加交互行为，利用它可以完成以下任务。

• 可以将文本动态的放入HTML页面。类似于这样的一段Javascript声明可以将一段可变的文本放入HTML页面：document.write(""+name+"")
• 可以对事件做出响应。例如页面载入完成或者当用户单击某个HTML元素时，调用指定的Javascript程序。
• 可以读写HTML元素。Javascript程序可以读取及改变当前HTML页面内某个元素的内容，如文本框中的输入内容。
• 可被用来验证用户输入的数据。在数据被提交到服务器之前，Javascript可被用来验证这些数据。
• 可被用来检测访问者的浏览器，并根据所检测到的浏览器，为这个浏览器载入相应的页面。
• 可被用来创建cookies，用来存储和取回位于访问者的计算机中的信息。
• 可利用Ajax技术来完成和服务器的直接通信，无刷新的修改当前HTML页面内容

2.JS基础

JS实例：

2.1语法结构

JS是一个内嵌于HTML的脚本语言，不能独立存在，使用script作为它的脚本标记。必须以

代码位置：script页面中的位置决定了什么时候装载它们

• 位于head头部

  把脚本放在head，在页面载入的同时，就载入了脚本，如果希望在其他所有内容之前装载脚本，就要确保脚本在head部分

  通常这个区域的脚本是为body区域程序代码所调用的事件处理函数

• 位于body主体

  当你把脚本放置于body 部分后，在页面载入时不属于某个函数的脚本就会被执行，执行后的输出就成为页面的内容

代码可以直接写在事件处理部分

也可以写成直接单独于网页的脚本文件

		   //重点是前面的src

Javascript脚本语言的基本构成是由语句、函数、对象、方法、属性等来实现编程的，在程序结构上同样是有顺序、分支、循环三种基本结构

2.2语句和语句块

2.2.1语句

JS语句是发给浏览器的命令，以便告诉浏览器相关操作

document.write("欢迎进入Javascript学习之旅！");

语句类型

1. 变量声明语句；
2. 输入输出语句；
3. 表达式语句；
4. 程序流向控制语句；
5. 返回语句

2.2.2语句块

语句块是多条语句构成的，其两边用“{”和“}”封闭起来

2.2.3代码

**代码就是由若干条语句或语句块构成的执行体。**浏览器按照代码编写的逻辑顺序逐行执行，直至碰到结束符号或者返回语句

2.3函数

2.3.1基本函数

函数代表了一种特定的功能，一般是由若干条语句构成的。

语法结构：

function 函数名(参数1, 参数2, ... 参数N) { 函数体； }

必须有“function”关键字、自定义的函数名、放在小括号中的可选参数（可以没有参数，但括号必须保留）、以及包含在大括号内的由若干条语句构成的函数体，并且不可以嵌套

• 小括号里的是形参，实际接收到的是实参，形参接受调用函数者传过来的实参值，在函数体中进行处理。

  实参与形参要一一对应，保证类型、顺序和个数的统一。与C语言不同，如果参数不够，不够的参数被设置成underfined类型。

• 有的函数有返回值，即return语句，具体用法基本同C语言

  return语句可以结束程序的执行，也就是说return之后的语句就不会再执行了；利用return可以返回一个结果。return 语句后可以跟上一个具体的值，也可以是简单的变量，还可以是一个复杂的表达式。

2.3.2系统函数

JS中有很多在系统中就已经定义的函数，又称内部方法，可以直接使用

例如：字符串表达式eval

result=eval(“8+9+5/2”);

消息对话框（重要）

是一个系统函数

方法名：prompt(“文本”,“默认值”);

作用：提示框经常用于提示用户在进入页面前输入某个值。当提示框出现后，用户需要输入某个值，然后单击“ok/确认”或“cancel/取消”按钮才能继续操纵。

如果用户单击确认，那么返回值为输入的值。如果用户单击取消，那么返回值为 null。

2.4注释

2.4.1单行注释

使用“//”，同C语言，单独写在一行也可，跟在语句后面也可

2.4.2多行注释

使用“”结尾，同C语言

2.5标识符

2.5.1标识符

标识符是计算机语言关于命名的规定。例如程序10-5中函数名show，变量名radius和area，这些名字都是标识符的实例。Javascript关于标识符的规定有：

• 必须使用字母或者下划线开始；

• 必须使用英文字母、数字、下划线组成，不能出现空格或制表符；

• 不能使用Javascript关键词与Javascript保留字；

• 不能使用Javascript语言内部的单词，比如Infinity,NaN,undefined；

• 大小写敏感，也就是说x和X是不一样的两个标识符

2.5.2关键字

关键字对于Javascript程序有着特别的含义，它们可标识程序的结构和功能，所以，在编写代码时，不能用它们作为自定义的变量名或者函数名。

Javascript的关键字
break	case	catch	continue	default
delete	do	else	finally	for
function	if	in	instanceof	new
return	switch	this	throw	try
typeof	var	void	while	with

2.5.3保留字

除了关键字，Javascript还有一些可能未来扩展时使用的保留字，同样不能用于标识符的定义

Javascript的保留字
abstract	boolean	byte	char	class
const	debugger	double	enum	export
extends	final	float	goto	implements
import	int	interface	long	native
package	private	protected	public	short
static	super	synchronized	throws	transient
volatile

2.6变量

使用前一定要声明变量

基本语法：

var 变量名 [=初值][,变量名[=初值] …]

• var是关键字，声明变量时至少要有一个变量，每个变量要起一个合适的名字；
• 变量的起名应该符合标识符的规定，好的名字应该做到见名知意；
• 可以同时声明多个变量；
• 可以在声明变量的同时，直接给变量赋予一个合适的初值。

例：

var account;
var area = 0;
var name = "张华";
var status = true; 
var a,b,c;

---

3.数据类型

虽然Javascript变量表面上没有类型，但是Javascript内部还是会为变量赋予相应的类型，在将来的版本会增加变量类型。

Javascript 有六种数据类型。主要的类型有 number、String、object 以及 Boolean 类型,其他两种类型为 null 和 undefined

3.1String类型

• 字符串是用单引号或双引号来说明的（可以使用单引号来输入包含引号的字符串），如"张华"、'张华’或者"‘张华’"。

• 字符串中每个字符都有特定的位置，首字符从位置 0 开始，第二个字符在位置 1，依此类推。这意味着字符串中的最后一个字符的位置一定是字符串的长度减 1。

3.2数值数据类型（Number）

Javascript 支持整数和浮点数。整数可以为正数、0 或者负数；浮点数可以包含小数点、也可以包含一个 “e”（大小写均可，在科学记数法中表示“10的幂”）、或者同时包含这两项，下面是一些关于数的表示。

NaN:非数字类型。特点：① 涉及到的 任何关于NaN的操作，都会返回NaN ② NaN不等于自身。

isNaN() 函数用于检查其参数是否是非数字值。

3.3其他

3.3.1Boolean 类型

可能的 Boolean 值有 true 和 false。这是两个特殊值，不能用作 1 和 0。

3.3.2undefined 类型

一个为 undefined 的值就是指在变量被创建后，但未给该变量赋值之以前所具有的值。

3.3.3null 类型

null 值就是没有任何值，什么也不表示。

3.3.4object类型

除了上面提到的各种常用类型外，对象也是Javascript中的重要组成部分，这部分将在后面介绍

4.运算符和表达式

（基本上可以套用C语言的知识）

运算符：

算术运算符、赋值运算符、自增、自减运算符、逗号运算符、关系运算符、逻辑运算符、条件运算符、位运算符，也可以根据运算符需要操作数的个数，可以把运算符分为一元运算符、二元运算符或者三元运算符

表达式

由操作数（变量、常量、函数调用等）和运算符结合在一起构成的式子称为“表达式”。

对应的表达式包括：算术表达式、赋值表达式、自增、自减表达式、逗号表达式、关系表达式、逻辑表达式、条件表达式、位表达式

4.1算术表达式

表10-4 算术运算符
运算符	描述	例子（假定a = 2）	结果
+	加	b = a+2	b = 4
-	减	b = a -1	b = 1
*	乘	b = a * 2	b = 4
/	除	b = a / 2	b = 1
%	取模	b = a%2	b = 0
++	自增	b = a++	b = 2
–	自减	b = - -a	b = 1

4.2赋值表达式

简单的赋值运算符由等号（=）实现，只是把等号右边的值赋予等号左边的变量。

基本语法：

• 简单赋值运算：<变量> = <变量> operator <表达式>

• 复合赋值运算：<变量> operator = <表达式>

语法说明：

• 赋值运算是最常用的一种运算符，通过赋值，可以把一个值用一个变量名来表示。

• 例如，area = 3.14 * radius * radius;

• 等号右侧的表达式在复合赋值表达式中被认为是一个整体

4.3关系表达式

关系运算符负责判断两个值是否符合给定的条件，关系运算符包括<、>、==等等，返回的结果为“true”或“false”

用关系运算符和运算对象(操作数)连接起来，符合规则的式子，称”关系表达式”

关系表达式一般用于分支和循环控制语句中，根据逻辑值的真假来决定程序的执行流向，一个简单的判断最大值的例子见程序10-7。

基本语法：

op1 operator op2

4.4逻辑表达式

使用逻辑运算符判断一个或两个值最终返回逻辑值是”ture“或”false“，包括的运算符有**！、||、 &&**

基本语法：

• 双元运算符：　boolean_expression operator boolean_expression

• 逻辑非运算符：!boolean_expression

语法说明：

逻辑运算符包括两个双元运算符逻辑或(||)和逻辑与(&&)，要求两端的操作数类型均为逻辑值，逻辑非!则是一个单元运算符，它们的运算结果还是逻辑值，其使用的场合和关系表达式类似，一般都用于控制程序的流向，如分支条件、循环条件等等。

4.4条件表达式

条件运算符是"? :"，是一个3元运算符，也就是该运算涉及到了3个操作数。

基本语法：

variable = boolean_expression ? true_value : false_value;

语法说明：

该条件表达式表示，如果boolean_expression的结果为true，则variable的值取true_value，否则取false_value。

例如：取两者最大值

var max = (v1 >v2) ? v1 : v2;

document.getElementById(‘max’).value = max;

4.5其他表达式

4.5.1逗号运算符

逗号运算符负责连接多个Javascript表达式，允许在一条语句中执行多个表达式，例如：

var x=1 , y=2 , z=3;

x=y+z , y=x+z;

4.5.2一元加法和一元减法

• 一元加法和一元减法和数学上的用法是一致的，如：

var x = 10;

x = +10; //x的值还是10，没有影响

x = -10; //x的值是-10，对值求反

• 当操作数是字符串时，其功能却有一些特别之处，如：

var s = “20”;

var x = +s; //这条语句把字符串s转换成了数值类型，赋值给变量x

var y = -s; //这条语句把字符串s转换成了数值类型，赋值给变量y，其值为-20

4.5.3位运算符

位运算是在数的二进制位的基础上进行的操作，具体同C语言，这里略

---

5.程序结构（简述）

任何算法都可以由最基本的顺序、分支、循环三种结构组成

5.1顺序结构

顺序程序是最基本的程序设计思路。顺序程序执行是按照语句出现的顺序一步一步从上到下运行，直到最后一条语句。

5.2分支结构

根据不同的条件完成不同的行为。可以在代码中使用条件语句来完成这个任务

有下面几种条件语句：

• if 语句：在一个指定的条件成立时执行代码。

• if…else 语句：在指定的条件成立时执行代码，当条件不成立时执行另外的代码。

• if…else if…else 语句：使用这个语句可以选择执行若干块代码中的一个。

• switch 语句：使用这个语句可以选择执行若干块代码中的一个。

（基本用法同C语言）

5.3循环结构

• for循环
• while循环
• do…while循环

---

6.对象（简述）

JS程序分为两种：面向过程程序设计、面向对象程序设计

既支持传统的结构化编程，同时也支持面向对象的编程（OOP）

用户在编程时可以定义自己的对象类型。本节将重点介绍内建的Javascript对象，使用浏览器的内部对象系统, 可实现与HTML文档乃至浏览器本身进行交互。建立对象的目的是将围绕对象的属性和方法，封装在一起提供给程序设计人员使用，从而减轻编程人员的劳动，提高设计Web页面的能力。

Javascript 的核心对象包括 :

Array（数组），Boolean（布尔），Date（日期），Function，Math，Number，Object 和 String等。这些对象同时在客户端和服务器端的 Javascript 中使用