第一章 JavaScript 是什么
JavaScript是一门编程语言,虽然含有Java这个字眼,但是它和java没有半毛钱关系,就跟雷锋和雷峰塔关系一样;
如果说html是一个网页的骨架,那么css即为网页绚丽的外衣;我们的网站想要动起来,有一些动画效果,就需要js这个灵魂;
js能够帮我们完成一些页面的效果,比如轮播,回到顶部,弹出广告等等;
第二章 js如何引入
2.1 正确的引入方式
写在script标签内部,注意script是闭合标签
在script标签上有一些属性,比如type="text/javascript"
,或者language='javascript'
,在html5中,此类属性可写可不写,但是写一定要写对
script标签可以放置于html的任何位置(style标签内除外),但是一般会被解析到body尾部和head内部;
script内部书写的是我们的js代码,其他代码会不予解释或者报错;
<script type="text/javascript">
alert(123);
</script>
<p>123</p>
常见的调试方法`alert()`
2.2 多段script的执行顺序?
按引入顺序,逐段执行(思考为什么n多页面把js写在最后边)
2.3 注释
单行代码使用双斜杠 //
进行注释
多行代码可以使用 /*
和*/
包裹进行注释
第三章 变量声明
3.1 命名规范
在js中,我们需要方便的寻找或者使用某个数据,需要给该数据取一个名字(相当于人类的名字,你可以叫籍无名,我也可以叫籍无名,去除这个名字,就是人,也就是数据,而籍无名就是变量)。这个"名字"在编程语言中的概念就是变量;
var a = 123;
//看到等号 从右往左读取 把某个值赋予..
alert(a);
同时 因为是"变"量,所以我们可以吧变量中的内容替换掉
var a = 123;
a = 456;
alert(a);
- 标志符 标志符是指变量,函数,属性的名字或者函数的参数
- 变量的声明要用var
- 第一个字符可以是字母,下划线,美元符号.
- 其他字符可以是字母,下划线,美元符号或者数字.
- 不能和JS原本的关键词和保留字冲突 有很多... 标志符中的字母也可以包括含拓展的ASCII或者Unicode字母字符
var a = 34;
var b = 45;
alert(a+b);
var $ = 'jquery';
alert($);
c = 56;
alert(c);
注意: 如果变量声明不加var 会污染全局变量
第四章 变量类型
既然我们理解了变量的概念,那么变量也是分为种类的(就好比有些名字男生用,有些名字女生用),一个数字和一句话在我们计算机上是分别理解的
js中存在六大数据类型
- number 数值类型
- string 字符串类型
- boolean 布尔值类型(true/false,注意大小写)
- function 函数
- object 对象(包括null 数组)
- undefined 未定义
我们使用typeof关键字来判断数据类型
var x = 10; //number
//数值型不分小数和整数,注意整数的计算精度要远高于小数计算;
//我分了两次丢了3毛钱,别人捡了还给我反而多还了; 0.1+0.2 不等于 0.3
var y = '10'//string
//一句话 一篇文章 我们可以看做字符串
//alert(y+y);
//alert(x+1+'x'+1);
//普通字符串使用单引号和双引号都可以
var x = false; //boolean值
//对和错 也可以看做数据类型
//为true/false 注意要严格区分大小写
var x; //undefined
//表示声明但是并没有被赋值的未定义,也是一种特殊的数据类型,需要注意的是未定义表示的是有过声明,但是没有具体的值,而并不代表没有声明
alert(x);
alert(typeof x);
剩下的几种数据类型我们在后面接触的过程中继续学习;
第五章 运算符
加减乘除运算符为 +,-,*,/
不做赘述;
5.1 取模运算 %
var a = 3;
var b = 2;
alert(a%b); //1
5.2 字符串拼接+
从左往右加时,碰到第一个非数值类型之后,就理解为字符串拼接;
alert('hello' + 3 + 'world');
alert(2 + 3 + 'hello' + 5 + 'world');
5.3 逻辑运算符
||
表示"或者"的意思,左右两侧有一者为真则为真&&
表示"且"的意思,左右两侧有一者为假则为假
在逻辑运算符进行运算的时候,会进行隐式类型转换,需要注意的是,以下六种值的结果表示为假(false)
0 , '' , false , null , undefined, NaN
NaN表示"不是数" 是number类型中比较特立独行的一个值,发起飙来连自己都不认,即NaN不等于NaN
是数的场景只有一个
a = 1
;但是不是数的结果可能有很多,所以NaN不等于自身;(NaN 先不讲,会增加学生理解上的困扰)
var a = 3;
var b = 2;
var c = a||b;
console.log(c);//3
// || 逻辑运算的值为第一个确定该运算结果的值;
var a = 3;
var b = undefined;
var c = a && b;
console.log(c);//undefined
// 和 || 运算一致, && 运算的返回值依旧为第一个确定该运算结果的值;
我们可以依靠逻辑运算符完成流程控制
var a = 1;
var b = null;
var c = 3;
var d = a || b || c;
console.log(d)
//同理 a , b , c 不仅仅可以是某个'值',也可以是某个运算或其结果
5.4 比较运算符
常见的比较符有
>, <, >=, <=,==,!=,===,!==
大于,小于,大于等于,小于等于,等于,不等于,全等于,不全等于;
注意在js中=
是赋值操作的运算符,而==
是在做比较的时候采用的比较符号
在比较的时候,结果只有两种情况,真(true)或者假(false),为布尔值;
var num1 = 4;
var num2 = 10;
console.log(num1 = num2);
console.log(num1 == num2);
console.log(num1 <= num2); //满足小于条件,判断正确
对于全等于和等于的判断,在一般情况下的表现是相同的;
弱类型:在运算的时候,变量会进行隐式的类型转换,我们可以称为弱类型语言;
悄悄的进行数据类型的转换;
var num1 = 4; //number
var num2 = '4'; //string
console.log(num1 == num2);
console.log(num1 === num2);
比较运算的时候有时会进行隐式的类型转换,在此例中,==
悄悄的把num2类型转换成为数值型做比较,如果我们需要对num1和num2严格相比,采用===
,===
会首先判断比较的数据的数据类型是否相同,性能要好一些;
第六章 控制结构(1)
6.1 if语句
if语句是我们常见的控制结构;
如果某些条件是正确的(成立的),我们就去执行某段代码
书写方式很简单;
var x = 10;
var y = "10";
var z = x===y;
if(x === y){
alert(1);
}
if(z){
alert(1);
}
一条语句中可以有多个if判断.直到决定结果的值出现.不继续下查找;
实际是if是在判断true/false,不管我们写一些什么,括号里的结果最终都会是布尔值,它也会做一些类型转换;
任何数据在被判断的时候,都会有自己对应的布尔值转换
var num = 10;
var str = "你好";
var t = true;
var obj = document;
if(num){
alert('hello');
}
//...
能被转换成false的依然是以下几种
- false
- 数值 0
- 空字符串 ""
- null
- undefined
- NaN
再写几个案例,if后面的条件不是变量,而是表达式,指明会首先计算表达式,然后再计算if
6.2 if...else
/if...else if
6.2.1 if...else
if表示条件成立时执行,条件不成立时执行else中的语句
比较两个数的大小
var num1 = 100;
var num2 = 200;
if (num1>num2) {
console.log("num1:大")
}else{
console.log("num2:大")
}
6.2.2 if...else if
如果条件分支比较多,则采用if...else if
进行判断
判断一个整数,属于哪个范围:大于0;小于0;等于0
我们可以采用另外一种弹窗 prompt 保存我们输入的数据;
var iNum = prompt("请输入一个整数");
if (iNum>0) {
alert(+iNum+"大于0");
}else if (iNum<0) {
alert(+iNum+"小于0");
}else{
alert(+iNum+"等于0");
}
6.3 三目写法
var a = 111;
if(a > 123){
a = '你好';
}else{
a = "emmmm";
}
对于条件是一条语句,真一条语句,假一条语句的判断,可以改写成三目的写法
条件?真语句:假语句
a>123?a = '你好':a = 'emmmm';
最好的写法为:
a = a>123?"你好":"emmmm";
一般逻辑很长的语句也不会用三目进行书写,结果没有if清晰,它也并不能加快执行顺序;
6.3.1 案例
判断一个整数是奇数还是偶数
var a=1001;
alert( a+"的值:"+(a%2?"是奇数":"是偶数"));
6.4 switch
我们代码在讲究功能的同时要考虑可读性
var a = 1;
if(a === 1){
alert(a);
}else if(a === 2){
alert(a);
}else if(a === 3){
alert(a);
}else{
alert('我也不知道');
}
当我们if else提出的条件过多,并且都为全等于的判断时.可以使用switch基于不同的条件执行不同的动作,我们可以使用switch语句来选择要执行的多个代码块之一;
switch(a){
case 1:
console.log('等于1');
break;
case 2:
console.log("等于2");
break;
case 3:
console.log("等于3");
break;
default :
console.log('等于4');
break;
}
如果我们不写break的话,会一直进行比较,不会跳出循环,我们只需要找到匹配的即可停止了; 如果都木有找到,使用默认的default;
就比如
var a = 3;
switch(a){
case 1:
console.log('等于1');
case 2:
console.log("等于2");
case 3:
console.log("等于3");
default :
console.log('等于4');
break;
}
会一直console.log所有的结果直到结束;
6.4.1 案例
判断输出结果
var x =2;
switch(x){
case 1: console.log(1);
case 2: console.log(2);
default:break;
case 3: console.log(3);
}
根据输入的成绩,判定成绩的等级ABCD
switch(core){
case 10:
case 9: return 'A';
case 8: return 'B';
case 7: return 'C';
case 6: return 'D';
}
作业:
-
使用if进行成绩判定
大于85 优秀 大于等于75小于等于85 良好 大于等于60小于75 及格 小于60 不及格
-
使用三元运算符判断给定一个4位年份是平年还是闰年(自己网上搜索平年和闰年的计算方法)。
-
使用switch或者if判断给定的某年某月有几天 (两个变量: year表示年 ,month表示月,弹出天数)
答案:
var sNum = prompt("查询成绩");
var iNum = (sNum-0);
if (iNum>85) {
console.log("优秀");
}else if ((iNum>=75)&&(iNum==85)) {
console.log("良好");
}else if ((iNum>=60)&&(iNum<75)) {
console.log("及格");
}else{
console.log("不合格");
}
alert(a%400==0||(a%100!=0&&a%4==0)?"闰年":"不是闰年")
var year = 2014;
var month = 4;
switch(month){
case 1:
case 3:
case 5:
case 7:
case 8:
case 10:
case 12: return 31;
case 2:
if(year%400==0||(year%100!=0&&year%4==0))
return 29;
else
return 28;
default:return 30;
}