前端- JavaScript - 总结

时间：2018-06-24 00:49:30 阅读：132 评论：0 收藏：0 [点我收藏+]

1、JavaScript的介绍

javaScript是一种web前端的描述语言，也是一种基于对象（object）和事件驱动（Event Driven）的、安全性好的脚本语言。
它运行在客户端从而减轻服务器的负担。

1.javaScript的特点：
    javaScript主要用来向html页面中添加交互行为
    javaScript是一种脚本语言，语法和c语言系列语言的语法类似，属弱语言类型。
    javaScript一般用来编写客户端脚本，如node.js例外。
    javaScript是一种解释型语言，边执行边解释无需另外编译。

2.javaScript的用途:
    解决页面交互和数据交互，最终目的是丰富客户端效果以及数据的有效传递。
    1.实现页面交互，提升用户体验实现页面特效。即js操作html的dom节构或操作样式。
    2.客户端表单验证即在数据送达服务端之前进行用户提交信息即时有效地验证，减轻服务器压力。即数据交互。

3.javaScript和ECMAScript的关系：
    ECMAScript是欧洲计算机制造商协会，基于美国网景通讯公司的Netscape发明的javaScript和
    Microsoft公司随后模仿javaScript推出JScript脚本语言制定了ECMAScript标准。

4.javaScript的组成：
    ECMAScript、DOM、BOM

2、三种引入方式

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <!-- 外链式 -->
    <script src="./1.js"></script> 
</head>
<body>
    <!-- 行内式引入-->
    <p id=‘p1‘ onclick="clickhandler()">123</p>

</body>

    <!-- 内部式  -->
    建议 引入的时候要在body之后，我们要等待所有的dom元素加载完成之后再去执行相应的js操作
<script type="text/javascript">
    document.write(‘<span class="span1">233</span>‘)
    console.log(‘星儿今天很漂亮！‘)
</script>

</html>

3、变量

1.变量与常量

变量：即在程序运行过程中它的值是允许改变的量。

常量：即在程序运行过程中它的值是不允许改变的量

2.变量的声明和定义

#1.先声明后定义

var dog;
// alert(dog) //undefined  未定义
// 定义
dog = ‘小黄‘;


#2.声明立刻定义

var dog_2 = ‘小红‘;
console.log(dog_2); //小红

3.变量名规范

  1.严格区分大小写 
  2.命名时名称可以出现字母、数字、下划线、$ ,但是不能数字开头，也不能纯数字 ，不能包含关键字和保留字。 
    关键字：var number 
    除了关键字 top name 也尽量不使用。 

 3.推荐驼峰命名法：有多个有意义的单词组成名称的时候，第一个单词的首字母小写，其余的单词首字母写 
 4.匈牙利命名：就是根据数据类型单词的的首字符作为前缀

4、javascript中的数据类型

数据类型包括：基本数据类型和引用数据类型

# 5种基本数据类型

基本数据类型指的是简单的数据段

1.number
        var a = 123;
2.string
       var str  = ‘123‘
3.boolean
      var b1 = false;
4.null
    var c1 = null;//空对象. object
5.undefined
    var d1;
    //表示变量未定义

#5种引用数据类型
引用数据类型指的是有多个值构成的对象

Function
Object
Arrray
String
Date

查看数据类型： console.log(typeof b1);

5、数据类型的转换

  <script type="text/javascript">
        
// 1.将数字类型 转换成字符串类型

        var n1 = 123;
        var n2 = ‘123‘;
        var n3 = n1+n2;
        // 隐式转换
        console.log(typeof n3);

        // 强制类型转换 String() toString()
        var str1 = String(n1);
        console.log(typeof str1);

        var num = 234;
        console.log(num.toString())


// 2.将字符串类型 转换成数字类型

        var  stringNum = ‘789.123wadjhkd‘;
        var num2 =  Number(stringNum);
        console.log(num2)


        // parseInt()可以解析一个字符串 并且返回一个整数
        console.log(parseInt(stringNum))

        console.log(parseFloat(stringNum));


// 3.在我们js中所有的数据类型 都被转化为boolean类型

        var b1 = ‘123‘;
        var b2 = 0;
        var b3 = -123

        var b4 = Infinity; //
        var b5 = NaN;

        var b6; //undefined
        var b7 = null;

        // 非0真1
        console.log(Boolean(b7))


    </script>

6、js的运算符

