JavaWeb——JavaScript基础知识

一、JavaScript简述

• HTML：用来写网页；
• CSS：美化页面；
• JavaScript：控制页面特效；
  
  
• JavaScript：脚本语言；要嵌入到其他语言，结合使用；直接被浏览器解析执行；没有访问系统文件权限（安全）；无需编译，直接由上到下解释执行；
• Java：编程语言；独立运行；先编译再执行；
• Java 和 JavaScript 没有任何直接关系；

二、JavaScript组成

• ECMAScript：（核心）规定了 JS 的语法和基本对象；
• DOM：文档对象模型：处理网页内容的方法和接口；
  标记型文档，HTML；
• BOM：浏览器对象模型：与浏览器交互的方法和接口；
  

三、JavaScript的引入

1. 内部脚本

• 当前页面内部写 script 标签，script 内部即可书写 JavaScript 代码；

<script type="text/javascript">
	JavaScript 代码
</script>

2. 外部引入

• 在 HTML 文档中，通过<script src="">标签引入.js文件；

<script type="text/javascript" src="javascript文件路径"></script>

• 注意：外部引用时 script 标签内不能有 script 代码，即使写了 也不会执行；

<script type="text/javascript" src="javascript文件路径">
	//这部分代码不会被执行，被引入的 JS 文件覆盖；
</script>

3. 放置位置

• script标签的放置位置为：Body 结束标签前；
• 优点：保证HTML展示内容优先加载，最后加载脚本；增强用户体验性；

四、JavaScript语法

1. 注释

• 单行注释：//
• 多行注释：/**/

2. 变量

（1）变量简述

• 变量的声明：var 变量名;，默认值为 underfined；
• 变量的声明和赋值：var 变量名 = 值;
• 变量区分大小写；

（2）基本数据类型

• string：字符串类型，’ ’ 和 " " 都代表字符串；
• boolean：布尔类型，true 和 false；
• number：数字类型，任意数字；
• null：空，一个占位符；
• underfined：未定义类型.，表示变量声明了但未赋值；underfined == null

（3）注意

• JavaScript 是弱类型语言，一个变量声明好之后，可以赋予任意类型的值；
• 用 typeof 运算符可以分辨变量的值属于哪种基本数据类型；

typeof(str1);

（4）引用数据类型

• 所处理的引用数据类型都是对象；
• 标准创建方式：

var str = new String();
var str = new String;

3. 运算符

（1）比较运算符

（2）逻辑运算符

4. 正则对象

（1）RegExp 对象的创建方式

• 直接量方式的正则是对象，不是字符串，别用引号；
  直接量中存在边界，即^代表开始，$代表结束；

var reg = /^表达式$/			（直接量方式）

（2）test 方法

• 返回 true 或 false，判断字符串是否符合正则表达式；

（3）注意事项

• /^表达式$/，直接量方式，必须全部字符符合正则表达式，才能返回 true；（适用于表单校验）
• /表达式/，普通方式，必须全部字符不符合正则表达式，才能返回 false；
  只要有一个符合，则返回 true；（适用于字符串查找、替换）

5. JS数组对象

（1）JS 数组的特性

• JS 数组可以看作 Java 中的 ArrayList 集合；
• 数组中每个成员没有类型限制，可以存放任意类型；
• 数组的长度可以自动修改；

（2）JS 数组的四种创建方式

① var arr = [1,2,3,"a",true]; //数组长度为5；
② var arr = new Array(); //数组长度默认为0；
③ var arr = new Array(4); //数组长度为4，每个元素是undefined；
④ var arr = new Array(“a”,5); //数组元素是"a",5；

（3）JS 数组的常用属性/方法

• length：长度；
• join()：把数组所有元素根据 分隔符进行拼接，最终返回一个字符串；（不会影响原数组）
• pop()：删除并返回数组最后一个元素；
• push()：向数组末尾添加一个或多个元素，并返回新的长度；
• reverse()：翻转；（把元素下标进行互换）（会影响原数组）

6. 全局函数

（1）执行

• eval()：计算某个字 符串，并执行其中的 JavaScript 代码；
• 作用：用于增强程序的扩展性；
• 注意：只可以传递原始数据类型 string，传递 String 对象无作用；
  

（2）编码和解码

URL 编码作用：保证数据传递的完整性；

• encodeURI()：把字符串编码为 URI；
• decodeURI()：解码某个编码的 URI；

• URI 和 URL 的区别：
  URI 是统一资源标识符；标识资源详细名称；（包含资源名）
  URL 是统一资源定位器；定位资源的网络位置；（包含 http://）
  （资源：可以通过浏览器访问的信息，如：图片、文本、HTML、CSS 等）
  

（3）字符串转数字

• parseInt()：解析一个字符串并返回一个整数（小数点后面不管）；
• parseFloat()：解析一个字符串并返回一个浮点数；

7. 自定义函数

（1）函数格式

function 方法名(参数列表){

}

• 无需定义返回值类型；
• 参数定义无需使用 var 关键字，否则报错；

（2）函数的使用

• JavaScript 函数调用执行完毕一定有返回值，值及类型根据 return 决定，如果未 return 具体值，返回值为 undefined；
• JavaScript 函数名若同名，则不存在方法重载，只有方法相互覆盖，最后定义的函数覆盖之前的定义；
• JavaScript 不存在函数重载，所以仅根据方法名来调用函数，即使实参与形参不匹配，也不会影响正常调用；

8. 自定义对象

（1）function 构造函数

• JavaScript 中的引用数据类型都是对象，而对象在 JavaScript 中可以调用函数来表示；
• 相当于 Java 中创建的某个 class 类；

无形参格式：
function 对象名(){
	函数体
}

带参数格式：
function 对象名(参数对象){
	函数体
}

有属性格式：
function 对象名(){
	this.属性名1 = 属性值1；
	this.属性名2 = 属性值2；
}

属性定义方式

• this 关键字，在对象的声明定义阶段，定义一个属性；
• 创建对象后，使用 对象.属性 方式，动态定义属性；
  

（2）对象直接量

var 对象名 = {属性名1:"属性值1", 属性名2:"属性值2", 属性名3:"属性值4"...};

注意：该方式直接创建出实例对象，无需构建函数，无需再 new 创建实例对象，直接使用即可；