zoukankan      html  css  js  c++  java

  • JavaScript基础学习目录

     

    一、JS如何引入及基本语法规范

    1.页面内的script代码书写格式

    1
    2
    3
    <script>
    　　code.....
    </script>

    2.script标签写在页面的哪个位置？

    2.1.页面head里和body后都可以写

    2.2.一般我们建议写在body之后

    3.是否可以引入第三方js文件？

    1
    <script type='text/javascript' src='/path/to/js文件'></script>

    4.JS的注释方式

    1
    2
    3
    4
    5
    // 这个是单行注释
     
    /**
    这个是多行注释
    **/

    快捷键：Ctrl + / 

    5.JS的结束符号,以分号“；”为结束符号，如果没有的话，js引擎会自动加上

    二、变量声明

    命名规范

    1.JS的变量名 可以使用 _，数字，字母，$ 组成，且不能以数字开头

    2.声明变量使用 var 变量名 来进行声明

    1
    2
    3
    4
    5
    6
    7
    8
    9
    var a = 34;
    var b = 45;
    console.log(a+b);
     
    var $ = 'jquery'
    alert($);
     
    c = 56;
    alert(c);

    注意：变量名区分大小写str和Str不是一个变量，也就是js对变量名的大小写是敏感的

    三、JS变量类型

    js的变量类型主要包括：

    • 数值
    • 字符串
    • 布尔
    • null
    • undefined
    • 数组
    • 对象

    1) 数值类型
    js不区分 整型和浮点型

    1
    2
    3
    var a = 23;
    var b = 34;
    console.log(a);

    常用的方法

    • parseInt(..) 将某值转换成数字， 不成功则NAN
    • parseFloat(..) 将某值转换成浮点数，不成功则NAN
      1
      2
      parseInt('3.5')
      parseFloat('2.3dd')

    2) 字符串类型

    1
    2
    3
    4
    5
    var a = 'hello'
    var b = 'world'
     
    var str = a + b;
    console.log(str);

    常用的方法:

    • 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)　　　　　             分割

    注意：拼接字符串的操作符：”+”

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    console.log(3 + 2 + "hello" + 5 + "world");
    ```
     
     
     
    **3) 布尔类型**
    **true和false要求是要小写的**
     
    ```javascript
    var a = true;
    var b = false;

    4) 数组型
    javascript中的数组类似于我们Python中的列表

    1
    2
    var arr = ['alex','凤姐','苍老师'];
    console.log(arr[2]);

    常用的方法:

      • obj.length 　　数组的大小
      • obj.push(ele) 　　尾部追加元素
      • obj.pop() 　　尾部获取一个元素
      • obj.unshift(ele) 　　头部插入元素
      • obj.shift() 　　头部移除元素
      • obj.slice( ) 　　切片
      • obj.reverse( ) 　　反转
      • obj.join(sep) 　　将数组元素连接起来以构建一个字符串
      • obj.concat(val,..)　　 连接数组
      • obj.sort( ) 　　对数组元素进行排序

    此时如果我们想要循环数组中的内容，我们可以这样:

    1
    2
    3
    4
    5
    var arr = ['alex','凤姐','苍老师'];
     
    for(var i = 0; i < arr.length; i++){
    　　console.log(arr[i]);
    }

    5) 对象型
    javascript中的对象类似于我们Python中的字典,json数据格式

    1
    2
    3
    var info = {"name":'alex',"age":73}
    console.log(info.name);
    console.log(info['name']);

    此时如果我们想要循环对象中的内容，我们可以这样:

    1
    2
    3
    4
    var info = {"name":'alex',"age":73}
    for(var i in info){
    　　console.log(info[i]);
    }

    6) null和undefined

    1.undefined 表示的是当声明的变量未初始化时，该变量的默认值是 undefined
    2.null 表示的是值不存在

    两者的区别在于：

    • undefined 是声明了变量但未对其赋予值
    • null 则用于表示尚未存在的空值
    四、运算符介绍

    1) 算数运算符

    1
    + - * / % ++ --

    2) 比较运算符

    1
    >　　 >=　　 <　　 <=　　 !=　　 ==　　 === 　　!==

     ===  比较值和类型

     ==   比较值

    3) 逻辑运算符

    1
    &&　　 ||　　 ！

    4) 赋值运算符

    1
    =　　 +=　　 -=　　 *= 　　/=
    五、流程控制

    1）if–else语句

    1
    2
    3
    4
    5
    if (条件){
    　　当条件为 true 时执行的代码
    }else{
    　　当条件不为 true 时执行的代码
    }

    2）if–else if–else语句

    1
    2
    3
    4
    5
    6
    7
    if (条件 1){
    　　当条件 1 为 true 时执行的代码
    }else if (条件 2){
    　　当条件 2 为 true 时执行的代码
    }else{
    　　当条件 1 和 条件 2 都不为 true 时执行的代码
    }

    3)switch语句

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    var day=new Date().getDay();
    switch (day){
    case 0:
    　　x="Today it's Sunday";
    　　break;
    case 1:
    　　x="Today it's Monday";
    　　break;
    case 2:
    　　x="Today it's Tuesday";
    　　break;
    case 3:
    　　x="Today it's Wednesday";
    　　break;
    default:
    　　x="Looking forward to the Weekend";
    }

    4）while循环语句

    1
    2
    3
    4
    while (i<5){
    　　x=x + "The number is " + i + "<br>";
    　　i++;
    }

    5) 三元运算符

    1
    2
    3
    4
    5
    var a = 3;
    var b = 5;
     
    c = a > b ? a : b
    console.log(c);
    六、函数

    1.函数的定义
    注意：javascript中的函数和python的中函数大同小异，唯一不同的是函数的定义方式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    1.正常的定义方式 ---- 普通青年
    function test(a,b){
    　　return a + b;
    }
     
    2.匿名函数的定义方式 ---- 2B青年
    var sum = function(a, b){
    　　return a + b;
    }
     
    3.立即调用函数方式 ----- 文艺青年
    (function(a, b){
    　　return a + b;
    })();

    2.函数的全局变量和局部变量

    全局变量：定义在函数外部，并且推荐使用var进行显式声明
    局部变量：定义在函数内部，并且必须使用var进行显式声明

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    // 全局变量
    age = 73;
     
    function test(){
    // 局部变量
    var height = 178;
     
    // 默认全局变量
    leg = 4;
    }

    3.函数作用域
    首先在函数内部查找变量，找不到则到外层函数查找，逐步找到最外层
    即window对象，并操作window对象上的属性

    1
    2
    3
    4
    5
    6
    console.log(window.a, window.b);
    function test(){
    　　var a = "local";
    　　b = "global";
    }
    console.log(window.a, window.b);
    七、常见的模块和常用方法

    1.日期类Date

    var d = new Date();　　　返回当日的日期和时间

    • getYear() 　　　　　　　从 Date 对象返回一个月中的某一天 (1 ~ 31)
    • getFullYear()　　　　　从 Date 对象以四位数字返回年份
    • getMonth() 　　　　　　从 Date 对象返回月份 (0 ~ 11)
    • getDate() 　　　　　　　从 Date 对象返回一个月中的某一天 (1 ~ 31)
    • getDay() 　　　　　　　从 Date 对象返回一周中的某一天 (0 ~ 6)
    • getHours() 　　　　　 返回 Date 对象的小时 (0 ~ 23)
    • getMinutes()　　　　　返回 Date 对象的分钟 (0 ~ 59)
    • getSeconds() 　　　　返回 Date 对象的秒数 (0 ~ 59)

    案例 — 时钟显示：

    1
    2
    3
    4
    5
    6
    7
    8
    当前时间：<input type='text' value='' id='time'/>
     
    function change(){
    　　var time = document.getElementById("time");
    　　var d = new Date();
    　　time.value = d;
    }
    setInterval(change, 1000);

    2.Math数学对象

    • Math.ceil(数值) 　　　　向上取整
    • Math.floor(数值) 　　　向下取整
    • Math.round(数值) 　　　把数四舍五入为最接近的整数
    • Math.min(数值1,数值2)　　　返回最小值
    • Math.max(数值1,数值2) 　　返回最大值
    • Math.random() 　　　　　获得0-1之间的随机数

    3.常见的其他函数

    在数据传输流程中，json是以文本，即字符串的形式传递的，而JS操作的是JSON对象，所以，JSON对象和JSON字符串之间的相互转换是关键，例如：

    JSON字符串：

    var str1 = ‘{ “name”: “alex”, “sex”: “feng” }’;

    JSON对象：

    var str2 = { “name”: “alex”, “sex”: “feng” };

    JSON字符串转换成JSON对象：

    var obj = JSON.parse(str); // 序列化

    JSON对象转换成JSON字符串：

    var str = JSON.stringify(obj); // 反序列化

    eval

    python中的eval执行的是表达式，exec执行的是代码，而js中的eval既能执行的表达式，也能执行代码

    4.URI转义

    1
    2
    3
    4
    5
    6
    decodeURI() 解码URI
    decodeURIComponent() 解码URI中的组件部分
    encodeURI() 编码URI
    encodeURIComponent() 编码URI中的组件部分
    escape() 对字符串进行转义
    unescape() 对字符串进行解码
    八、this的指向问题

    javascript中的this有点类似于Python中的self
    即哪个对象调用当前的方法或属性，那此时this就是哪个对象，但在js中this的指向总共分为三种：

    1.this指向window

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    console.log(this);
    var a = 10;
    var b = 20;
    function f1(){
    　　var a = 100;
    　　var b = 200;
    　　console.log(this);
    　　console.log(this.a);
    　　console.log(this.b);
    }
    f1();

    2.this指向元素节点对象

    1
    2
    3
    4
    var mydiv = document.getElementById('info');
    mydiv.onclick = function(){
    　　console.log(this.innerText);
    };

    3.this指向当前对象

    1
    2
    3
    4
    5
    6
    7
    8
    9
    var name = 'john';
    function run(){
    　　console.log(this.name + ' is running...');
    }
    run();
     
    var jim = {'name':'jim', 'leg':4, 'age':28};
    jim.walk = run;
    jim.walk();
    九、词法分析

    js在调用函数的那一瞬间，会先进行词法分析

    词法分析的过程：

    当函数调用的前一瞬间,先形成一个激活对象,叫Active Object, AO,并会分析以下3个方面的东西:

    1:函数参数，如有，则将此参数付给AO上，并且值为undefined。如没有，则不做任何操作
    2:函数局部变量，如AO上有，则不做任何操作。如没有，则将此变量赋给AO，并且值为undefined
    3:函数声明，如AO上有，则会将AO上的对象覆盖。如没有，则不做任何操作

    函数内部无论是使用参数,还是使用局部变量,都到AO上找.
    1
    2
    3
    4
    5
    6
    7
    8
    9
    function t(age) {
    　　console.log(age);
    　　var age = 99;
    　　console.log(age);
    　　function age() {
    }
    console.log(age);
    }
    t(12);

    分析过程：
    1、分析参数，有一个参数，形成一个 AO.age=undefined;
    2、分析变量声明，有一个 var age, 发现 AO 上面已经有一个 AO.age，因此不做任何处理
    3、分析函数声明，有一个 function age(){} 声明， 则把原有的 age 覆盖成 AO.age=function(){};

    最终，AO上的属性只有一个age，并且值为一个函数声明

    注意：函数声明的优先级是最高的，谁都覆盖不了这个值

    执行过程
    注意：执行过程中所有的值都是从AO对象上去寻找

    1、执行第一个 console.log(age) 时，此时的 AO.age 是一个函数，所以第一个输出的一个函数
    2、这句 var age=99; 是对 AO.age 进行赋值， 此时AO.age=99 ，所以在第二个输出的是 99
    3、同理第三个输出的是 99, 因为中间没有改变 age 值的语句了

    练习：

    1
    2
    3
    4
    5
    6
    7
    var str = "global";
    function t(){
    　　console.log(str);
    　　var str = "local";
    　　console.log(str);
    }
    t();
  • 相关阅读:
    maven安装和配置
    maven的安装和配置
    mac上pydev
    Android自动化----adb shell，appium，uiautomator2
    Django
    centos操作---搭建环境 安装python
    Linux系统centos中sudo命令不能用----提升权限
    python---numpy
    python-socket
    Le x820 的刷机记录
  • 原文地址：https://www.cnblogs.com/zhutiancheng/p/9896252.html
Copyright © 2011-2022 走看看