JavaScript简介

第一章 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;
    }