前端基础之Javascript
一 . JavaScript概述
Web前端有三层 :
HTML : 从语义角度,描述页面结构
CSS : 从审美角度,描述样式(美化页面)
JavaScript : 从交互角度,描述行为(提升用户体验)
JavaScript的历史
布兰登 • 艾奇（Brendan Eich，1961年～），1995年在网景公司，发明的JavaScript。
一开始JavaScript叫做LiveScript，但是由于当时Java这个语言特别火，所以为了傍大牌，就改名为JavaScript.
同时期还有其他的网页语言，比如VBScript、JScript等等，但是后来都被JavaScript打败了，所以现在的浏览器中，只运行一种脚本语言就是JavaScript.
ECMAScript
ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association）制定的标准。
JavaScript是由公司开发而成的，问题是不便于其他的公司拓展和使用。所以欧洲的这个ECMA的组织，牵头制定JavaScript的标准，取名为ECMAScript。
尽管 ECMAScript 是一个重要的标准，但它并不是 JavaScript 唯一的部分，当然，也不是唯一被标准化的部分。实际上，一个完整的 JavaScript 实现是由以下 3 个不同部分组成的：
- 核心（ECMAScript）
- 文档对象模型（DOM） Document object model (整合js，css，html)
- 浏览器对象模型（BOM） Broswer object model（整合js和浏览器）
- Javascript 在开发中绝大多数情况是基于对象的.也是面向对象的.
简单地说，ECMAScript 描述了以下内容：
- 语法
- 类型
- 语句
- 关键字
- 保留字
- 运算符
- 对象 (封装 继承 多态) 基于对象的语言.使用对象.
JavaScript的介绍
● JavaScript 是弱类型的语言 , 变量值需要用 var 来声明
var a;
●JavaScript 是有界面效果的
●JavaScript 是前台语言,运行在用户的终端页面上,而不是服务器上.就是一个简单的制作页面效果的语言,服务于页面的交互效果,美化,绚丽,不能操作数据库.
JavaScript 的特点 :
● 简单易用 : 可以使用任何文本编辑工具编写,只需要浏览器就可以执行.
● 解释执行(解释语言) : 事先不编译,逐行执行 , 无需进行严格的变量声明.
● 基于对象 : 内置大量现成对象,编写少量程序可以完成目标.
二 . 语法与书写规范
在页面中，我们可以在body标签中放入<script type=”text/javascript”></script>标签对儿，<script type=”text/javascript”></script>标签对儿
<script type="text/javascript"> </script>
alert语句
alert(英文翻译为"警报")的用途 : 弹出"警告框"
语法规则
(1) . JavaScript 对缩进 , 换行 , 空格不感兴趣.
备注 : 每一条语句末尾要加上分号 , 虽然分号不是必须加的,但是为了程序今后要压缩,如果不加,压缩之后将无法运行.
(2) . 所以的符号,都是英语的. 比如 括号 . 引号 , 分号
(3) . JavaScript 的注释 :
单行注释 :
// 这是注释
多行注释 :
/* 多行注释1 多行注释2 */
备注：sublime中，单行注释的快捷键是ctrl+/，多行注释的快捷键是ctrl+shift+/。
控制台输出 : console.log("")
console.log("")表示在控制台中输出。console表示“控制台”，log表示“输出”。
控制台在Chrome浏览器的F12中。控制台是工程师、程序员调试程序的地方。程序员经常使用这条语句输出一些东西，来测试程序是否正确。
用户输入 : prompt() 语句
prompt() 就是专门弹出能够让用户输入的对话框.
上方代码中 ,用户输入的内容,奖杯传入的变量a 里面 .w我们可以打开 f12 打开控制台查看结果.
prompt() 语句中,用户不管输入什么内容,都是字符串.
alert 和 prompt 的区别 :
alert("从前有座山"); //直接使用，不需要变量
var a = prompt("请输入一个数字"); // 必须用一个变量，来接收用户输入的值
直接量 : 数字和字符串
"直接量" 即 "常量" ,也称为"字面量" . 看见什么,他就是什么.
简单的直接量有两种 : 数字 字符串
(1) . 数值的直接量的表达非常简单,写上去就行了,不需要任何的符号.
alert(666); // 666是数字,所以不需要加引导
(2) . 字符串也很简单 , 但一定要加上引号,可以是单词,句子等.
变量
var a = 100;
var是英语"variant"变量的缩写. 后面要加一个空格 , 空格后面的东西就是"变量名".
● 定义变量 : var 就是一个关键字 , 用来定义变量,所谓关键字 , 就是有特殊功能的小词语. 关键字后面一点要有空格隔开.
● 变量的赋值 : 等号表示赋值 , 将等号右边的值 , 赋值给左边的变量.
● 变量名 : 我们可以给变量任意的取名字.
a 和 b 都可以, 只是b 方法将 定义和赋值放到一起.
变量的命名规范 : 只能由英语字母、数字、下划线、美元符号$构成，且不能以数字开头，并且不能是JavaScript保留字。(同一个字母大写和小写是两个变量)
变量的类型
变量里面能够存储数字 ,字符串等, 变量将会自动的根据存储内容的类型不同,来决定自己的类型.
数值型
如果一个变量中,存放了数字,那么这个变量就是数值型的.
var a = 100; //定义了一个变量a，并且赋值100 console.log(typeof a); //输出a变量的类型
typeof() 表示 获取变量的类型, 语法 : typrof 变量
在JavaScript中，只要是数，就是数值型(number)的。无论整浮、浮点数（即小数）、无论大小、无论正负，都是number类型的。
字符串类型 : string
var a = "abcde"; var b = "海贼王路飞"; var c = "123123"; var d = "哈哈哈哈哈"; var e = ""; //空字符串 console.log(typeof a); console.log(typeof b); console.log(typeof c); console.log(typeof d); console.log(typeof e);
连字符和加号的区别 :
键盘上的+可能是连字符，也可能是数字的加号。如下：
console.log("我" + "爱" + "你"); //连字符，把三个独立的汉字，连接在一起了
console.log("我+爱+你"); //原样输出
console.log(1+2+3); //输出6
总结：如果加号两边都是数值，此时是加。否则，就是连字符（用来连接字符串）。
变量值的传递(赋值)
语句 :
a = b
把 b 的值赋值给 a , b 不变 .
将等号右边的值,赋值给左边的变量: 等号右边的变量,值不变.
注意 :
<script type="text/javascript">
var a = "3";
var b = 2;
console.log(a-b)
</script>
// 结果等于 1
效果：（注意，字符串 - 数值 = 数值）
变量格式的转换
parseInt()可以将字符串转数字。parse表示“转换”，Int表示“整数”（注意Int的拼写）。例如：
字符串转数字的方法：
parseInt("5");
parseInt()还具有以下特性：
（1）带有自动净化的功能；只保留字符串最开头的数字，后面的中文自动消失。例如：
console.log(parseInt("2018你真帅！！");
（2）自动带有截断小数的功能：取整，不四舍五入。
var a = parseInt(5.8) + parseInt(4.7); console.log(a); ////////////////////////////////////////////////////////// var a = parseInt(5.8 + 4.7); console.log(a);
三 . 数据类型
/* number ----- 数值 boolean ----- 布尔值 string ----- 字符串 undefined ----- undefined null ----- null *
3.1 基础数据类型
3.1.1 数字类型(number)
var a = 123; //typeof 检查当前变量是什么数据类型 console.log(typeof a) //特殊情况 var a1 = 5/0; console.log(typeof e1) //Infinity 无限大. number类型
3.1.2 字符串类型(string)
var str = '123' console.log(typeof str)
3.1.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; }
3.1.4 null 与 undefined
Undefined类型
Undefined 类型只有一个值，即 undefined。当声明的变量未初始化时，该变量的默认值是 undefined。
当函数无明确返回值时，返回的也是值 "undefined";
var d1; //表示变量未定义 console.log(typeof d1)
Null类型
另一种只有一个值的类型是 Null，它只有一个专用值 null，即它的字面量。值 undefined 实际上是从值 null 派生来的，因此 ECMAScript 把它们定义为相等的。
尽管这两个值相等，但它们的含义不同。undefined 是声明了变量但未对其初始化时赋予该变量的值，null 则用于表示尚未存在的对象（在讨论 typeof 运算符时，简单地介绍过这一点）。如果函数或方法要返回的是对象，那么找不到该对象时，返回的通常是 null。
var c1 = null;//空对象. object console.log(c1)
3.2 运算符
(1) . 赋值运算符
以 var x = 12 , y = 5; 来演示 :
(2) . 算数运算符
以 var a = 5 , b = 2; 为例 :
注意 : var x = a++; 先将a的值赋值给x , x输出5 ; 在对a++,a就是6.(--同理)
(3) . 比较运算符
以 var a = 5;
(4) . 特殊情况
// 不能对字符串进行+运算 只能拼接 var a1 = '1'; var a2 = '2'; console.log(a1-a2) //12
var b1 = 'one'; var b2 = 'two'; // NaN. ==== not a number 是number类型 console.log(typeof(b1*b2))
3.3 数据类型转换
将数值类型-->字符串类型
1.隐式转换 :
var n1 = 123; var n2 = '123'; var n3 = n1+n2; // 隐式转换 console.log(typeof n3);
2.强制类型转换:
// 强制类型转换String(),toString() var str1 = String(n1); console.log(typeof str1); var num = 234; console.log(num.toString())
将字符串类型-->数值类型
var stringNum = '789.123wadjhkd'; var num2 = Number(stringNum); console.log(num2) // parseInt()可以解析一个字符串 并且返回一个整数 console.log(parseInt(stringNum)) console.log(parseFloat(stringNum));
将任何数据类型-->boolean类型
var b1 = '123'; var b2 = 0; var b3 = -123 var b4 = Infinity; var b5 = NaN; var b6; //undefined var b7 = null; // 非0既真 console.log(Boolean(b7))
3.4 流程控制
(1) . if , if-else , if-else if-else
var ji = 20; if(ji >= 20){ console.log('恭喜你，吃鸡成功，大吉大利') } alert('alex');//下面的代码还会执行
var ji = 20; if(ji>=20){ console.log('恭喜你，吃鸡成功，大吉大利') }else{ console.log('很遗憾 下次继续努力') }
if (true) { //执行操作 }else if(true){ //满足条件执行 }else if(true){ //满足条件执行 }else{ //满足条件执行 }
注意 : 浏览器解析代码的顺序是 : 从上往下执行 , 从左往右
(2) . 逻辑与&& , 逻辑或||
//1.模拟 如果总分 >400 并且数学成绩 >89分 被清华大学录入 //逻辑与&& 两个条件都成立的时候 才成立 if(sum>400 && math>90){ console.log('清华大学录入成功') }else{ alert('高考失利') }
//2.模拟 如果总分>400 或者你英语大于85 被复旦大学录入 //逻辑或 只有有一个条件成立的时候 才成立 if(sum>500 || english>85){ alert('被复旦大学录入') }else{ alert('高考又失利了') }
(3) . switch
switch基本格式 switch (表达式) { case 值1:语句1;break; case 值2:语句2;break; case 值3:语句3;break; default:语句4; }
示例 :
var gameScore = 'better'; switch(gameScore){ //case表示一个条件 满足这个条件就会走进来 遇到break跳出。break终止循环。如果某个条件中不写 break，那么直到该程序遇到下一个break停止 case 'good': console.log('玩的很好') //break表示退出 break; case 'better': console.log('玩的老牛逼了') break; case 'best': console.log('恭喜你 吃鸡成功') break; default: console.log('很遗憾') }
(4) . while 循环
循环三步走 :
1 . 初始化循环变量
2 . 判断循环条件
3 . 更新循环变量
var i = 1; //初始化循环变量 while(i<=9){ //判断循环条件 console.log(i); i = i+1; //更新循环条件 }
(5) . do_while
//不管有没有满足while中的条件do里面的代码都会走一次 var i = 3;//初始化循环变量 do{ console.log(i) i++;//更新循环条件 }while (i<10) //判断循环条件
(6) . for 循环
for(var i = 1;i<=10;i++){ console.log(i) }
var sum = 0; for(var j = 1;j<=100;j++){ sum = sum+j } console.log(sum)
双重for 循环
for(var i=1;i<=3;i++){ for(var j=0;j<6;j++){ document.write('*') } document.write('<br>') }
for(var i=1;i<=6;i++){ for(var j=1;j<=i;j++){ document.write("*")； } document.write('<br>')； }
for(var i=1;i<=6;i++){ //行数 //控制我们的空格数 for(var s=i;s<6;s++){ document.write(' ') } for(var j=1;j<=2*i-1;j++){ document.write('*') } document.write('<br>') }
3.5 异常处理
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>
4.1 数组 Array
1 .数组创建的三种方式 :
创建方法一: var arrname = [元素0,元素1,....,]; // var arr = [1,2,3]; 创建方法二 : var arrname = new Array(元素0,元素1,....,); //var arrname = new Array(100,"a",true); 创建方法三 : var arrname = new Array(长度) // 初始化数组长度 var cnweek = new Array(7); cnweek[0] = "星期日"; cnweek[1] = "星期一"; ................ cnweek[6] = "星期六";
2 . 数组的赋值
var arr = []; //通过下标进行一一赋值 arr[0] = 132; arr[1] = "嘿嘿嘿"; arr[2] = "哈哈哈";
3 . 数组的常用方法
数组的常用方法示例 : --> 点击 ◆◆◆
4.2 字符串String
1 . 字符串对象的创建
(1) . 变量 = "字符串"
(2) . 字符串对象名称 = new String(字符串)
//1: var str1 = "hello world"; //2: var str1 = new String("hello world")
2 . 字符串的方法 :
字符串的常用方法示例 : --> 点击 ★★★
4.3 Date 日期对象
1 . 创建日期对象只有构造函数一种方式,使用 new 关键字
//创建了一个date对象 var myDate = new Date();
2 . 常用方法 :
//创建日期对象 var myDate=new Date(); //获取一个月中的某一天 console.log(myDate.getDate()); //返回本地时间 console.log(myDate().toLocalString());//2018/5/27 下午10:36:23
示例 :
function getCurrentDate(){ //1. 创建Date对象 var date = new Date(); //没有填入任何参数那么就是当前时间 //2. 获得当前年份 var year = date.getFullYear(); //3. 获得当前月份 js中月份是从0到11. var month = date.getMonth()+1; //4. 获得当前日 var day = date.getDate(); //5. 获得当前小时 var hour = date.getHours(); //6. 获得当前分钟 var min = date.getMinutes(); //7. 获得当前秒 var sec = date.getSeconds(); //8. 获得当前星期 var week = date.getDay(); //没有getWeek // 2014年06月18日 15:40:30 星期三 return year+"年"+month+"月"+day+"日 "+hour+":"+min+":"+sec+" "+week; } alert(getCurrentDate()); //解决 自动补齐成两位数字的方法 function changeNum(num){ if(num < 10){ return "0"+num; }else{ return num; } } //将数字 0~6 转换成 星期日到星期六 function parseWeek(week){ var arr = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"]; // 0 1 2 3 ............. return arr[week]; }
3 . Date对象的方法--设置日期和时间
//设置日期和时间 //setDate(day_of_month) 设置日 //setMonth (month) 设置月 //setFullYear (year) 设置年 //setHours (hour) 设置小时 //setMinutes (minute) 设置分钟 //setSeconds (second) 设置秒 //setMillliseconds (ms) 设置毫秒(0-999) //setTime (allms) 设置累计毫秒(从1970/1/1午夜) var x=new Date(); x.setFullYear (1997); //设置年1997 x.setMonth(7); //设置月7 x.setDate(1); //设置日1 x.setHours(5); //设置小时5 x.setMinutes(12); //设置分钟12 x.setSeconds(54); //设置秒54 x.setMilliseconds(230); //设置毫秒230 document.write(x.toLocaleString( )+"<br>"); //返回1997年8月1日5点12分54秒 x.setTime(870409430000); //设置累计毫秒数 document.write(x.toLocaleString( )+"<br>"); //返回1997年8月1日12点23分50秒
4 . Date对象的方法--设置日期和时间
日期和时间的转换: getTimezoneOffset():8个时区×15度×4分/度=480; 返回本地时间与GMT的时间差，以分钟为单位 toUTCString() 返回国际标准时间字符串 toLocalString() 返回本地格式时间字符串 Date.parse(x) 返回累计毫秒数(从1970/1/1午夜到本地时间) Date.UTC(x) 返回累计毫秒数(从1970/1/1午夜到国际时间)
4.4 Math 内置对象
1. 常用的内置对象 :
用户的内置对象示例 : --> 点击 ●●●
4.5 Function 对象
详情在这里 --->>> 点击 ☆☆☆☆☆☆
