zoukankan      html  css  js  c++  java
  • Javascript基础

    JavaScript的组成:

      Javascript基础分为三个部分:

        1,ECMAScript:JavaScript的语法标准,包括变量,表达式,运算符,函数,if语句,for语句等。

        2,DOM:操作网页上的元素的API。比如让盒子移动,变色,轮播图等。

        3,BOM:操作浏览器部分功能的API。比如让浏览器自动滚动。

    JavaScript的特点:

      1,简单易用:可以使用任何文本编辑工具编写,只需要浏览器就可以执行程序。

      2,解释执行(解释语言):事先不编译,逐行执行,无需进行严格的变量声明。

      3,基于对象:内置大量现成对象,编写少量程序可以完成目标。

    第一个JavaScript代码:

    !DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script>
            alert("顾清秋")
        </script>
    </head>
    <body>
        
    </body>
    </html>
    View Code

    alert:弹出警告框。

    语法规则:

      1,JavaScript对换行,空格,缩进不敏感。末尾一定要加分号。

      2,所有的符号,都是英语的。

      3,JavaScript的注释:单行注释://   。  多行注释:/**/  。

    JavaScript在网页中输出信息的写法:

      弹出警告框:alert('')

      控制台输出:console.log(")

    console.log(")表示在控制台中输出,console表示“控制台”,log表示"输出"。

    控制台在chrome浏览器的F12中。 

    用户输入:prompt()语句

      prompt() 就是专门用来弹出能够让用户输入的对话框。

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script>
            alert("顾清秋")
            var a = prompt('请输入你的姓名:')
            alert(a)
            console.log(a)
        </script>
    </head>
    <body>
    
    </body>
    </html>
    prompt

      prompt语句,输入的内容都会转成字符串的方式打印出来。

    直接量:数字和字符串

      ”直接量“即常量,也称为“字面量”。

      1,数字。2,字符串。

    变量的定义和赋值:

      定义变量:var 变量名。

      变量的赋值:如: var a = 10;

    变量的命名规范:

      只能由字母,数字,下划线,美元符号$构成,且不能以数字开头。

    下列的是保留字,不允许被当作变量名:

    abstract、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

    变量的类型:

      变量里面能够存储数字,字符串等,变量会自动的根据存储的内容的类型的不同来决定自己的类型。

    数值型:number

      存放数字的类型就是数值型。

      typeof():可以查看变量的类型。

      在JavaScript中,只要是数就是数值型。

    字符串型:string  

    var a = "abcde";
        var b = "路飞";
        var c = "123123";
        var d = "哈哈哈哈哈";
        var e = "";     //空字符串
    
        console.log(typeof a);
        console.log(typeof b);
        console.log(typeof c);
        console.log(typeof d);
        console.log(typeof e);
    View Code

    连字符和加号的区别

    键盘上的+可能是连字符,也可能是数字的加号。如下:

       console.log("我" + "爱" + "你");   //连字符,把三个独立的汉字,连接在一起了
        console.log("我+爱+你");           //原样输出
        console.log(1+2+3);             //输出6

    总结:如果加号两边都是数值,此时是加。否则,就是连字符(用来连接字符串)。

    变量值的传递(赋值):

    语句:

       a = b;

    把b的值赋给a,b不变。

    将等号右边的值,赋给左边的变量;等号右边的变量,值不变。

    举个特殊的例子:

            var a = "3";
            var b = 2;
            console.log(a-b);

    效果:(注意,字符串 - 数值 = 数值)

    变量格式转换

    用户的输入

    我们在上面的内容里讲过,prompt()就是专门用来弹出能够让用户输入的对话框。重要的是:用户不管输入什么,都是字符串。

    parseInt():字符串转数字

    parseInt()可以将字符串转数字。parse表示“转换”,Int表示“整数”(注意Int的拼写)。例如:

    字符串转数字的方法:

     parseInt(“5”);

    parseInt()还具有以下特性

    (1)带有自动净化的功能;只保留字符串最开头的数字,后面的中文自动消失。例如:

    console.log(parseInt("2018你真帅!!");

    (2)自动带有截断小数的功能:取整,不四舍五入

    var a = parseInt(5.8) + parseInt(4.7);
    console.log(a);
     var a = parseInt(5.8 + 4.7);
     console.log(a);

    数据类型:

    基本数据类型:

      number:

    var a = 123;
    //typeof 检查当前变量是什么数据类型
    console.log(typeof a)
    //特殊情况
    var a1 = 5/0;
    console.log(typeof e1) //Infinity 无限大. number类型

      string:

    var str  = '123'
    console.log(typeof str)

      boolean:

    var b1 = false;
    console.log(typeof b1)

      null:

    var c1 = null;//空对象. object
    console.log(c1)

      undefined:

    var d1;
    //表示变量未定义
    console.log(typeof d1)

    引用数据类型:

    • Function
    • Object
    • Arrray
    • String
    • Date

    赋值运算符:

      以var x = 12, y = 5 示例:

    算术运算符:

      var a = 5 , b = 2

     比较运算符:

    字符串的拼接:

    var  firstName  = '小';
    var lastName = '马哥';
    var name = '伊拉克';
    var am = '美军';
    // 字符串拼接
    var str = "2003年3月20日,"+name+"战争爆发,以美军为主的联合部队仅用20多天就击溃了萨达姆的军队。这是继十多年前的海湾战争后,"+am+"又一次取得的大规模压倒性军事胜利。"
    var fullStr = str;
    console.log(fullStr)
    
    var fullName = firstName +" "+ lastName;
    console.log(fullName)
    View Code
    // 不能对字符串进行+运算 只能拼接
    var a1 = '1';
    var a2 = '2';
    console.log(a1-a2) //12
    var b1 = 'one';
    var b2  = 'two';
    
    // NaN. ==== not a number 是number类型
    console.log(typeof(b1*b2))

    数值型转换成字符串类型:

    隐式转换:

    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())

    将字符串类型转换成数值类型:

    var  stringNum = '789.123wadjhkd';
    var num2 =  Number(stringNum);
    console.log(num2); //NaN   Not a Number  不是一个数值,但是NaN是数值类型。  
    //类似于遍历 将数值型遍历出来直到遇到非数字。
    
    // parseInt()可以解析一个字符串 并且返回一个整数
    console.log(parseInt(stringNum));  // 789
    console.log(parseFloat(stringNum)); // 789.123

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

    var b1 = '123';
            var b2 = 0;
            var b3 = -123;
    
            var b4 = Infinity; 
            var b5 = NaN;
    
            var b6; //undefined
            var b7 = null;
    
            // 非0既真
            console.log(Boolean(b1)); // true
            console.log(Boolean(b2));  // false   
            console.log(Boolean(b3));  // true
            console.log(Boolean(b4));  // true
            console.log(Boolean(b5));  // false
            console.log(Boolean(b6));  // false
            console.log(Boolean(b7));  // false
    View Code

    流程控制:

      if            if else            if  else if  else

            var a = 18;
            if (a>=20){
                console.log('恭喜恭喜');
            }
            else if(a<20 && a>=15){
                console.log('不错');
            }
            else if(a<15 && a>=10){
                console.log('很好');
            }
            else{
                console.log('抱歉');
            }

    逻辑与&& 逻辑或 ||:

    //1.模拟  如果总分 >400 并且数学成绩 >89分 被清华大学录入
    //逻辑与&& 两个条件都成立的时候 才成立
    if(sum>400 && math>90){
        console.log('清华大学录入成功')
    }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('很遗憾')
    
    }

    while 循环:

    var i = 1; //初始化循环变量
    
    while(i<=9){ //判断循环条件
        console.log(i);
        i = i+1; //更新循环条件
    }

    do_while:

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

    for 循环:

    for(var i = 1;i<=10;i++){
         console.log(i)
     }

      1~100之间所有数的和:

    var sum = 0;
    for(var j = 1;j<=100;j++){
        sum = sum+j
    }
    console.log(sum)

      双重for循环:

    for(var i=1;i<=3;i++){
                
       for(var j=0;j<6;j++){
            document.write('*')
        }
                
       document.write('<br>')
     }

    在浏览器中输出直角三角形:

    for(var i=1;i<=6;i++){
       for(var j=1;j<=i;j++){
            document.write("*");
       }
                    
         document.write('<br>');
    }

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

              for(var i=1;i<=6;i++){ //行数
                    
                    //控制我们的空格数
                    for(var s=i;s<6;s++){
                        document.write('&nbsp;')
                    }
                
    
                    for(var j=1;j<=2*i-1;j++){
                        document.write('*')
                    }
                    document.write('<br>')
                    
                }
  • 相关阅读:
    loj#6433. 「PKUSC2018」最大前缀和(状压dp)
    PKUWC2019游记
    10. Regular Expression Matching
    9. Palindrome Number
    8. String to Integer (atoi)
    7. Reverse Integer
    6. ZigZag Conversion
    5. Longest Palindromic Substring
    4. Median of Two Sorted Arrays
    3. Longest Substring Without Repeating Characters
  • 原文地址:https://www.cnblogs.com/stfei/p/9101924.html
Copyright © 2011-2022 走看看