前端-javascript-ECMAScript5.0

-前端常用开发工具：sublime、visual Studio Code、HBuilder、Webstorm。

使用的PCharm跟WebStorm是JetBrains公司推出的编辑工具，开发阶段建议使用。

1、JS的引入方式

如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签。

<script> 和 </script> 会告诉 JavaScript 在何处开始和结束。

<script> 和 </script> 之间的代码行包含了 JavaScript:

---------

2、变量的使用

定义变量：var就是一个关键字，用来定义变量。所谓关键字，就是有特殊功能的小词语。关键字后面一定要有空格隔开。

变量的赋值：等号表示赋值，将等号右边的值，赋给左边的变量。

变量名：我们可以给变量任意的取名字。

变量要先定义，才能使用。比如，我们不设置变量，直接输出：

--------------------------

直接定义变量+赋值

变量的命名规范

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

下列的单词叫做保留字，就是说不允许当做变量名，不用记：
bstract、boolean、byte、char、class、const、debugger、double、enum、export、extends、final、float、goto
implements、import、int、interface、long、native、package、private、protected、public、short、static、super、synchronized、throws、transient、volatile

3、js基本的数据类型

 <script type="text/javascript">
        // js 基本的数据类型
        // 1.number 2.string 3.boolean 4.null 5.undefined
　　　　　
        1.number
        var $=100;
        console.log($);
        // typeof 变量名
        console.log(typeof $);

        var b=5/0;
        console.log(b);
        console.log(typeof b);//infinity 无限大
        //number类型


        //2.string
        var a='alex'; // 单引号 和 双引号 都可以表示字符串
        console.log(typeof a);

        var b='';
        console.log(typeof b);

        // + 可能是连字符 也可以是数字的加号
        // 字符串 + 数值 相当于字符串的拼接
        console.log('a'+'b'+1);
        // 数字和数字相加 是加号 表示运算
        console.log(1+2+3);
        // 小技巧  将数值类型转换成字符串类型
        var c=10+'';
        console.log(typeof c);//string类型

        // 3.boolean 布尔
        var isShow=false;
        console.log(typeof isShow);

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

        // 5. undefined 未定义的
        var e;
        console.log(e);//值 是undefined
        console.log(typeof e); //undefined 数据类型


         // 复杂（引用）的数据类型
         /*
            Function    def

            Object      dict

            Arrary      list

            String      string

            Date        time模块

            后面课程讲解
         */

    </script>

4、js里面的运算符

---------------------------------------------

----------------------------------------------

-----------------------------------------------------------------

==和===的区别

-------------------------------------------------

-----------------------------------------------

js中 !==和 !=的区别

!= 在表达式两边的数据类型不一致时,会隐式转换为相同数据类型,然后对值进行比较.

!== 不会进行类型转换,在比较时除了对值进行比较以外,还比较两边的数据类型, 它是恒等运算符===的非形式.

------------------------------------------------

数据类型转换

-------------------------------------------------------------

--------------------------------------------------------------------

-----------------------------------------------------------------

流程控制

1、if语句 不同之处在于 if ；else if；else

 <script type="text/javascript">
        // if 语句 if;else if;else//if else
        var age=20;
        // {}作为当前的作用域
        if(age>18){
            console.log('可以去会所了')
        }
        else {
            console.log('好好学前端')
        }
        console.log(222222)
        if(age==18){
            console.log('age=18')
        }
        else if(age==20){
            console.log('age=20')
        }
        else {
            console.log('age is beauty')
        }

    </script>

if语句的代码

--------------------------------------------------------------------------------------------------------------------------

2、逻辑与&&、 逻辑或||

//1.模拟  如果总分 >400 并且数学成绩 >89分 被清华大学录入
//逻辑与&& 两个条件都成立的时候 才成立
if(sum>400 && math>90){
    console.log('清华大学录入成功')
}else{
    alert('高考失利')
}
//2.模拟 如果总分>400 或者你英语大于85 被复旦大学录入
//逻辑或  只有有一个条件成立的时候 才成立
if(sum>500 || english>85){
    alert('被复旦大学录入')
}else{
    alert('高考又失利了')
}

3、switch语句

------------------------------------------

--------------------------------------------------------

4、while循环(先判断后执行)、do while循环(先执行后判断)

给大家总结了循环三步走，任何语言的循环离不开这三步：

初始化循环变量
判断循环条件
更新循环变量

--------------------------------

 <script type="text/javascript">
        //打印1-10之间的数
        var x=0;
        while (x<10){
            ++x;
            console.log(x)
        }
        //将1~100所有是2的倍数在控制台打印。
        var i=1;
        while (i<=100){
            if(i%2==0){
                console.log(i)
            }
            i=i+1;
        }
        
    </script>

