js基础第一天

1.历史

• 1.什么是JavaScript

  • 1995年在网景公司，发明的JavaScript。一开始JavaScript叫做LiveScript，但是由于当时Java这个语言特别火，就改名为JavaScript,同时期还有其他的网页语言，比如VBScript、JScript等等，但是后来都被JavaScript打败，所以现在的浏览器中，只运行一种脚本语言就是JavaScript,简称:JS。

• 2.JavaScript与ECMAScript的关系

  • ECMAScript是一种由Ecma国际前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association，制定的标准。
    JavaScript是由公司开发而成的，公司开发而成的一定是有一些问题，不便于其他的公司拓展和使用。所以欧洲的这个ECMA的组织，牵头制定JavaScript的标准，取名为ECMAScript。
    简单来说ECMAScript不是一门语言，而是一个标准。符合这个标准的比较常见的有：JavaScript、Action Script（Flash中用的语言）

• 3.JavaScript作用

  • 在HTML网页中，主要分为三大块:HTML、CSS、JavaScript
    • HTML从语义上构造网页
    • CSS从审美上美化界面
    • JavaScript从交互上提升用户的用户体验

• 4.js被称为对初学者友好的语言

2.第一个JavaScript程序

• 1.Script标签的说明

  • 位置: 可以放在html中的任意位置,但是最好放在body的结束标签上面
  • 和style标签一样type可以省略不写

• 2.演示helloWorld

    // 括号里面只能放字符串/数值/元素/对象
    alert('hello world');
  

• 3.JavaScript中的注释

  • 单行注释: 以 // 开头,后面的内容就是注视
  • 快捷键 ctr(cmd) + /
  • 多行注释: /**/ 多行注释可以换行,但是不能嵌套
  • 快捷键 ctr(cmd) + shift + /

3.变量

• 1.概念: 变量是用来存储信息的容器

• 2.使用一个变量分为3步

    a.声明变量 用var来定义一个变量例如 var a;
    b.赋值 赋值采用 = 来赋值  a=10;
    c.使用
    声明的一个变量的时候可以直接赋值 例如 var b = 20;
  

• 3.变量的命名规范

    1.以字母 a-z A-Z 数字0-9 字符 _ $ 组成
    2.变量不能以数字开头, 不能使用关键字命名
    3.变量的命名采用驼峰命名法 首个单词字母小写,后面的单词首字母大写 例如 lastName
  

  • 变量命名不能和保留字重名
    [图片上传失败...(image-e67c7-1511529697813)]
    [图片上传失败...(image-94c5d1-1511529697813)]

• 4.变量的类型

  • 变量类型为5种

    • 字符串(string)
    • 数字(number) 0-9
    • 布尔(boolean) true/false
    • 对象(object)
    • 未定义(undefined)

    用 console.log(typeof a);来查看输出的类型

    typeof 关键字用来输出变量的类型

• 5.控制台输出

    console.log(1); // 输出普通日志
    console.warn('1'); // 输出警告日志
    console.error('1'); // 输出错误日志
    输出日志的快捷键
    a.log + enter
  

4.运算符

• 1.算数运算符 + - * / %(取余/取模) ++ --

    var a = 5;
    var b = 10;
    var c = a + b;
    var d = a - b;
    var e = a * b;
    var f = a / b;
    var g = a % b;
    a++;
    a--;
  

• 2.算数运算符的优先级, 先乘除(取余)后加减

    var a = 2 + 3 * 4; 结果是 14
    如果想提升优先级的话用 ()来提升
    var a = (2 + 3) * 4; 输出 20
    如果要 a = a + 5;可以简写成 a+=5;
  

• 3.关系运算符

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

  • 关系运算符得到的结果为布尔值
  • 关系运算符不能连用,如果想连用用逻辑运算符

• 4.逻辑运算符

    && || !
    && 有假则为假
    || 有真则为真
    ! 取反
  

  • 逻辑运算符参与运算的是布尔值

5.if语句

• 1.if语句

    在开发中需要判断条件执行代码的时候需要用if语句
    if(判断条件){
        当条件为真的时候执行代码
    }
  

• 2.if else

    if(判断条件){
        当条件为真的时候执行代码块
    }else{
        当条件为假的时候执行代码块
    }
  

  else 可以省略

• 3.三目运算符: 判断条件 ? 语句1 : 语句2

  • 当判断条件为真执行语句1, 为假 执行语句2

• 4.if else语句 特点: 只能执行一个代码块

    if(判断条件1){
        当为真的时候执行代码块 1
    }else if(判断条件2){
        当为真的时候执行代码块 2
    }else if(判断条件3){
        当为真的时候执行代码块3
    }else if(判断条件4){
        当为真的时候执行代码块 4
    }else if(判断条件5){
        当为真的时候执行代码块 5
    } 
    ...
    else{
        当以上所有的条件都不为真的时候执行代码块
    }
  

6.switch语句

switch (变量){
    case 值1:
        语句1;
        break;
    case 值2:
        语句2;
        break;
    case 值3:
        语句3;
        break;
    case 值4:
        语句4;
        break;
    ...
    default:
        语句n;
        break;
}
使用 break 来阻止代码自动地向下一个 case 运行

案例星期一到星期日

7.循环

• 1.for循环

    for（单次表达式;条件表达式;末尾循环体）
    {
        中间循环体；
    }
  

  • 终止循环用break
  • 终止本次循环用continue

• 2.while循环

    while(判断条件){
        循环体 
    }
  

• 3.do-while循环

    do{
        循环体
    }while(判断条件)
  

while循环和do-while循环的区别是 do-while循环先执行代码,再判断,while循环是先判断再执行代码

8.函数

• 1.函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块

• 2.函数是用来封装特定的功能的代码块 利用函数可以提高代码的复用性

    function 函数名() {
       函数体/要执行的代码
    }   
    函数只有调用的时候才会执行封装的代码
    函数调用 函数名()
  

• 3.函数可以传递参数

    function sum(a,b) {
        alert(a+b);
    }
    sum(1,2);
  

• 4.获取函数实际传入参数的个数,和定义传入参数的个数

    function sum(a,b) {
    // 获取函数的实际传入的参数的个数
    console.log(sum.arguments.length);
    // 获取函数定义的参数个数
    console.log(sum.length);
  
    alert(a+b);
    }
    sum(1,2,3);
  

• 5.函数的返回值

    function sum(a,b) {
        return a+b;
    }
    // 将函数执行的结果赋值给变量 s
    var s = sum(1,2,3);
    console.log(s);
  

使用return 结束并返回 return后面的代码不再执行

• 6.函数的变量提升

    var a = 10;
    function fn() {
        console.log(a);
        var a = 20;
    }
    fn();
  

  如果函数内部有变量和函数外部的变量是一样的,会优先取函数内部的变量
  如果在使用后面定义变量,这个时候就会将函数的声明定义在使用之前,而赋值还在函数后面

  
  116409-106.jpg