zoukankan      html  css  js  c++  java
  • day 50 js-part1基础语法,数据类型及用法,流程控制语句,循环

    js基本概念:

    JavaScript 是世界上最流行的脚本语言。

    JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies,以及更多的应用。

    JavaScript 是属于 web 的语言,它适用于 PC、笔记本电脑、平板电脑和移动电话。

    JavaScript 被设计为向 HTML 页面增加交互性。

    • 核心(ECMAScript) 
    • 文档对象模型(DOM) Document object model (整合js,css,html)
    • 浏览器对象模型(BOM) Broswer object model(整合js和浏览器)
    JS (JavaScript)
    
        一门编程语言,和 PythonJavaPHPGo C++C# 类似的.
        
        
        node.js 可以跑在服务器上的JS
    
            
        ES6(EMCAScript 2016) /ES7 语法
        
        
        JS学习内容: (3天)
            1.JS语言基础:
                1.基本数据类型
                2.变量
                3.流程控制
                4.语法/注释
                
                5.函数
                6.对象
                
            2.DOM和BOM编程
            
            DOM --> Document Object Model
            BOM --> Browser  Object Model
            
            
        JS语法基础:
            语句结束之后要写分号;  *****
            $也可以做变量名
            推荐使用驼峰命名
        
        JS数据类型:
            数字类型
            
            字符串类型
                字符串自带的那些属性和方法
            字符串转数字
            
            布尔类型
            
            数组
                数组的内置属性和方法
                数组的遍历
                    
            var i = 0;
            i++;    i= i+1;  --> i+=1(Python);
            
            
            对象(简单的对象)
                对象的遍历
            
            条件判断和循环
                if... else ...
                if... else if...else
                switch
                    case 值1: 要做的事儿;break;
                    case 值2: 要做的事儿;break;
                    default: 条件都不满足默认执行的
    {类似于python里面的条件判断,如果满足第一个条件就执行后面的代码,如果满足第二个条件就执行后面的代码,依次类推;如果不加上break的话,找到了满足条件的代码后,执行完了满足条件的内容会接着继续执行下面的内容,直至全部执行完才会终止程序}
                    
                for 循环
                for (var i=0;条件;i++){
                    循环要做的事儿;
                }
                
                while循环
                    while (条件){
                       循环要做的事儿;
                    }
                    
                三元运算
                    条件 ? 值1: 值2
    View Code

    注释是代码之母;

    //一行注释用

    /*

    *

    *

    *多行注释用 ,跟html和css是一样的

    */

     注: 这里的每一行都需要有*否则,如果只有开始和结尾处的*/是无法执行注释的

    js特有标签:

    <script>

    在此标签内写入js代码块

    </script>

    引入外部的js文件:

    <script src="myscript.js"></script>

    基本语法:

    用;作为结束符,必须要有的

    变量名跟python一样,使用数字,$,字母_,不能以数字开头,

    声明变量使用var变量名;这样的格式来声明====>  var name="egon"    变量名是区分大小写的.

    数据类型:

    数字:js不区分整型和小数,

    var a = 12.34;
    var b = 20;
    var c = 123e5;  // 12300000   这123e5---是在123后面加上五个零的意思,
    var d = 123e-5;  // 0.00123   这123e-5-----是在123从后往前倒,小数点往前挪动5位
    var s;//返回值undefined 没有值
    var s=1; //s是数字
    var s='1qw'//s是字符串
    parseInt("abd");//返回值是非数字的值
    parseInt(123);//返回值是数字
    字符串:
    var a = "Hello" var b = "world; var c = a + b; console.log(c); // 得到Helloworld

     字符串常用方法:

    方法    说明
    obj.length    返回长度
    obj.trim()    移除空白
    obj.trimLeft()    移除左边的空白
    obj.trimRight()    移除右边的空白
    obj.charAt(n)    返回第n个字符
    obj.concat(value, ...)    拼接
    obj.indexOf(substring, start)    子序列位置
    obj.substring(from, to)    根据索引获取子序列
    obj.slice(start, end)    切片
    obj.toLowerCase()    小写
    obj.toUpperCase()    大写
    obj.split(delimiter, limit)    分割
     
    
    拼接字符串一般使用“+”
    View Code

     分别举例:

    slice(start,end),切片顾头不顾尾

    var a="alex23ag";
    undefined
    a
    "alex23ag"
    a.slice(2,5);
    "ex2"

    var a=[1,2,3];
    undefined
    a.length  //求该元素的长度
    3
    
    
    
    var b="  12 bo  ";
    undefined
    b.trim();  //去空格
    "12 bo"
    
    
    b
    "  12 bo  "
    
    b.trimLeft();  //去左边空格
    "12 bo  "
    
    b.trimRight();  //去右边空格
    "  12 bo"
    
    b.charAt(2);  //返回给元素的索引为2的数据
    "1"
    
    b.concat(123); //拼接元素,
    "  12 bo  123"
    
    b.concat(12,"we"); //拼接多个元素,
    "  12 bo  12we"
    
    
    
    a1
    "12 bo"
    
    a1.indexOf("b",0);//这里的indexOf是在数据a1里面找指定的元素"b",
    然后从索引0开始找起,,找到一个即返回结果,不管后面是否还有其他的满足条件的结果.
    如果找不到则返回-1.
    3
    a1.indexOf("o",0);
    4
    a1.indexOf(" ",0);
    2
    a1.indexOf(1,0);
    0
    a1.indexOf(2,0);
    1
    
    
    d
    "12 bo12121212"
    d.substring(0,8);//切片,只用正序,不用倒序,跟python的切片差不多,也是最后一位不取,顾头不顾尾
    
    a1
    "12 bo"
    a1.toLowerCase()//小写
    "12 bo"
    a1.toUpperCase();//大写
    "12 BO"
    
    d
    "12 bo12121212"
    d.split(1,3);//这里是分割,把d字符串根据1来分割,然后只显示分割后的前三个元素,
    (3) ["", "2 bo", "2"]
    d.split(1,2);//这里是分割,把d字符串根据1来分割,然后只显示分割后的前两个元素,
    (2) ["", "2 bo"]
    View Code

    拼接字符串:

    d
    "12 bo12121212"

    a1
    "12 bo"

    a1+d
    "12 bo12 bo12121212"

    d+a1
    "12 bo1212121212 bo"

     数组用法:

    var a=[12,"ab"];

    a[0];
    12

    a[1];
    "ab"

    a[2];
    undefined

     数组用法:

    方法    说明
    obj.length    数组的大小
    obj.push(ele)    尾部追加元素
    obj.pop()    获取尾部的元素
    obj.unshift(ele)    头部插入元素
    obj.shift()    头部移除元素
    obj.slice()    切片
    obj.reverse()    反转
    obj.join(seq)    将数组元素连接成字符串
    obj.concat(val, ...)    连接数组
    obj.sort()    排序
    
    遍历数组中的元素:
    for (var i=0;i<a.length;i++){
    console.log(i);}
    
    这句话翻译成白话文,就是定义一个i变量,让他的初始值为0,然后判断他的长度要小于
    所要遍历的元素的长度,然后就执行后面的console.log(i)这就类似于python里面的print
    打印功能,然后执行完一次后就自动加1,i++就类似于i+=1,再接着去执行后面一句,循环反复
    直到都打印完为止.
    View Code

    用法分别举例:

    var qa=[12,"re",23];
    (3) [12, "re", 23]
    qa.length;  //测量长度
    3
    
    qa.push(987);//尾部追加元素
    4
    qa
    (4) [12, "re", 23, 987]
    
    qa.pop();//提取了尾部的元素,
    987
    qa
    (3) [12, "re", 23]  //尾部元素被提取之后就被删掉了,原本的元素里面就没有他了
    
    qa.shift();//移除头部元素,然后原本的元素被提取头部后就没有他了
    12
    qa
    (2) ["re", 23]
    
    qa.unshift(332);//不移除就是插入的意思,这里在头部插入元素
    3
    qa
    (3) [332, "re", 23]
    
    
    
    qa
    (3) [332, "re", 23]
    qa.slice(1);  //这里是切掉第一个元素,然后把剩余的保留返回结果
    (2) ["re", 23]
    qa.slice(2);  //这里是切掉第一个元素,然后把剩余的保留返回结果
    [23]
    
    qa.reverse();
    (3) [23, "re", 332] //按照原来的顺序倒转过来,仅仅是倒转而已
    
    qa.sort();
    (3) [23, 332, "re"]  //按照顺序从小到大排列
    
    qa.join();
    "23,332,re"//把数组里面的元素转换成字符串
    
    qa.concat("aaa",12);
    (5) [23, 332, "re", "aaa", 12]
    View Code

    对象:

    类似于字典
    var a = {"name": "Alex", "age": 18};
    console.log(a.name);
    console.log(a["age"]);
    
    for (var i in a){
    console.log(i,a[i]);
    }
    name egon
    age 20
    View Code
    • undefined表示的是当声明的变量未初始化时,该变量的默认值是undefined。还有就是函数无明确的返回值时,返回的也是undefined。
    • null表示值不存在

    查询数据类型:

    typeof "abd";
    "string"
    typeof null;
    "object"
    typeof true;
    "boolean"
    typeof 123;
    "number"

     运算符:(跟python基本一致)

    算数运算,

    + - * / % ++ --

    比较运算,

    > >= < <= != == === !==
    1=="1" true===这是把字符串转换成数字来进行比较,js自动进行转换
    1==="1" false====这是进行强比较,在值的比较的基础上,再更进一步进行类型的比较,要类型也相同才可以

    逻辑运算,

    &&(and) ||(or) !

    赋值运算,

    = += -= *= /=

    流程控制:(基本跟python一致)

    if, else:
    
    var a = 10;
    if (a > 5){
    console.log("yes");
    }else {
    console.log("no");
    }
    
    
    if, else-if, else: 
    var a = 10;
    if (a > 5){
    console.log("a > 5");
    }else if (a < 5) {
    console.log("a < 5");
    }else {
    console.log("a = 5");
    }
     switch


    var day
    = new Date().getDay(); switch (day) { case 0: console.log("Sunday"); break; case 1: console.log("Monday"); break; default: console.log("...") }



    var day = new Date().getFullYear();

    switch (day) {
    case 0:
    console.log("Sunday");
    break;
    case 3:
    console.log("Monday");
    break;
    case 2019:
    console.log("current year");
    break;
    default:
    console.log("...")
    }

    >>>:current year

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

     var i = 0;
     while (i < 4) {
     console.log(i);
     i++;
     }

     

    三元运算符:

    var a = 1;
    var b = 2;
    var c = a > b ? a : b

  • 相关阅读:
    python爬虫-execjs使用
    关于命令行操作数据库整理
    php项目整理之no1
    c++笔记整理
    php实战开发之自我整理(学习笔记)
    php之JavaScript
    html嵌入样式表
    php-css外边距
    The report for triangle problem
    An error in projects
  • 原文地址:https://www.cnblogs.com/2012-dream/p/8117381.html
Copyright © 2011-2022 走看看