JavaScript从入门到放弃之基础篇

JavaScript 的发展历史

　　由于不是重点，暂且在这里简述一部分内容：　　

　　发明者： 布兰登 艾奇
　　原名 ：liveScript
　　用于增强用户体验，使网页能够动态的显示，是现在唯一能在网页上运行的脚本语言

---

JavaScript的组成

ECMAScript 5.0:定义了js的语法标准： 包含变量 、表达式、运算符、函数、if语句 for循环 while循环、内置的函数

DOM :操作网页上元素的API。比如让盒子显示隐藏、变色、动画 form表单验证

BOM:操作浏览器部分功能的API。比如刷新页面、前进后退、让浏览器自动滚动

---

JavaScript的引入方式

内接式：在html中编写JavaScript

<script type="text/javascript">

</script>

外接式：写在自己的文件中，连接到html文件里面去执行

<!--相当于引入了某个模块-->
<script type="text/javascript" src = './index.js'></script>

　　

---

两种常用的测试方式

console.log    控制台输出（相当于打印）
alert  弹出警告框（在网页刷新时弹出一个框）

---

变量的声明

<script>
    var a = 100;  //也可以写成var a; a=100;
    alert(a)
// 打印出来的数字与字符颜色不同
    var b ='100';
    console.log(a)
    console.log(b)
    console.log(c)//不存在的变量打印出来是 not defined  变量要先定义，才能使用。

</script>

　　

• 定义变量：var就是一个关键字，用来定义变量。所谓关键字，就是有特殊功能的小词语。关键字后面一定要有空格隔开。
• 变量的赋值：等号表示赋值，将等号右边的值，赋给左边的变量。
• 变量名：我们可以给变量任意的取名字。

---

变量的命名规范

变量名有命名规范：只能由英语字母、数字、下划线、美元符号$构成，且不能以数字开头，并且不能是JavaScript保留字。(类似不能用以有的功能字符)

---

 基本的数据类型

    /* JavaScript的数据类型
    1.number
    2.string
    3.boolean   布尔值
    4.null
    5.undefined  与python不一样的地方
    */
    // var a = 100;
    // console.log(typeof a)//查看数据类型的方式 typeof

    var a = 5/0;
    console.log(a);  //Infinity 无限大
    console.log(typeof a);

    var b = 5+'';//将数字转化成字符串的小技巧  +的使用
    console.log(typeof b);

    var c='';//空是属于字符串类型的
    console.log(typeof c);
    
    // 3.boolean
    var isShow  = 1>1;
    console.log(typeof isShow);

    // 4.null  空对象
    var d = null; //空对象 object
    console.log(typeof d);

    // 5.undefined 未定义的

    var  d1;
    console.log(d1); //值 是undefined
    console.log(typeof d1); //undefined 数据类型 

attention:　　

　　null也是一种数据类型

　　在控制台输出的内容颜色比数据类型要浅

 

---

 运算符

赋值运算符

以var x = 12,y=5来演示示例

算数运算符

var a = 5,b=2;

比较运算符

var x = 5;

 

---

 数据类型的转换

    // 将number类型转换成string类型
    // 隐式转换
    // var a = 123;
    // var b ='123';
    // var c = a+b;
    // console.log( typeof c);
    //
    // //强制转换
    // var str1 = String(a);
    // console.log(typeof str1)
    //
    // //或者
    // var d = 1117;
    // var x =d.toString(x)
    // console.log(typeof x)

    //将数字转换成字符串
    var a = '1111';
    var num = Number(a);
    console.log(num);
    console.log(typeof num);

    var b = '77.71d1s1a1';
    var num1 = Number(b);
    console.log(num1);//NaN not a number 也是一个number
    console.log(typeof num1);

    //parseInt解析字符串，返回整型    parseFloat 返回浮点型
    console.log(parseInt(b));
    console.log(parseFloat(b));

　　

任何的数据类型都可以转换为boolean类型

var b1 = '123'; //true
var b2 = 0; //false
var b3 = -123 //true
var b4 = Infinity; //true
var b5 = NaN; //false
var b6; //false
var b7 = null; //false
//使用Boolean(变量) 来查看当前变量的真假

---

 流程控制

if

var age = 20;
if(age>18){
    //{}相当于作用域
    console.log('可以去会所');
}
alert('alex'); //下面的代码照样执行

if-else

var age = 20;
if(age>18){
    //{}相当于作用域
    console.log('可以去会所');
}else{
    console.log('好好学js,年纪够了再去会所');
}
alert('alex'); //下面的代码照样执行

if-else if -else

var age = 18;
if(age==18){
    //{}相当于作用域
    console.log('可以去会所');
}else if(age==30){
    console.log('该娶媳妇了！！');
}else{
    console.log('随便你了')
}
alert('alex'); //下面的代码照样执行

逻辑与&&、 逻辑或||

//1.模拟  如果总分 >400 并且数学成绩 >89分 被清华大学录入
//逻辑与&& 两个条件都成立的时候 才成立
if(sum>400 && math>90){
    console.log('清华大学录入成功')
}else{
    alert('高考失利')
}

//2.模拟 如果总分>400 或者你英语大于85 被复旦大学录入
//逻辑或  只有有一个条件成立的时候 才成立
if(sum>500 || english>85){
    alert('被复旦大学录入')
}else{
    alert('高考又失利了')
}

　　

switch 语句

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('很遗憾')

}
//注意：switch相当于if语句 但是玩switch的小心case穿透

　　

---

循环

我们要遵循三个要点：

1. 初始化循环变量
2. 判断循环条件
3. 更新循环变量

while循环

//打印0-100（不等于）的偶数
    var i = 1;   //初始化循环变量

    while (i<100){
        if(i%2 == 0){
            console.log(i)
        }
        i ++;
    } ;

　　

do-while循环

//不管有没有满足while中的条件do里面的代码都会走一次
var i = 3;//初始化循环变量
do{

    console.log(i)
    i++;//更新循环条件

}while (i<10) //判断循环条件

for循环

//用for打印1-100,以及求和
    var sum = 0;
    for (i = 0;i <= 100;i ++){
        console.log(i);
        sum = sum + i;
    } ;
    console.log(sum)

打印等腰三角形

for(var i=1;i<=6;i++){ //控制行数，一共显示6行 记得换行document.write('<br>');

        //控制我们的空格数
        for(var s=i;s<6;s++){
            document.write(' ');
        }
        //控制每行的输出*数
        for(var j=1;j<=2*i-1;j++){
            document.write('*');
        }
        document.write('<br>');

   }

　　

个人关于while和for循环的理解如下：

   }
    for(i=1;i<=5;i++){
        document.write('$')
    };
    document.write('<br>')
    var s = 1
    while (s<=5){
        document.write('$')
        s++;
    } ;

for循环在括号内的条件放到while中就如上述所示即可，循环条件是一个范围，更是一个类似次数的机制。

---

补充：