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 创建实例对象,直接使用即可;

在这里插入图片描述

在这里插入图片描述


版权声明:本文为pary__for原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。