Day48 Javascript详解
文章目录
- [Day48 Javascript详解](#Day48 Javascript详解)
-
- 一、什么是javascript
- 二、javascript特点
- [三、 Javascript的历史](#三、 Javascript的历史)
- [四、Javascript vs Java](#四、Javascript vs Java)
- 五、JS的基本数据类型
- 六、JS基本数据类型的特殊点
- 七、数组
一、什么是javascript
JavaScript是一种高级的、解释型的编程语言,主要用于在网页上实现交互功能。它是一种脚本语言,可以嵌入到HTML页面中,通过浏览器解释执行,实现动态效果和用户交互。
Javascript是基于对象和事件驱动的脚本语言,主要是嵌入到HTML中,应用在客户端,动态操作网页元素,也可以作用于服务端。
二、javascript特点
- 动态性:JavaScript是一种动态语言,可以在运行时修改和调整程序的行为。
- 事件驱动:通过事件处理程序来响应用户的交互操作,实现网页的动态效果。
- 跨平台性:JavaScript可以在各种操作系统和浏览器中运行,实现跨平台的网页开发。
- 交互性:表单校验,信息提示,动态数据图表,ajax异步提交,解析服务端响应数据等等。
- 安全性:不可以直接访问本地硬盘。
- 轻量级:JavaScript代码通常是以文本形式嵌入到HTML中,不需要额外的编译步骤,使得开发和调试更加便捷。
三、 Javascript的历史
- 1995年:JavaScript最初由Netscape公司的Brendan Eich设计开发,最初被称为LiveScript。在Netscape Navigator 2.0中首次发布,用于增强网页的交互性和动态效果。
- 1996年:Netscape将LiveScript更名为JavaScript,与Sun Microsystems的Java合作,推动JavaScript的发展。微软也推出了类似的脚本语言JScript。
- 1997年:ECMAScript标准化组织发布了第一版ECMAScript标准(ECMA-262),以规范JavaScript语言的实现。这一标准定义了JavaScript的核心语法和功能。
- 2000年:DOM(Document Object Model)标准化,使JavaScript可以操作网页上的元素和内容,实现动态页面效果。
- 2005年:Ajax(Asynchronous JavaScript and XML)的概念被提出,使得通过JavaScript异步加载数据成为可能,极大地提升了网页的交互性和用户体验。
- 2009年:Node.js项目启动,使JavaScript不仅可以在浏览器中运行,还可以在服务器端运行,开启了JavaScript全栈开发的时代。
- 2015年:ECMAScript 6(ES6)发布,引入了许多新的语法和特性,如箭头函数、模块化、类等,大大提升了JavaScript的开发效率和可维护性。
- 至今:JavaScript持续发展,成为最流行的前端开发语言之一,涵盖了前端开发、后端开发、移动应用开发等多个领域,拥有庞大的开发者社区和丰富的生态系统。
四、Javascript vs Java
JavaScript只需浏览器解析就可以执行,而java需要先编译成字节码文件,然后通过JVM来执行。
JavaScript是一种弱类型语言,java是强类型语言。
一个完整 JavaScript实现由以下3个部分组成
DOM -- Document Object Model
BOM -- Browser Object Model
五、JS的基本数据类型
1、分类:
- boolean - 布尔类型
- undefined - 未定义类型
- null - 空类型
- number - 数值型
- string - 字符串类型
2、代码示例:
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
//number - 数值型
//注意:number类型不分整数和小数
var num = 100;
console.log(num);//100
num = 123.123;
console.log(num);//123.123
//string - 字符串类型
//注意:string类型的值可以用单引号也可以用双引号括起来
var str = 'abc';
console.log(str);
str = "abc";
console.log(str);
//boolean - 布尔类型
var bool = true;
console.log(bool);//true
bool = false;
console.log(bool);//false
//undefined - 未定义类型
var v;
console.log(v);
v = undefined;
console.log(v);
//null - 空类型
var xx = null;
console.log(xx);
</script>
</body>
</html>
六、JS基本数据类型的特殊点
1、特殊点:
- 字符串(String) :
- 字符串是以单引号(' ')或双引号(" ")包裹的文本数据。
- 字符串是不可变的,一旦创建就不能被修改,任何对字符串的操作都会返回一个新的字符串。
- 数字(Number) :
- JavaScript中的数字是浮点数,没有整型和浮点型之分。
- 存在特殊的数字值,如NaN(Not a Number)、Infinity(无穷大)和 -Infinity(负无穷大)。
- 布尔值(Boolean) :
- 布尔值只有两个取值:true和false。
- 布尔值常用于条件判断和逻辑运算。
- 空(Null) :
- 表示一个空值或不存在的值。
- typeof null 的结果是 "object",这是 JavaScript 的一个历史 Bug。
- 未定义(Undefined) :
- 表示未赋值的变量或属性。
- 未定义的变量会有一个默认值 undefined。
- 符号(Symbol) :
- ES6新增的数据类型,表示独一无二的值。
- 可以用来创建对象的私有属性名。
2、代码示例:
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
//number类型的特殊点
//注意:Infinity表示无穷大
console.log(Infinity + (-Infinity));//NaN - Not a Number
//string类型的特殊点
//注意:string加号是字符串拼接符,其余是算数运算符
var str1 = "10";
var str2 = "3";
console.log(str1 + str2);//103
console.log(str1 - str2);//7
console.log(str1 * str2);//30
console.log(str1 / str2);//3.3333333335
console.log(str1 % str2);//1
//boolean类型的特殊点
//注意:""、0、undefined、null表示false
if(""){
console.log("true");
}else{
console.log("false");
}
if(0){
console.log("true");
}else{
console.log("false");
}
if(undefined){
console.log("true");
}else{
console.log("false");
}
if(null){
console.log("true");
}else{
console.log("false");
}
//undefined vs null
var v1 = undefined;
var v2 = null;
console.log(typeof v1);//undefined
console.log(typeof v2);//object
//== vs ===
//==判断两个值是否相等
//===判断两个值+类型是否相等
var v3 = 10;
var v4 = "10";
console.log(v3 == v4);//true
console.log(v3 === v4);//false
</script>
</body>
</html>
七、数组
1、基本步骤:
- 创建一个数组
- var arr = [1,2,3];
- 更新数组的元素
- 添加数组的元素
- 删除数组的元素(delete arr[1],注意,此处只是将该元素留空,数组的长度并不会发生变化)
注意:数组的数组:var a = [[1,2,3],[4,5,6]];
2、代码示例:
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var arr = ["小俊","小杨","小雷"];
//设置指定下标上的元素
arr[0] = "小刘";
//获取指定下标上的元素
console.log("获取指定下标上的元素:" + arr[0]);//小刘
//获取元素个数
console.log("获取元素个数:" + arr.length);
//添加元素
arr[3] = "小陈";
arr[4] = "小李";
arr[10] = "小王";
//删除元素
delete arr[4];
console.log("--------------------");
//遍历数组 - for循环
for(var i = 0;i<arr.length;i++){
console.log(arr[i]);
}
console.log("--------------------");
//遍历数组 -- for-in
//注意:遍历有效元素的下标(undefined的元素认为是无效元素)
for(var index in arr){
console.log(arr[index]);
}
</script>
</body>
</html>