javascript基础

1. 初识 javascript

（1）javascript 的历史来源

​ 94年网景公司 研发出世界上第一款浏览器。

     95年 sun公司  java语言诞生
 
     网景公司和sun合作。

​ Java+script ===> javascript

（2）W3c 规范

​ ☞结构标准 html

​ ☞表现标准 css

​ ☞行为标准 js

（3）JavaScript 和 ECMAScrip t的关系

​ ECMAScript是一种由Ecma国际前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association，制定的标准。

​ JavaScript是由公司开发而成的，公司开发而成的一定是有一些问题，不便于其他的公司拓展和使用。所以欧洲的这个ECMA的组织，牵头制定JavaScript的标准，取名为ECMAScript。

​ 简单来说ECMAScript不是一门语言，而是一个标准。符合这个标准的比较常见的有：JavaScript、Action Script（Flash中用的语言）就是说，你JavaScript学完了，Flash中的程序也会写了。

​ ECMAScript在2015年6月，发布了ECMAScript 6版本，语言的能力更强。但是，浏览器的厂商不能那么快的去追上这个标准。这些新的特性，我们就业班的深入，也会给大家介绍。

（4）今天的JavaScript：承担更多责任

​ 2003年之前，JavaScript被认为 “牛皮鲜”，用来制作页面上的广告，弹窗、漂浮的广告。什么东西让人烦，什么东西就是JavaScript开发的。所以浏览器就推出了屏蔽广告功能

​ 2004年JavaScript命运开始改变了，那一年谷歌公司，开始带头使用Ajax技术了，Ajax技术就是JavaScript的一个应用。并且，那时候人们逐渐开始提升用户体验了

​ 2010年的时候，人们更加了解HTML5技术了，HTML5推出了一个东西叫做Canvas（画布），工程师可以在Canvas上进行游戏制作，利用的就是JavaScript

​ 2011年，Node.js诞生，使JavaScript能够开发服务器程序了

​ 现在，公司都流行WebApp，就是用网页技术开发手机应用。什么意思呢？手机系统有iOS、安卓、windows phone、鸿蒙。好处是不用招聘那么多工程师，只需要几个前端开发工程师即可，并且也易于迭代

2. javascript 介绍

​ ◆js是一款运行在客户端的网页编程语言。

​ ◆组成部分

       ★ecmascript  js标准 
   
       ★dom     通过js操作网页元素
   
        ★bom     通过api操作浏览器

​ ◆特点

       ★简单易用
   
       ★解释执行

​ ◆编译执行 java c# 转化为.dll可执行文件==>电脑读取.dll可执行文件

◆基于对象

◆面向过程

​ ◆作用

​ ★表单验证

​ ★轮播特效

​ ★开发游戏

3. javascript 书写位置

​ ◆内嵌式

<script type="text/javacritpt">
	alert('hello world');
</script>

​ ◆外链式

<script type="text/javacritpt" src="1.js"></script>

​ ★先创建一个外部JS文件

​ ★通过src将外部js调用。

​ ◆写js代码的时候，分号不能省略。

​ ◆推荐将JS代码写在html结束标签后边

​ 将多个JS文件合成为一个JS文件

4. 输出消息的几种方式

（1）alert

​ 在页面弹出一个对话框，早期JS调试使用

alert('hello world');

（2）confirm()

​ 在页面弹出一个对话框, 常配合if判断使用

confirm('hello world');

（3）console.log()

​ 将信息输入到控制台，用于js调试

console.log('hello world')

（4）prompt()

​ 弹出对话框，用于接收用户输入的信息

prompt('请输入您的银行卡号')

（5）document.write()

​ 在页面输出消息

document.write('hello <br> <strong> world </strong>')

（6）转义字符

字符	含义
"	转双引
'	转单引
\n	转换行
\r	转回车

（7）注释

​ 快捷键 ctrl+/

​ 单行注释 //

​ 多行注释 /* */

5. 变量

​ 会变化的量。

​ 变量是用来存储数据的容器。

（1）定义变量

var hello;

​ ◆给变量赋值

hello="world";

​ “=”是赋值运算符

​ ◆定义并赋值

var hello="world";

​ ◆变量集体声明

var n1=1,n2=2,n3=3;

（2）变量的命名规范

​ ◆不能以数字或者纯数字开头来定义变量名

​ ◆不推荐使用中文来定义变量名

​ ◆不能使用特殊符号或者特殊符号开头(-除外)

​ ◆不推荐使用关键字和保留字来定义变量名

​ ★在JS中严格区分大小写的！！！

6. 数据类型

（1）简单数据类型

​ ◆Number 数字类型

      包含正数  负数  小数 

​ 能表示的最大值是±1.7976931348623157乘以10的308次方

​ 能表示的最小值是+5乘以10的-324次方

​ 数字类型的表达方式：

​ ★十进制表示法

var n1=23;

​ ★十六进制表示法

​ 从0-9，a(A)-f(F)表示数字。以0x开头

var n4=0x4323

​ ★八进制表示法

​ 0开头，0-7组成

var n5=0472;

​ ◆字符串 String