1，算术运算符(+  -  *  /  %   ++  -- )
2，比较运算符(>  >=   <   <=   !=   ==  ===   !==)
3，逻辑运算符(&&   ||   ！)
4，赋值运算符(=  +=   -=  *=   /=)
5，字符串运算符(+  连接，两边操作数有一个或两个是字符串就做连接运算)

 <script type="text/javascript">
        
        // 1.赋值运算符
         var money = prompt(‘请输入金额....‘);
         var saveMoney = money * (1+0.02);
         console.log(saveMoney)


        // 2.算数运算  + - * / %
        var a = 10;
        var b = 9;
        var sum = a  + b;
        var min = a - b;
        var div = a /b;
        var lef = a % b;

        // 3.复合运算符  a++  ++a
        var c = 7,d = 8;

        // d = c + d;
         d+=c;
         console.log(d);
         d++; //d = d+1
         console.log(d);

        // 自增 自减
        // d++ :先赋值后++ 先将d的值赋值给c1 然后再让d加上1 对d赋值
        var c1  = d++;
        console.log(c1); //8
         console.log(d); //9

         // ++d:先相加后赋值
        var c2 = ++d;
        console.log(c2); //10

        
        // 3.比较运算符
        // > ,<, >=, <=,== ,===
        
        console.log(5>6);

        // 隐式转换== 比较的是值的大小。=== 是类型和值都进行比较
        console.log("5" === 5);

        
        // 4.逻辑运算符   &&   and || or
        console.log(false && false);   // && 都真为真 只要有一个是假就为假
        console.log(false || false);  // || 有真就真。或者的意思
    </script>

特殊：字符串拼接

        // 不能对字符串进行+运算 只能拼接
        var a1 = ‘1‘;
        var a2 = ‘2‘;
        console.log(a1+a2); //12
        console.log(typeof(a1*a2));

6、流程控制

1.if语句：
    if (true) {
       //执行操作
    }else if(true){
        //满足条件执行
    }else if(true){
       //满足条件执行
    }else{
      //满足条件执行
    }
    注意：浏览器解析代码的顺序 是从上往下执行，从左往右

2.switch:
    var gameScore = ‘good‘;
    switch(gameScore){
        case ‘best‘:
            console.log(‘best‘);
            break;
        case ‘good‘:
            console.log(‘good‘);
            break;
        case ‘better‘:
            console.log(‘better‘);
            break;
        default:
            console.log(‘default‘)
    }

3.while:
    循环三步走：
        1.初始化循环变量
        2.判断循环条件
        3.更新循环变量

    var j=1;
    while(j<=100){
        if(j%3===0){
            console.log(j)
        }
        j++;
    }

4.do_while:
    1.初始化循环变量 2.判断循环条件 3.更新循环变量
    //不管有没有满足while中的条件do里面的代码都会走一次
    var i = 3;
    do{
        console.log(i);
        i++;
    }while(i<=5);

5.for:
    1.初始化 2.循环条件 3.更新循环变量
    for(var i = 0; i < 100; i++){
        if(i%2 === 0){
            console.log(i)
        }
    }
    for(var i=1;i<=3;i++){
        for(var j=1;j<=6;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

          *      2*1-1
         ***     2*2-1
        *****    2*3-1
       *******   2*4-1
      *********  2*5-1
     *********** 2*6-1

    for(var m=1;m<=6;m++){
        for(var n1=m;n1<6;n1++){
            document.write(‘&nbsp;‘)
        }
        for(var n2=1;n2<=2*m-1;n2++){
            document.write(‘*‘)
        }
        document.write(‘<br>‘)
    }


  # 打印三角形 3

          *      2*1-1
         ***     2*2-1
        *****    2*3-1
       *******   2*4-1
      *********  2*5-1
     *********** 2*6-1
      *********
       *******
        *****
         ***
          *

    for(var a=1;a<=11;a++){
        if(a<=6) {
            for (var a1 = a; a1 < 6; a1++) {
                document.write(‘&nbsp;‘)
            }
        }else{
            for(var a2=7;a2<=a; a2++){
                document.write(‘&nbsp;‘)
            }
        }
        if(a<=6){
            for(var a3=1;a3<=2*a-1;a3++){
                document.write(‘*‘)
            }
        }else{
            for(var a4=a*2-1;a4<22;a4++){
                document.write(‘*‘)
            }
        }
        document.write(‘<br>‘)
    }

7.内置对象

数组Array，字符串String，日期Date，Math内置对象

内置对象就是ECMAScript提供出来的一些对象，我们知道对象都是有相应的属性和方法

http://www.cnblogs.com/venicid/p/9128094.html

前端- JavaScript - 总结

标签：体验 div efi 声明和定义 soft 编译 text IV 字符串

原文地址：https://www.cnblogs.com/venicid/p/9219130.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行