JavaScript入门：前端开发的基础
发表时间: 2022-03-24 11:56
JavaScript概述
- 1992年Nombas开发出C-minus-minus(C--)的嵌入式脚本语言(最初绑定在CEnvi软件中).后将其改名ScriptEase.(客户端执行的语言)
- Netscape(网景)接收Nombas的理念,(Brendan Eich)在其Netscape Navigator 2.0产品中开发出一套livescript的脚本语言.Sun和Netscape共同完成.后改名叫Javascript
- 微软随后模仿在其IE3.0的产品中搭载了一个JavaScript的克隆版叫Jscript.
- 为了统一三家,ECMA(欧洲计算机制造协会)定义了ECMA-262规范.国际标准化组织及国际电工委员会（ISO/IEC）也采纳 ECMAScript 作为标准（ISO/IEC-16262）。从此，Web 浏览器就开始努力（虽然有着不同的程度的成功和失败）将 ECMAScript 作为 JavaScript 实现的基础。EcmaScript是规范.
二 JavaScript的基础
1 直接编写 <script> alert('hello yuan') </script>2 导入文件 <script src="hello.js"></script>1、声明变量时不用声明变量类型. 全都使用var关键字;
var a;<br>a=3;
2、一行可以声明多个变量.并且可以是不同类型
var name="yuan", age=20, job="lecturer";
3、声明变量时 可以不用var. 如果不用var 那么它是全局变量
4、变量命名,首字符只能是字母,下划线,$美元符 三选一，余下的字符可以是下划线、美元符号或任何字母或数字字符且区分大小写，x与X是两个变量
常量 ：直接在程序中出现的数据值
标识符：
- 由不以数字开头的字母、数字、下划线(_)、美元符号($)组成
- 常用于表示函数、变量等的名称
- 例如：_abc,$abc,abc,abc123是标识符，而1abc不是
- JavaScript语言中代表特定含义的词称为保留字，不允许程序再定义为标识符
2.3.1 数字类型(number)
- 不区分整型数值和浮点型数值;
- 所有数字都采用64位浮点格式存储，相当于Java和C语言中的double格式
- 能表示的最大值是±1.7976931348623157 x 10308
- 能表示的最小值是±5 x 10 -324
整数：
在JavaScript中10进制的整数由数字的序列组成
精确表达的范围是-9007199254740992 (-253) 到 9007199254740992 (253)
超出范围的整数，精确度将受影响
浮点数：
使用小数点记录数据
例如：3.4，5.6
使用指数记录数据
例如：4.3e23 = 4.3 x 1023
16进制和8进制数的表达:
16进制数据前面加上0x，八进制前面加0;16进制数是由0-9,A-F等16个字符组成;8进制数由0-7等8个数字组成
16进制和8进制与2进制的换算:
2.3.2 字符串类型(string)
是由Unicode字符、数字、标点符号组成的序列；字符串常量首尾由单引号或双引号括起；JavaScript中没有字符类型；常用特殊字符在字符串中的表达；
字符串中部分特殊字符必须加上右划线\；常用的转义字符 \n:换行 \':单引号 \":双引号 \:右划线
2.3.3 布尔类型(boolean)
Boolean类型仅有两个值：true和false，也代表1和0，实际运算中true=1,false=0
布尔值也可以看作on/off、yes/no、1/0对应true/false
Boolean值主要用于JavaScript的控制语句，例如：
if (x==1){ y=y+1;}else{ y=y-1; }2.3.4 Null & Undefined类型
Undefined类型
Undefined 类型只有一个值，即 undefined。当声明的变量未初始化时，该变量的默认值是 undefined。
当函数无明确返回值时，返回的也是值 "undefined";
Null类型
另一种只有一个值的类型是 Null，它只有一个专用值 null，即它的字面量。值 undefined 实际上是从值 null 派生来的，因此 ECMAScript 把它们定义为相等的。
尽管这两个值相等，但它们的含义不同。undefined 是声明了变量但未对其初始化时赋予该变量的值，null 则用于表示尚未存在的对象（在讨论 typeof 运算符时，简单地介绍过这一点）。如果函数或方法要返回的是对象，那么找不到该对象时，返回的通常是 null
2.4 运算符
算术运算符： + - * / % ++ -- 比较运算符： > >= < <= != == === !==逻辑运算符： && || ！赋值运算符： = += -= *= /=字符串运算符： + 连接，两边操作数有一个或两个是字符串就做连接运算2.4.1 算术运算符
注意1: 自加自减
假如x=2，那么x++表达式执行后的值为3，x--表达式执行后的值为1；i++相当于i=i+1，i--相当于i=i-1；
递增和递减运算符可以放在变量前也可以放在变量后：--i
var i=10;console.log(i++);console.log(i);console.log(++i);console.log(i);console.log(i--);console.log(--i);注意2: 单元运算符
- 除了可以表示减号还可以表示负号 例如：x=-y
+ 除了可以表示加法运算还可以用于字符串的连接 例如："abc"+"def"="abcdef"
注意3: NaN
var d="yuan"; d=+d; alert(d);//NaN:属于Number类型的一个特殊值,当遇到将字符串转成数字无效时,就会得到一个NaN数据 alert(typeof(d));//Number //NaN特点: var n=NaN; alert(n>3); alert(n<3); alert(n==3); alert(n==NaN); alert(n!=NaN);//NaN参与的所有的运算都是false,除了!=2.4.2 比较运算符
> >= < <= != == === !==
2.4.3 逻辑运算符
if (2>1 && [1,2]){ console.log("条件与")}// 思考返回内容?console.log(1 && 3);console.log(0 && 3);console.log(0 || 3);console.log(2 || 3);2.5 流程控制
- 顺序结构(从上向下顺序执行)
- 分支结构
- 循环结构
2.5.1 顺序结构
<script> console.log(“星期一”); console.log(“星期二”); console.log(“星期三”); </script>2.5.1 分支结构
if-else结构：
if (表达式){ 语句１; ...... } else{ 语句２; ..... }功能说明：如果表达式的值为true则执行语句1,否则执行语句2
if-elif－else结构：
if (表达式1) { 语句1;}else if (表达式2){ 语句2;}else if (表达式3){ 语句3;} else{ 语句4;}switch-case结构
switch基本格式switch (表达式) { case 值1:语句1;break; case 值2:语句2;break; case 值3:语句3;break; default:语句4;}switch(x){case 1:y="星期一"; break;case 2:y="星期二"; break;case 3:y="星期三"; break;case 4:y="星期四"; break;case 5:y="星期五"; break;case 6:y="星期六"; break;case 7:y="星期日"; break;default: y="未定义";}2.5.2 循环结构
for循环：
语法规则： for(初始表达式;条件表达式;自增或自减) { 执行语句 …… }功能说明：实现条件循环，当条件成立时，执行语句1，否则跳出循环体
for( 变量 in 数组或对象) { 执行语句 …… }while循环：
语法规则：while (条件){ 语句1； ...}功能说明：运行功能和for类似，当条件成立循环执行语句花括号{}内的语句，否则跳出循环；同样支持continue与break语句。
2.5.3 异常处理
try { //这段代码从上往下运行，其中任何一个语句抛出异常该代码块就结束运行}catch (e) { // 如果try代码块中抛出了异常，catch代码块中的代码就会被执行。 //e是一个局部变量，用来指向Error对象或者其他抛出的对象}finally { //无论try中代码是否有异常抛出（甚至是try代码块中有return语句），finally代码块中始终会被执行。}三 JavaScript的对象
在JavaScript中除了null和undefined以外其他的数据类型都被定义成了对象，也可以用创建对象的方法定义变量，String、Math、Array、Date、RegExp都是JavaScript中重要的内置对象，在JavaScript程序大多数功能都是基于对象实现的。
<script language="javascript">var aa=Number.MAX_VALUE; //利用数字对象获取可表示最大数var bb=new String("hello JavaScript"); //创建字符串对象var cc=new Date();//创建日期对象var dd=new Array("星期一","星期二","星期三","星期四"); //数组对象</script>3.1 String对象
字符串对象创建
字符串创建(两种方式)
① 变量 = “字符串”
② 字串对象名称 = new String (字符串)
var str1="hello world";
var str1= new String("hello word");
字符串对象的属性和函数
x.length －－－－获取字符串的长度 x.toLowerCase() －－－－转为小写 x.toUpperCase() －－－－转为大写 x.trim() －－－－去除字符串两边空格 －－－－字符串查询方法x.charAt(index) －－－－str1.charAt(index);－－－－获取指定位置字符，其中index为要获取的字符索引x.indexOf(findstr,index)－－－－查询字符串位置x.lastIndexOf(findstr) x.match(regexp) －－－－match返回匹配字符串的数组，如果没有匹配则返回nullx.search(regexp) －－－－search返回匹配字符串的首字符位置索引 示例： var str1="welcome to the world of JS!"; var str2=str1.match("world"); var str3=str1.search("world"); alert(str2[0]); // 结果为"world" alert(str3); // 结果为15 －－－－子字符串处理方法x.substr(start, length) －－－－start表示开始位置，length表示截取长度x.substring(start, end) －－－－end是结束位置x.slice(start, end) －－－－切片操作字符串 示例： var str1="abcdefgh"; var str2=str1.slice(2,4); var str3=str1.slice(4); var str4=str1.slice(2,-1); var str5=str1.slice(-3,-1); alert(str2); //结果为"cd" alert(str3); //结果为"efgh" alert(str4); //结果为"cdefg" alert(str5); //结果为"fg"x.replace(findstr,tostr) －－－－ 字符串替换x.split(); －－－－分割字符串 var str1="一,二,三,四,五,六,日"; var strArray=str1.split(","); alert(strArray[1]);//结果为"二" x.concat(addstr) －－－－ 拼接字符串3.2 Array对象
3.2.1 数组创建
创建数组的三种方式：
创建方式1:var arrname = [元素0,元素1,….]; // var arr=[1,2,3];创建方式2:var arrname = new Array(元素0,元素1,….); // var test=new Array(100,"a",true);创建方式3:var arrname = new Array(长度); // 初始化数组对象: var cnweek=new Array(7); cnweek[0]="星期日"; cnweek[1]="星期一"; ... cnweek[6]="星期六";
鲁公网安备37020202000738号