​ 凡是用双引号或者单引号引起的都是字符串

var n6="hello world"
var n7="321"

​ ◆布尔数据类型 Boolean

​ 只有2个值一个是true, 一个是false. 实际运算中true=1,false=0

var n1=2;
var n2=3;
alert(n1==n2);	//false
alert(n1<n2);	//true

​ ◆undefined 变量未初始化

​ 定义了变量，没有给变量赋值

var n1;
alert(n1);

​ ◆null 变量未引用 值为空 object

var n2=null;

（2）复杂数据类型

​ ★ object 对象

​ ★ array 数组

7. 判断数据类型

​ typeof()

n1=2
alert(typeof(n1));

8. 比较运算符

​ < > <= >= == !=

9. 算术运算符

​ ◆+ 加号

​ ★两个数字类型的变量相加，得到的是一个数字类型。

      ★一个数字类型和一个字符串相加，得到的是一个字符串。

​ ◆— 减号

​ ★两个数字类型的变量相减，得到的是一个数字类型。

      ★一个数字类型和一个数字字符串相减，得到的是一个数字类型。
  
      ★一个数字类型和一个非数字字符串相减，得到的是NaN,是一个数字类型

​ NaN, not a number

​ ◆/ 除号

     ★两个数字类型的变量相除，得到的是一个数字类型。
 
     ★一个数字类型和一个数字字符串相除，得到的是一个数字类型。
 
     ★一个数字类型和一个非数字字符串相除，得到的是NaN,是一个数字类型。   

​ ★0做为除数的时候，得到结果 Infinity （无限大），是一个数字类型。

​ ◆% 取余数

​ ◆优先级 有 () 先计算 () 里边的

10. 带操作的赋值运算

var n1=2;
var n2=3;
n1+=n2;		//n1=n1+n2
alert(n1);

运算符	示例	等价于
+=	a+=b	a=a+b
-=	a-=b	a=a-b
*=	a*=b	a=a*b
/=	a/=b	a=a/b

11. 对象

（1）Date() 对象

​ Date 对象用于处理日期和时间

var mydate=new Date（）;		//通过new方法创建对象
alert（Date（））;			//返回一个完整的日期时间
alert（mydate.getDay（））;//返回当前是周几“
alert（mydate.getMonth（）+1）;//返回当前月份
alert（mydate.getFul1Year（））;//返回当前年份
alert（mydate.getHours（））;//返回当前小时
alert（mydate.getMinutes（））;//返回当前分钟
alert（mydate.getSeconds（））;//返回当前秒数

（2） Math 对象

​ ◆Math.ceil() 天花板函数 向上取整

var n1=Math.ceil(n2);

​ ★如果是整数，取整之后是这个数本身

​ ★如果是小数，对数进行向上舍入

​ ◆Math.floor() 地板函数

var n1=Math.floor(n2);

​ ★如果是整数，取整之后是这个数本身

       ★如果是小数，对数进行向下舍入

​ ◆Math.max()

var n1=Math.max(n2,n3);

​ ◆Math.min()

var n1=Math.min(n2,n3);

​ ◆Math.pow()

var n1=Math.pow(n2,n3);

​ ◆Math.round()

var n1=Math.round(n2,n3);

​ ◆Math.random()

var n1=Math.random(n2,n3);

12. 数据类型转换

（1）数字类型转字符串

​ String()

var n1=String(n1);

​ 变量 .toString()

var n2=n1.toString();

（2）字符串转数字类型

​ ◆Number

var n2=number(n1);	//将字符串转换成数字

​ ★数字类型的字符串，转换之后得到的数字

         ★非数字字符串，转换之后得到是NaN
 
         ★小数类型的字符串，转换之后得到的是原数字

​ ◆parseInt

var n2=parseInt(n1);	//将字符串转数字

​ ★整数数字类型的字符串，转换之后得到的整数数字。

​ ★数字开头的字符串，转换之后得到的是前边的数字。

​ ★非数字开头的字符串，转换之后得到的是NaN。

​ ★小数类型的字符串，转换之后取整。

​ ◆parseFloat

​ ★整数数字类型的字符串，转换之后得到的整数数字。

​ ★数字开头的字符串，转换之后得到的是前边的数字。

​ ★非数字开头的字符串，转换之后得到的是NaN。

​ ★小数类型的字符串，转换之后得到的是原数字

（3）转布尔类型

​ Boolean()

var n2=Boolean(n1);

​ ★数字和字符串转完之后为true。

​ ★undefined、null、0转完之后为false

（4）隐式数据类型转换

​ 在运算过程中，程序自己进行的数据转换(程序员没有操作)

（5）逻辑运算符

​ 逻辑运算只有2个结果，一个为 true ,一个为 false

​ ◆且 &&

​ ★两个表达式为 true 的时候，结果为 true.

​ ◆或 ||

​ ★只要有一个表达式为 true ,结果为 true

​ ◆非 ！

​ ★和表达式相反的结果

（6）等号运算符

​ “=”赋值运算符

​ “==”只判断内容是否相同，不判断数据类型

​ “===”不仅判断内容，还判断数据类型是否相同

