从零基础入门JavaScript(1)
1.1 Javascript的简史
1995年的时候 由网景公司开发的,当时的名字叫livescript 为了推广自己的livescript,搭了java顺风车,改名为javascript
与此同时, 微软因此在自身的浏览器里,也推出了自己的脚本语言
jscript
1997年时候, 由ECMA(欧洲计算机制造商协会)出面,推出了一套javascript的规范,Ecmascript ,规范提出js由三部分组成
JS的组成:
ECMAScript 基础语法
DOM 文档对象模型
BOM 浏览器对象模型
2003之前,网页界面上的弹窗广告几乎都是由js做的,被人称做牛皮癣
2004年的时候,JS的命运发生改变 ajax(谷歌公司)
2007的时候 苹果公司推出的手机,可以用来上网
2010的时候 H5的出现 canvas 又推高了js的地位
2011年的时候, node.js 将js这种语言伸向后服务器端
1.2 JS语言的特性
JavaScript是世界上用的最多的脚本语言
脚本语言:不需要编译,直接运行时边解析边执行的语言
JavaScript是一种客户端(本地PC的浏览器)的脚本语言
JavaScript是一种弱类型的动态语言(当JS被引擎解析执行的时候,才会最终的确定变量的数据类型是什么;动态添加一些属性或是方法)
弱类型:对于数据类型的要求不严格,JS中的所有变量声明只有一个关键字就是var var a = 123;
后台语言对于数据类型要求相当严格:string bool int char double
基于对象:内置大量现成对象,编写少量程序可以完成目标
编译: 一般后台语言都是编译执行的 ,将编写好的代码的一次性的编译成可执行文件,例如.exe文件,
小结:
1. 简单易用
可以使用任何文本编辑工具编写 记事本,其它编辑器
只需要浏览器就可以执行程序
2. 解释执行
事先不编译
逐行执行
无需进行严格的变量声明
3. 基于对象
内置大量现成对象,编写少量程序可以完成目标
1.3 浏览器的工作原理
浏览器工作原理地址:http://www.2cto.com/kf/201202/118111.html
1、User Interface 用户界面,我们所看到的浏览器
2、Browser engine 浏览器引擎,用来查询和操作渲染引擎
3、Rendering engine用来显示请求的内容,负责解析HTML、CSS
4、Networking 网络,负责发送网络请求
5、JavaScript Interpreter(解析者) JavaScript解析器,负责执行JavaScript的代码
6、UI Backend UI后端,用来绘制类似组合框和弹出窗口
7、Data Persistence(持久化) 数据持久化,数据存储 cookie,HTML5中的sessionStorage
1.4 JS的书写位置
js代码写在一对script标签内,Type可以省略。
这对script标签可以放在很多位置,比如head标签内,body标签内,甚至在body标签与html标签之间。但是如有页面中有html代码,尽量将js代码写在这些标签之后。
输出的五句话:
alert(“这是浏览器弹出来的一个警告框”);
Console.log(“这是在控制台输出的一句话”);
Prompt(“记录用户输入信息”);
Document.write(“向文档页面中输出内容”);
Confrim(“写入信息”);
1.5 变量
变量是用来帮助我们往计算机中存储数据的。
1.5.1 变量的命名
变量的命名一定要有意义,一看变量名就知道是什么意思
1.5.2 命名规则:
变量名必须以字母或下划线“_”或$开头
变量可以包含字母(从A至Z的大小字母),数字,下划线或是$
JavaScript严格区分大小写,computer和Computer是两个完全不同的变量
建议:
变量的名称要有意义
变量的命名遵守驼峰命名法,首字母小写,第二个单词的首字母大写
例如:userName userPwd hightSchool
禁止使用javascript的保留字和关键字作为变量名(见下面的保留关键字图)
1.6 直接量
就是可以直接拿过来使用的数据值
1.7 +运算符
在变量和直接量(字符串)之间或两个字符串之间,用+起连接的作用
如果是两个数字之间用+的话,就是起加法运算中的加法运算
1.8 变量的重复赋值
var age = 18; // 在内存中开辟一块空间,空间名是age,然后将18这个数据存到这块内存空间当中,
age = 81; // 将81这个数据存到age这块内存空间当中,原来的值就覆盖掉了,不存在了,只存有现有的值81
age = 200;
console.log(age);
1.9 Typeof 关键字用来检测变量的数据类型
string 这个就很多
Number 阿拉伯数字,不管正负,整浮,都是number
1.10 算术运算符
一元运算符:++ --
根据操作数来说,一元运算符,就是只需要一个操作数的运算符,二元,是需要两个操作数。
前加后加或是前减或是后减的区别:
后加加,参与运算的时候,先用自身的原值参与运算,之后再将自身的值加1,而前加加,是先将自身的值加1,而后拿着现在加1后的值,再参与运算。
减减同理。
二元运算符: + - * / %
1.11 转义符
\+一个特殊的字符,组成有一个有意义的或者其它功能的一个字符
\”
\t 制表符有四个字符的空格
\b backspace的缩写 往前删除一个
\n 换行
1.12 复合赋值运算符
将=(赋值运算符)和算术运算符进行了一个合写
// 复合赋值运算符
var a = 100;
// a = a+5;
a+=5; // a = a+5;
console.log(a);
b+=200;// b = b +200;
c *= 30; // c = c*30;
d /=50; d = d/50;
e %= 20; e = e%20;
1.13 关系运算符
关系运算符是用来描述事物两者之间的关系,
> < >= <= == != === !==
1.14 Boolean类型
True
False
1.15 JS中的数据类型
string number boolean undefined null 基本数据类型
复杂数据类型 对象 Date Array function
Undefined是一种数据类型,只有一个值就是undefined,代表变量声明了,没有赋值的一种状态。
变量声明与定义的区别 :
变量声明指的量,只给变量起了一个名字,并没有数据值,var name;
变量的定义,就是连声明加赋值,var name = “张三”;
1.16 逻辑运算符
&& || !
&&: 表示在&&两边的表达式同时为真是才为真,只要有一个假就为假;
||:表示在||两边的表达式中只要有一个真即为真,不然同时假才为假;
!:真变假;假变真;
1.17 运算符的优先级
1.18 数据的类型转换
转成number
隐式转换 + - * / %
强制转换 使用外部的方法或是函数进行的数据转换
Number() parseInt() parseFloat()
1.18.1 Number()函数
var a = "123";
var b = true;
console.log(Number(a)); // 123
console.log(Number(true)); // 1
console.log(Number(null)); // 0
console.log(Number(undefined)); // NaN
console.log(Number("123.456")); // 123.456
console.log(Number(" ")); //0
boolean类型的值转换成Number类型true-->1 false-->0
unerfined-----> NaN
如果能将值转换成数字,就转换成对应的值,如果不能转换,则报NaN.
Number()函数的特点:
a.如果转换的内容可以转成数字,那么就直接返回这个内容对应的数字。
b.将整体进行转换,如果有一个不可以转换那么返回NaN.
c.如果在内容中出现小数,那么小数会保留,也会输出小数。
d.如果内容为空(null),那么转换成0;
1.18.2 转string
隐式类型转换 +“”
强制类型 toString() String();
万物皆对象,JS中的对象几乎都有toString(); null,undefined是没有toString()方法,如果要强制转换的话,只能使用String();
能用toString()转换的对象,对String()都可以
1.18.3 转boolean类型
隐式类型 !!
强制类型 Boolean()
数据类型转boolean的时候,为false的情况:
0, “”,null,undefined,NaN, 这些转成boolean类型的时候都为false,其它的都为true;
1.19 NaN number类型
NaN : not a number 不是一个数字
是数字类型的一种,代表数字的一种不正常的状态,也就是说,本来可以转换成数字或是参与运算的变量,并没有转换过来,这个时候就报一个NaN,这样就避免了程序报错。
NaN是非常特殊 的,特殊到凡是与NaN进行的运算,最终结果都是NaN,更特殊的是,NaN与谁都不相等,包括自己。
isNaN() 是 不是一个数字 非数字
1.20 JS中的语言结构
顺序结构
分支结构 if if-else
选择结构 if else-if else-if ...else swicth-case
循环结构 while do-while for for-in
1.21 If()
If(判断条件){ 一般是一个boolean类型的值或是关系表达式或是逻辑表达式
要执行的代码;
}
执行过程:
当程序运行到if处的时候,首先进入小括号,判断括号里面的条件是否成立,如果成立,也就是括号里是true,则进入大括号执行里面的代码,如果条件不成立,也是返回false,则直接跳过大括号,执行后面的代码。
If只能判断 一种情况,如果想判断两种情况
If小括号中如果不是boolean类型的值,也不是关系表达式也不是逻辑表达式的时候,会隐式的调用Boolean(),将传进来的值,进行一个boolean类型的转换。
1.22 If..else
If(判断条件){ 一般是boolean类型的值或是关系表达式或是逻辑表达式
要执行的代码;
}else {
要执行的代码;
}
执行过程:
程序运行到if处,首先进入小括号,判断里面的条件是否成立,如果条件成立,也就是返回true,则进入大括号,执行里面的代码,如果判断条件不成立,也就是返回false,则进入else对应的大括号里面,执行里面的代码,执行完毕之后直接跳出if-else语句。两种情况肯定会执行其中一个大括号中的代码。
1.23 三元运算符
表达式1(关系表达式或是逻辑表达式)? 表达式2:表达式3;
如果表达式1成立,也就是最终求解出一个True的结果或是 表达式1返回true,则表达式2的值是整个表达式的值,如果表达式1不成立,也就是求解出的结果是false,则表达式3是整个表达式的值。
一般多用于两种情况的语境。
var sex = 1;
// if(sex == 1) {
// console.log("男");
// }else{
// console.log("女");
// }
var a = sex == 1?"男":"女";
console.log(a);
var str = prompt("请输入两个人名中的一个,‘秦桧’,‘岳飞’");
// if(str =="岳飞"){
// console.log("忠臣");
// }else {
// console.log("奸臣");
// }
var s = str =="岳飞"?"忠臣":"奸臣";
console.log(s);
表达式: 就是一个可以计算出结果的式子
var a = 100;
比如说: a=1, “abc”, 100>20; a;
1.24 Switch-case
switch(值){ 一般是一个变量或是计算后的定值
case 值1:
要执行的代码;
break;
case 值2:
要执行的代码;
Break;
Case 值3:
要执行的代码;
Break;
Case 值4:
要执行的代码;
Break;
...
Default:
要执行的代码;
Break;
}
执行过程:
当程序执行到switch处,先进入小括号,计算里面值,然后拿着这个定值依次和大括号中case里面的值进行匹配,如果匹配成功,则执行对应的case中的代码,遇到break,则跳出当前swicth-case结构,如果匹配都不成功,则要看结构是否有default,如果有,则执行default中的代码,遇到break跳出结构,如果没有default,则直接跳出swicth-case结构,执行后面的代码。
多用于多条件的定值判断 。
注意:case中的值的数据类型一定要与switch小括号中的值的数据类型一致。
1.25 If-elseif 与switch-case的区别
相同点:都可以实现多分支结构
不同点:
if-else if:可以处理区间范围
switch:一般 只能用于定值比较
三者的区别:
if有条件的执行一条语句 一种情况
if-else有条件的执行一条或另一条语句 两种情况中的一种
switch有条件的执行一组语句中的一条语句 多种情况中的一种
1.26 While
循环: 所谓循环就是重复的做同一件事情
while 循环
while(循环条件){
循环体(要执行的代码);
}
执行过程:
当程序 运行到while处,首先进入小括号判断循环条件是否成立,如果成立,也就是值为true,则进入大括号执行里面的循环体,执行完毕之后,再次回到小括号中判断 循环条件是否成立,如果成立则再次进入大括号执行里面的循环体,往复循环。只要是循环,肯定会有一行代码能够改变循环条件,如果没有代码改变循环条件,我们称这样的循环叫死循环。
while(true){
循环体;
}
1.27 Do- while
Just do IT
Do{
循环体;
} while(循环条件)
执行过程:
程序执行到do处,先进入大括号执行里面的循环体,然后带着执行结果到达while的小括号,判断里面的循环条件是否成立,如果成立,则再次进入大括号执行里面的循环体,如果不成立,则跳出当前do-while循环。
特点,至少执行一次循环体,然后再判断 循环条件。
While的特点:
先判断循环条件,再执行循环体,有可能 一次循环体都不执行。
1.28 For循环
一般多用于已知次数的循环
for(表达式1;表达式2;表达式3){
循环体;
}
执行过程:
程序运行到for处,进入小括号中,先执行表达式1,声明变量,并赋初值,然后执行表达式2,判断循环条件是否成立,如果条件成立,则进入大括号执行里面的循环体,第一次循环的时候,并不执行表达式3,第一次循环执行完毕之后,执行表达式3,改变循环条件,然后再执行表达式2,判断循环条件是否成立,如果成立,则再次执行循环体,如果不成立,则跳出循环。
1.29 循环的嵌套
一个循环里面包含着另一个的循环
对于循环的嵌套来说,外面的循环循环一次,里面的循环循环N次
for(var i=0;i<6;i++){
for(var j=0;j<10;j++){
console.log("循环嵌套");
}
}
1.30 break
两种用法 :
第一种用在swicth-case 用于跳出当前程序
第二种,是用在循环当中,一般是用while或是for循环当中,与if搭配使用,作用就是立即跳出当前循环,后面的代码都不再执行。
也常见用于死循环的跳出。
While(true){
}
1.31 continue 继续的意思
一般也是用于循环当中,当遇到continue关键字的时候,立马停止本次循环,然后回到循环条件处,判断 循环条件是否成立,如果成立则继续下一次循环,如果不成立,则退出当前循环。
只结束当前本次循环,continue后面的代码都不再执行。
1.32 数组
数组 就是数据的有序列表。存储的是一组数据,这组数据可以是任意类型,而且数组中的元素可以随时的动态添加。
1.32.1 使用构造函数创建数组
// 第一种,用构造函数的方式创建 数组
var arr = new Array();// 创建了一个空数组,长度为0
// 数组就是数据的有序列表,这个顺序是按编号来的,默认以0开始,这个编号 叫做数组的索引或是下标
arr[0] = 100;
arr[1] = 99;
arr[2] = 98;
arr[10]=96;
console.log(arr.length);
console.log(arr);// 直接打印数组 ,就可以看到数组里面的数据
alert(arr);
var arr = new Array(6); //创建了一个长度为6的数组
arr[0]=100;
arr[7]=102;
console.log(arr.length);
console.log(arr);
JS的特性就是弱类型的动态语言,比如数组里面的元素是可以随时动态添加的,数组的长度会随着里面数据的变化而变化。
JS中的数组可以存储任何类型的数据,而且大小可以动态的改变,与PC中的内存大小相当。
1.32.2 使用字面量的方式创建数组
var arr = [100,98,96,99,93,95,97,69,89,58,87];
//console.log(arr[0]);
//console.log(arr[arr.length-1]);
for(var i=0;i<arr.length;i++){
console.log(arr[i] +"===="+i);
}
//console.log(arr.length);
1.33 冒泡排序
冒泡排序是将数据从大到小或是从小到大排列的一种算法。
是首先拿着当前的值,依次的和后面的值进行比较,如果是从大到小排列的话,当前的值 小于后面的值的时候,就两两交换,
例:
var ex;
var arr = [65, 97, 76, 13, 27, 49, 58];
for (j = 0; j < arr.length - 1; j++) { //交换次数
for (i = 0; i < arr.length - 1 - j; i++) {
if (arr[i] > arr[i + 1]) {
ex = arr[i + 1];
arr[i + 1] = arr[i];
arr[i] = ex;
}
}
}
alert(arr);
1.34 函数
函数就是代码复用的一种机制或是封装某种功能的代码段。
函数的定义:
有两种,第一种,是使用函数声明的方式定义函数
function 函数名([参数列表]){
函数体(都是可执行的或是要执行的代码);
}
函数名一般是一个动词,代表某种功能,名字最好也要遵循驼峰命名法
函数声明了之后,自己是不会自动调用的,需要我们来执行调用,函数的调用就是: 函数名();
函数的好处:一次声明或是定义,多次调用或是多次执行或是只定义一次,可以被执行或是调用多次。
1.35 函数的组成
函数的三要素: 函数名(函数的功能),参数,返回值
其中,参数不是必须的,也就是说可以没有参数,返回值是每个函数都有的,如果没有明确的返回值的话,默认是undefined.
其实我们可以将函数看成是专门做某件事情的人或是机构,有时候做某件事情的时候,需要我们提供一些数据给它,它在执行或是运算完毕之后或许会有某些结果返回给我们,我们提供的数据就叫做参数,返回给我们的结果就叫做返回值。
比如说:我们去银行ATM机取款,我们需要输入一些密码和取款金额,那么 我们输入的这个密码和金额就是参数,如果输入正确,最终取到的钱,就是返回值。
1.36 形参和实参的关系
定义好了函数之后,在函数调用的时候,会将函数的实参复制一份传到函数定义时的形参里面,会和之前的一一对应起来,如果实参和形参的个不一样的时候,会先按之前的分配。实参和形参的个数是可以不一样的。
var i= 0;
function getSum(a,b,c){ // 在函数定义的时候,使用的参数叫做形参,起占位置的作用
// arguments
a = a || 0;
b = b || 0;
c = c || 0;
console.log(a+b+c);
}
getSum(10,20);//在函数真正的调用的时候,传入的数据,才是实参
1.37 Return 的用法
在函数当中,return一般是用于返回函数当中的数据,如果return后面跟着数据,则后面的数据是整个函数的返回值,程序运行到这里的时候,会先将返回值返回出去,然后立即跳出当前函数,后面的代码不再执行。
如果return 后面没有数据的话,程序运行到return处,则表示直接立即跳出当前函数,后面的代码都不执行。
function getSum(a,b){
a = 100;
return a + b ; //将计算后的结果用关键字return返回出去
console.log("看我执行了没有。。。。"); // return后面的代码不再执行
}
var num = getSum(a,b);
console.log(num*2);
1.38 函数的嵌套
所谓函数的嵌套就是在一个函数里,调用另一个函数。
例:
利用比较两个值大小的函数,以嵌套的形式形成一个比较三个大小的函数。
function getMax(a,b){
return c = a>b?a:b;
}
function getMax1(a,b,c){
return getMax(a,getMax(b,c));
}
console.log(getMax1(1,5,3));