whlie循环

------------------------------------------------------------

---------------------------------------------------------------------------

5、for循环、双层for循环

100以内的素数

-------------------------------------------------------

 <script type="text/javascript">
        // for 循环遍历列表 是最常用的对数据的操作，js使用for的方式
        // 输出1-100
        for(var i =0;i<=100;i++){
            console.log(i)
        }
       // 输出1-100之间所有数之和
        var sum=0;
        for(var j=1;j<=100;j++){
            sum=sum+j;
        }
        console.log(sum);
        // 输出1-100偶数
        for(var i=1;i<=100;i++){
            if(i%2==0){
                console.log(i)
            }
        }
        // 输出1-100之间的素数(质数(又称为素数)) ， “1”不算作素数

双层for循环

   // document.write 往页面上写内容
        // document.write('<h1>alex</h1>');
        document.write('111111');
        document.write('<h1>alex</h1>');
        for(var i=0;i<3;i++){//控制着你的行数
            for(var j=0;j<3;j++){//控制的星星
                document.write('*')
            }
           // document.write('<br>');
        }

//小作业：1.在浏览器中输出直角三角形
for(var i=1;i<=6;i++){ //控制的行数
   for(var j=1;j<=i;j++){ //控制的*
      　　document.write("*")；
   }

     document.write('<br>')；
}

2.在浏览器中输出 等腰三角形

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

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

   }

for、双层for

------重点来啦----常用内置对象（复杂数据类型）

1、数组-----对于python列表

 字面量方式创建（推荐大家使用这种方式，简单粗暴）

var colors = ['red','green','yellow'];

使用构造函数（后面会讲）的方式创建 使用new关键词对构造函数进行创建对象,构造函数与后面的面向对象有关系

var colors = new Array();
//通过下标进行赋值
colors[0] = 'red';
colors[1] = 'green';
colors[2] = 'yellow';
console.log(colors);

 --------------------------------------

 

------------------------------------------------------------------------------------------------------------

 ---------------------------------------------------------------------

 2、数组的常用方法

 

-------------------------------------------------------------------------

---------------------------------------------------------

 <script type="text/javascript">

        // 1.数组的合并
        var north=['北京','山东','吉林'];
        var south=['深圳','广州','佛山'];
        var newCity=north.concat(south);
        console.log(newCity);

        // 2.join 将数组中元素使用指定的字符串连接起来，会返回新的字符串
        var score=[12,1,2,3,4];
        var str=score.join('$');
        console.log(str);

        // 3.slice(start,end)相当于切片功能，顾头不顾尾
        var arr=['北京','山东','吉林','深圳','广州','佛山'];
        var newarr=arr.slice(0,3);
        console.log(newarr);

        // 4.pop移除数组的最后一个元素
        var arr2=['北京','山东','吉林','深圳','广州','佛山'];
        var newarr2=arr2.pop();//移除最后一个并返回
        console.log(arr2);//["北京", "山东", "吉林", "深圳", "广州"]
        console.log(newarr2);// '佛山'
        // var newarr3=arr3.pop(1);和python 列表不同的是指定索引没有，还是移除最后一个元素

        // 5.push() 向数组最后添加一个元素
        var arr3=['北京','山东','吉林','深圳','广州','佛山'];
        arr3.push('武汉');
        console.log(arr3);// ["北京", "山东", "吉林", "深圳", "广州", "佛山", "武汉"]

        //  6.reverse 翻转数组
        var arr4=['北京','山东','吉林','深圳','广州','佛山'];
        var newarr4=arr4.reverse();
        console.log(newarr4);

        // 7 sort 对数组排序
        var arr5=['1北京','4山东','6吉林','2深圳','0广州','7佛山'];
        var newarr5=arr5.sort();
        console.log(newarr5);

        // isArray() 判断是否为数组  返回为ture|false
        var a=1;
        var iArry=a.isArray;
        if(iArry){
            console.log('是数组')
        }
        else {
            console.log('不是数组')
        }

         // 补充：
    // forEach（fn）==回调函数  匿名函数  通过forEach遍历数组的每一项内容

    // 回调函数中的参数 第一个参数为item (每一项内容) 第二个参数 是数组的索引

        arr5.forEach(function(item,index){
        console.log(item);
        console.log(index);
        })

    </script>

常用数组方法

-------------

-------------------------------------------------------

 3、字符串string

------------------------------------------------------------------------------------------------------------------------------------------------------