对JavaScript有一个初步了解，为 数据可视化 等学科做一个基础准备
文章目录
1.概述
JS是一个运行于浏览器环境中的语言，是一种嵌入到html页面内的解释型程序设计语言，被设计用来向HTML页面添加交互行为，利用它可以完成以下任务。
- 可以将文本动态的放入HTML页面。类似于这样的一段JavaScript声明可以将一段可变的文本放入HTML页面：document.write("
"+name+"
") - 可以对事件做出响应。例如页面载入完成或者当用户单击某个HTML元素时，调用指定的JavaScript程序。
- 可以读写HTML元素。JavaScript程序可以读取及改变当前HTML页面内某个元素的内容，如文本框中的输入内容。
- 可被用来验证用户输入的数据。在数据被提交到服务器之前，JavaScript可被用来验证这些数据。
- 可被用来检测访问者的浏览器，并根据所检测到的浏览器，为这个浏览器载入相应的页面。
- 可被用来创建cookies，用来存储和取回位于访问者的计算机中的信息。
- 可利用Ajax技术来完成和服务器的直接通信，无刷新的修改当前HTML页面内容
2.JS基础
JS实例：
<html>
<title>这是我的第一个JavaScript程序</title>
<body>
<script type="text/javascript">
document.write("欢迎进入JavaScript学习之旅!");
</script>
</body>
</html>
2.1语法结构
JS是一个内嵌于HTML的脚本语言，不能独立存在，使用script作为它的脚本标记。必须以<script type="text/javascript"开头，以</script>结尾，在中间书写
<script type="test/javascript">
...
</script>
代码位置：script页面中的位置决定了什么时候装载它们
-
位于head头部
把脚本放在head，在页面载入的同时，就载入了脚本，如果希望在其他所有内容之前装载脚本，就要确保脚本在head部分
通常这个区域的脚本是为body区域程序代码所调用的事件处理函数
-
位于body主体
当你把脚本放置于body 部分后，在页面载入时不属于某个函数的脚本就会被执行，执行后的输出就成为页面的内容
代码可以直接写在事件处理部分
<html>
<title>这是我的第一个JavaScript程序</title>
<body onload='alert("欢迎进入JavaScript学习之旅!");'>
</body>
</html>
也可以写成直接单独于网页的脚本文件
<html>
<head>
<script src="xxx.js"></script> //重点是前面的src
</head>
<body>
</body>
</html>
JavaScript脚本语言的基本构成是由语句、函数、对象、方法、属性等来实现编程的，在程序结构上同样是有顺序、分支、循环三种基本结构
2.2语句和语句块
2.2.1语句
JS语句是发给浏览器的命令，以便告诉浏览器相关操作
document.write("欢迎进入JavaScript学习之旅！");
语句类型
- 变量声明语句；
- 输入输出语句；
- 表达式语句；
- 程序流向控制语句；
- 返回语句
2.2.2语句块
语句块是多条语句构成的，其两边用“{”和“}”封闭起来
<script type="text/javascript">
var color=”red”;
if(color==”red”) { //起始
document.write("现在颜色是红色!");
alert("现在颜色是红色!");
} //结束
</script>
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语言，单独写在一行也可，跟在语句后面也可
<script type="text/javascript">、
//函数show()是在页面加载时被调用的。
function show(){
alert("欢迎进入JavaScript学习之旅!"); //一个执行时弹出的信息框
}
</script>
2.4.2多行注释
使用“/*”开头，“*/”结尾，同C语言
<script type="text/javascript">、
/*暂时不需要执行函数show()
function show(){
alert("欢迎进入JavaScript学习之旅!");
}*/
</script>
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 中使用
1001
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