​ ！= 只判断内容是否不相同，不判断数据类型

​ ！==不全等于 不仅判断内容是否不相同，还判断数据类型是否不相同

（7）自增自减

​ i++ ++i

​ ◆在不参与运算的情况下，i++和++i都是在变量的基础加1

var n1=123;
n1++;		//n1=n1+1;
alert(n1);

​ ◆在参与运算的情况下

var n1=123;
var n2=n1++;
alert(n2);
alert(ni);

13. 条件状语从句

（1）if else 条件判断

If(条件表达式){
	如果条件表达式结果为true,执行该处代码。 如果条件表达式结果为false,执行下边代码。  
}else{
	如果条件表达式结果为false,执行该处代码。
}

（2）if else 嵌套

If(条件表达式){
	如果条件表达式结果为true,执行该处代码。下边代码不执行。如果为false,执行下边代码。
}else  If(条件表达式){
	如果条件表达式结果为true,执行该处代码。下边代码不执行。如果为false,执行下边代码。
}else  If(条件表达式){
	如果条件表达式结果为true,执行该处代码。下边代码不执行。如果为false,执行下边代码。
}else{
	如果上边条件表达式结果都为false,执行该处代码。
}

（3）三元表达式

n1%2==0?alert("偶数"):alert("奇数");

（4）Switch 语句

Switch(变量){
	case 1:
		如果变量和1的值相同，执行该处代码
	break;
	case 2:
		如果变量和2的值相同，执行该处代码
	break;
	case 3:
    	如果变量和3的值相同，执行该处代码
    break;
    default:
    	如果变量和以上的值都不相同，执行该处代码
    break;
}

​ ★switch后边的变量和case后边值的数据类型必须保持一致

var fruit=prompt（"请输入您喜欢吃的水果"）;
switch(fruit){
	Case "苹果":
    	alert（"您喜欢吃的是苹果"）;
    break; //阻断代码执行
    case "香蕉":
    	alert（"您喜欢吃的是香蕉"）;
    break;
    case "葡萄":
    	alert（"您喜欢吃的是葡萄"）;
    break;
    default:
    	alert（"口味真重"）;
    break;

​ ◆Switch语句可以对变量进行集体判断：

switch(fruit){
    case"苹果"∶case"香蕉"∶case"葡萄"∶	//case值的集体声明
    	alert（"您喜欢吃水果"）;
    break;
    default:
    	alert（"口味真重"）;
    break;
}

（5）While 循环

While(条件表达式){
   只要条件表达式结果为true,循环一直执行，当条件表达式结果为false的时候，循环终止
}

​ While循环语句需现在循环体外定义变量

（6）Do while

Do{
	循环体代码；首先执行该循环体代码一次。如果while后边的表达式结果为true,该循环体会一直循环。如果结果false,该循环终止。
}while(条件表达式)

​ ◆do while 比while循环多循环一次

var n1=1;
var n2=5;
do{
	alert("n1>n2");
}whie(n1>n2)

（7）for 循环

for(定义变量;条件表达式;自增自减){
	循环体代码
}

​ 执行顺序:

​ ◆首先定义变量

​ ◆如果条件表达式结果为true的时候，执行for循环里的代码，如果为false，循环体代码终止执行

​ ◆先执行变量和条件表达式循环一次，再执行自增自减

（8） break 语句

​ 在循环体内，只要代码遇到break,程序立马结束当前循环

​ 当前循环指的是break语句所在的循环体

//将1-10之间2的倍数输出到控制台
for(var i=1; i<=10; i++){
	if(1%2==0){
		console.log(i);
		break;
	}
}

（9）continue 语句

​ Continue语句指的是跳出本次循环，该语句后面的代码不再执行,整个循环体继续循环

for(var n1=1; n1<=10; n1++){
	if(n1==6){
		continue;
	}else{
		console.log(n1);
	}
}

14. 数组

（1）定义

var ary=new Array();	//通过创建对象的方式创建数组
var ary1=[];			//直接创建一个空数组

（2）赋值

var ary1=[];
ary1[0]=123;
ary1[1]=456;

（3）数组的初始化和遍历

var ary1=[1,2,3,"hello","你好"];		//初始化
//遍历
for(var i=0; i<5; i++){
	alert(ary1[i]);
}

（4）数组数据的个数 length 属性

var ary=[1,'2','3a',4,5,6,7,8]
for(var i=0; i<ary.length; i++){
	alert(ary[1]);
}

（5）数组合并

​ 使用concat方法合并数组

var ary1=[1,2,3,4,5,6,7,8];
var ary2=[1,3,5,7,9];
var ary3=ary1.concat(ary2);
alert(ary3);

（6）Join 方法

​ 返回一个字符串数组

var ary1=[1,2,3,4,5,6,7,8];
var ary2=ary1.join("&");
alert(ary2);
alert(typeof(ary2));

15. 函数

​ ☞函数（方法）定义

​ 类里面定义的函数才叫方法

 通过 function  关键字

​ 和自定义方法名 既可定义一个函数：

function test(){
	alert('hello world');
}

函数的调用

function test(){
	alert('hello world');
}

test();