js基础day01笔记

发表于
字数统计: 4.1k | 阅读时长 ≈ 16

《部分案例代码下载》

学习目标（全天模式）

  • 能说出JavaScript三部分组成
  • 能够使用变量来存储数据
  • 能够说出变量的命名规范
  • 能够写出交换两个变量的值
  • 能够说出JavaScript中的基本数据类型
  • 能说出前置自增和后置自增运算符的区别
  • 能够使用一元运算符实现自身加1操作
    。。。。。。。。

理解上课的知识点……

JavaScript基本介绍（了解）

我们最开始认识的JS

web标准的三部分（网页的三大部分）

  • HTML：控制页面的结构
  • CSS：控制页面的样式
  • JavaScript：控制网页的行为（动态效果）

JavaScript的作用

在学习JS之前，首先要明白JS的作用是什么？

远古时期：表单校验

现在：无所不能

最初的JavaScript：表单校验

  • 用于判断表单的输入是否正确（表单校验）

现在的JavaScript：无所不能

  • 前端的本职工作：网页中完成各种各样的特效
  • 后端的事情也能做：服务端开发（nodejs）

  • 前后端交互：异步与服务器交互（AJAX）

  • 命令行工具开发（nodejs）

  • 桌面程序（Electron）
  • app开发（ReatNative）
  • 控制硬件——物联网（Ruff）
  • 游戏开发（cavans）
  • 等等……

演示：Canvas游戏 美女相册

什么是JavaScript（知道）

JavaScript是一种运行在 浏览器 的 脚本语言 ，现在也可以运行在服务器端

不同于HTML和CSS，JavaScript是一门编程语言，因此比HTML和CSS会更加复杂一下，学习的时间也会更长。

JavaScript历史（了解）

开始阶段

  • 1995年，Netscape(网景)公司的Brendan Eich(布兰登·艾奇)（伊利诺伊大学香槟分校），花了10天时间为Netscape Navigator2.0开发了一个名为LiveScript的脚本程序，目的是在浏览器中执行预检测程序（表单校验）

发展阶段

  • 后来Netscape在与Sun合作之后将其改名为JavaScript。目的是为了利用 Java 这个因特网时髦词汇
  • 微软发布了 IE 3.0 并搭载了一个 JavaScript 的克隆版，叫做 JScript（这样命名是为了避免与 Netscape 潜在的许可纠纷）

三足鼎立阶段

  • CEnvi的scriptEase
  • Netscape的JavaScript
  • IE的JScript

标准化阶段

  • 1997年，ECMA（欧洲计算机制造商协会）邀请了Netscape、Sun、微软、Borland等公司的一些程序员组成了TC39，最终锤炼出来了ECMA-262，该标准定义了一门全新的脚本语言，名为ECMAScript。

JavaScript的组成 (记忆)

JavaScript = ECMAScript + DOM + BOM

javascript

  • ECMAScript（JavaScript的核心）：ECMAScript是一套标准，规范了语言的基本语法。
  • DOM（Document Object Model）：一套操作网页元素的方法
  • BOM（Browser Object Model）：一套操作浏览器功能的方法

JavaScript入门

JavaScript书写位置

css需要写在style标签中，而js需要写在script标签中

  • 写在script标签中

    1
    2
    3
    <script>
      alert('hello world');
    </script>

  • 写在一个单独的.js文件中，通过script的src属性引入即可

    1
    <script src="demo.js"></script>

注意点：

  • script标签可以放在很多地方，但是我们一般写在body标签内容的最下面
  • 如果给script标签上有src属性，里面的代码会直接忽略

注释

注释的作用就是：代码中可以看到，但是页面中不执行。注释仅仅起到一个提示的作用。

  • 单行注释

    1
    2
    3
    // 这是单行注释， 单行注释只能写一行代码
    //  快捷键： ctrl + /  
    // 注释的内容

  • 多行注释 

    1
    2
    3
    4
    5
    /*
        这是多行注释，在多行注释中可以换行
        快捷键：alt + shift + a
    */
    /* 注释的内容 */

在大家练习的时候，就养成一个喜欢写注释的好习惯！

————————

5种输出语句

  • alert ： 弹框

    alert

    1
    2
    //alert会弹出一个：弹框/警告框/提示框/弹窗
    alert("hello world");

  • confirm ： 确认框

    confirm

    1
    2
    //confirm弹出一个确定框
    confirm("偷电瓶车养你好不？");

  • prompt ： 输入框

    prompt

    1
    2
    //prompt：弹出一个输入框，可以输入值
    prompt("请输入谁是最靓的仔！");

  • document.write ： 网页中写入内容

    document

    1
    2
    3
    //可以识别标签
    document.write("hello world");
    document.write("<h1>我是一个h1标签</h1>");

  • 控制台输出

    也叫做控制台打印数据

    log

    1
    2
    //打开调试工具，选择Console选项（控制台），在console中可以看到打印的信息
    console.log("hello word");

注意点：

  • alert、comfirm、prompt 三个用户体验不好，工作中几乎不用，但是在学习的时候会用到。
  • console.log经常用来打印数据，项目调试的时候非常有用！！

变量

变量：可以变化的量（相当于一个储存数据的容器）

作用 ： 存储数据

在使用变量之前需要先声明，才能使用变量。（相当于先做出一个容器，才能装东西）

声明 ：用 var（哇！）来声明

比如存储用户的年龄~年龄是不断变化的，可以使用变量存储

变量使用的几种形式（认识即可）

规范：使用变量前要求声明

并且：初学者在写js一行语句写完之后，记得加上分号（规范），虽然不加分号也可以。

  • 先声明，后赋值

    1
    2
    3
    var age;  // 声明一个变量 name
    age = 18; // 一个等号表示赋值（把等号后面的赋值给前面的！）
    console.log(age);

  • 同时声明和赋值

    1
    2
    var age2 = 20;
    console.log(age2);

  • 同时声明多个变量并赋值

    用的不多 ，其实只是省略了一个var。

    1
    2
    3
    4
    5
    // ， => 并列
    var age3 = 30，age4= 40;
    // 相当于
    var age3 = 30;
    var age4 = 40;

  • 直接声明变量，不赋值

    变量的默认值是undefined

    1
    2
    var age5;
    console.log(age5);// undefined =》 表示只声明，没有赋值

  • 不声明变量，直接赋值

    虽然浏览器可以识别，但是不推荐，这种写法之后会出现问题！！

    1
    2
    3
    // 不推荐 ，不符合规范
    age6 = 60;
    console.log( age6 );

  • 不声明变量，也不赋值变量，直接使用

    会报错！！！

    1
    2
     // age7 is not defined 表示是没有定义（说白了就是没有声明和赋值直接使用）
    console.log(age7);

注意点：

  • js代码一旦报错了，后面的代码就不再执行了
  • 变量需要声明之后，再使用，养成一个良好的编程习惯（规范）。

变量的命名规则和规范

命名规则（法律：必须遵守！！不遵守会报错！！）

  • 由数字、字母、_ 、$、组成 ，并且不能以数字开头

    下列变量名是否符合规则?

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    a	    
    1
    age18
    18age
    2b
    name
    $name
    _sex
    &sex
    theworld
    a b

  • 区分大小写（大写和小写表示两个不同的变量）

  • 不能是关键字或保留字（不用专门记忆，随着学习的深入不断会使用到）

    js中和语法相关的单词，不能作为变量名

    • 关键字：现在版本中语法相关的单词

    key1

    • 保留字：未来版本中语法相关的单词

    key2

命名规范（道德：建议遵守，不遵守也不会报错）

  • 变量名要有意义

  • 遵守驼峰命名法。 从第二个单词开始首字母大写！

    为了可读性更好

    比如：userName、userAge

————————
ヾ(๑╹◡╹)ﾉ”赋值的练习
1
2
3
4
5
6
7
8
9
10
11
12
13
// 1. 
var  a = 10;
     a = 20;
console.log( a );// ??
// 2.
var a = 20;
var b = a; // 把a的值赋值给b
console.log( b );// ?? 

// 3.
var a = 10;
var a = 20; // 一个变量多次声明，只有第一次的声明生效！第二个声明相当于没写，但是赋值有效！！
console.log( a );// ??
ヾ(๑╹◡╹)ﾉ” 交换变量练习

需求：

1
2
3
4
5
var a = 10;
var b = 20;
//要求：
console.log( a ); // 20
console.log( b ); // 10

方法：

  • 使用临时变量、交换两个变量的值 （必须掌握！！记忆）

    1
    2
    3
    4
                     // a   b    temp
    var temp = a;    // 10  20    10
           a = b;	 // 20   20   10
           b = temp; // 20   10    10

数据类型

数据可以有多种类型，比如可以是数字（100，234……），也可以是一个文本（’棠哥’ 、’棠哥真帅！’，’小姐姐真漂亮’）、等等…….

我们需要学习数据类型，之后可以轻松的通过js操作不同的数据。

简单数据类型：

  • 数字类型：number
  • 字符串类型：string
  • 布尔类型：boolean
  • undefined：声明未赋值
  • null：空类型

复杂数据类型：

  • 数组：array
  • 函数：function
  • 对象：object

数字类型（number）

所有数字都是数字类型

整数

1
2
var num = 10;
var num = 200;

进制(拓展了解)

在javascript中表示一个数字，除了有我们常用的十进制11， 22，33等，还可以使用八进制、十六进制表示等。

  • 十进制 （0~9 逢十进一）
1
2
3
//我们最常用的进制，逢10进1
var num = 10;
var num = 200;
  • 八进制（0~7 逢八进一）
1
2
3
// 0开头的数字（0只是一个标识），逢8进1
var num1 = 07;
var num2 = 012;
  • 十六进制（0~9，a,b,c,d,e,f 逢十六进一）
1
2
3
// 0x开头的数字，逢16进1，  数字范围1-9A-F
var num = 0xA;// 10
var num = 0x12;//1*16 + 2 = 18

tips ： 计算机只认识二进制，所有的代码最终都会转换成二进制数据

浮点数（小数）

浮点数就是小数

浮点数形式

1
var num = 0.1;

科学计数法（了解）

1
2
3
4
5
6
//e 10的多少次方  前面得有数字
//e+4 10^4
//e-4 10^-4
//当一次数字很大的时候，可以用科学计数法来表示
var num = 1e+4;  //1乘以10的4次方
var num = 1e-4;//1乘以10的-4次方

浮点数精度丢失问题（了解）

尽量不要使用小数进行比较

计算机在计算小数时，有时计算会不准确。

1
2
3
//在进行浮点数运算的时候，可能会出现精度丢失的问题
0.1 + 0.2 = 0.30000000000000004;// 特殊情况
//尽量少用浮点数进行运算，不要让浮点数进行比较。
————————

字符串类型（string）

使用双引号 " 或者 ' 包裹起来的字符

字符串的格式

1
2
3
//双引号和单引号必须成对出现  以单引号开始到单引号结束都为字符串/以双引号开始到双引号结束都为字符串
var str = 'hello world';
var str = "hello world";

字符串长度

每一个字符串都有一个length属性，表示字符串长度（字符的个数） 

1
2
var str = "akdjflksjdflk";
console.log(str.length);

转义字符

1、如果要打印：好看的’外表’千篇一律

2、如果要打印：有趣的”灵魂”万里挑一

3、如果要打印：好看的’外表’千篇一律，有趣的”灵魂”万里挑一

怎么打印呢？？

1
2
3
4
5
// 单引号和双引号可以互相嵌套，但是不能嵌套自己
// 如果需要打印单引号和双引号，可以使用转义符
// ' => \'
// " => \"
console.log('你是喜欢\'好看\'的人，还是\"有趣\"的人');
代码 输出
\' 单引号
\" 双引号
\\ 反斜杠
\& 和号
\n 换行符
\r 回车符
\t 制表符
\b 退格符
\f 换页符

字符串拼接（拼串）

字符串类型可以通过 + 进行拼接

比如：

1
2
var str = 'hello' + 'world';
console.log(str);// helloworld

+号的规则：

  • 如果两边只要有一个是字符串类型，就是拼接的功能
  • 如果两边都是数字类型，此时就是加法运算
ヾ(๑╹◡╹)ﾉ”小练习
1
2
3
4
5
// 下列哪一个选项可以打印出：我是棠哥
var nickname = '棠哥';
// A、console.log ( '我是' + 'nickname' );
// B、console.log ( '我是nickname' );
// C、console.log ( '我是' + nickname );

布尔类型（boolean）

布尔类型表示真或者假，只有两个值！！

  • true：真、对的、成立
  • false：假、错的，不成立
1
2
console.log( 3 > 2 );// true => 表示真/成立
console.log( 3 < 2 );// false => 表示假/不成立

注意点：

  • 写法上区分大小写：不要写成True或者是False
  • ‘true’ 和 true是两个东西，带引号的是字符串！！

undefined（声明未赋值）

非正常值：一个变量只声明，未赋值。不符合规范

1
2
var num;
console.log( num );// undefined 表示变量声明当未赋值

null

非正常值：一般出现于获取页面元素未获取到的情况，web API阶段才会遇到

1
2
3
// 在web api 阶段才会遇到这种情况！先有印象
var div = document.getElementById('id');
console.log( div );

如何查看数据的类型（了解）

  • 最方便的是通过数据的颜色判断
    • Number类型的数据偏向蓝色
    • String类型的数据是黑色
    • Boolean类型的数据偏向紫红色
    • Undefined的数据颜色是灰色
    • Null的数据颜色是灰色

数据类型颜色

  • 通过typeof来查看数据的类型

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    var num = 20 ;// number
    var str = 'abc';// string
    var bool = true;// boolean
    var un = undefined;// undefined
    var nu = null;// object

    // 可以通过typeof来查看数据的类型
    console.log( typeof num );// number
    console.log( typeof str );// string
    console.log( typeof bool );// boolean
    console.log( typeof un );// undefined
    console.log( typeof nu );// object (特殊情况，记忆即可)

字面量赋值与变量赋值（了解）

  • 字面量（直接量）： 值是固定不变的，浏览器可以直接识别的量

    简单数据类型比较简单，浏览器可以直接认识，都属于字面量（直接量）

    1
    2
    3
    4
    5
    6
    // 不需要打印直接一眼就能看出来是什么类型的数据，就是字面量
    console.log(123);
    console.log("字符串");
    console.log(true);
    console.log(undefined);
    console.log(null);

  • 字面量赋值与变量赋值

    1
    2
    3
    4
    // 字面量赋值（直接量赋值）
    var num = 123；// 直接把具体的值赋值给num变量
    // 变量赋值 
    var age = num； // 通过num这个变量，把num变量的值给age变量

注意点：

打印字符串务必注意字符串是用引号包裹起来的，没有用引号包裹起来的文本会被当做变量！！！

一下结果会怎样？？

1
2
3
// 刚刚开始很容易犯错的点：想打印一个字符串，但是忘记写分号，最后打印成一个变量了。
console.log("abc");
console.log(abc);
————————

运算符（操作符）

变量用于存储数据，开发中我们需要通过操作符来操作这些数据

算术运算符

一般用于数学计算

算术运算符

+ 、 - 、* 、/

和数学一样，简单过一遍

1
2
3
4
console.log( 10 + 2 );
console.log( 10 - 2 );
console.log( 10 * 2 );
console.log( 10 / 2 );

%

数学中的求余数

1
2
3
4
5
6
7
8
console.log( 10 % 2 );// 10除以2余0
console.log( 6 % 2  )
console.log( 9 % 2 ); // 7除以2余1
console.log( 7 % 2 );

// 总结：
// 1、 偶数  =》 % 2 == 0
// 2、 奇数  =》 % 2 == 1

注意点：

  • + 有两个功能：

    • 拼接字符串：当两边只要有一个是字符串时，此时就是拼串
    • 运算功能：当两边都是数字类型时，此时就是加法运算

  • - 、* 、/ 、%（求余） 只有运算功能，不管两边是不是数字，都是全当做数字进行运算

    1
    2
    3
    4
    console.log(1 + '1');  // 11
    console.log(1 + 1);    // 2
    console.log(2 / '1');  // 2
    console.log('3' * '3');// 9
ヾ(๑╹◡╹)ﾉ”快速说出以下的结果
1
2
3
4
5
6
7
console.log(123 + 123);
console.log("123" + 123);
console.log(123 - 123);
console.log(123 - "123");
console.log(12 * "12");
console.log(12 / 12);
console.log(10 % 2);

赋值运算符

赋值运算符有：=、 +=、 -=、 *=、 /=、 %= 

1
2
3
4
5
6
7
8
9
10
11
// 赋值，把后面的值赋值给前面的变量
var num = 100;

// +=相当于简写形式
num = num + 10；
num += 10;

num -= 10;// num = num - 10
num *= 10;// num = num * 10
num /= 10;// num = num / 10
num %= 10;// num = num % 10

一元运算符

一元运算符：只有一个操作数的运算符，比如：num++

二元运算符：有两个操作数的运算符，比如 ：num1 + num2，

自增运算符（++）

  • 先自增：++num
  • 后自增：num++

相同点：

  • 代码执行完，数值都会+1
1
2
3
4
5
6
var num = 10;
// num = num + 1;
// num += 1;
// num++;
 ++num;
console.log( num );// 11

不同点：

  • 先自增：++a ——》+号在前，表示先+1，后返回值
  • 后自增：a++ ——》+号在后，表示先返回值，再+1
1
2
3
4
5
var num = 6;
console.log( ++num ）;// age == 7  先+1，再返回值
------------------------------------------------------
var num = 6;
console.log( num++ ）// age == 6  先返回值，再+1

自减运算符（–）

  • 先自减：–num
  • 后自减：num–

相同点：

  • 代码执行完，数值都会-1

不同点：

  • 先自减：–a ——》-号在前，表示先-1，后返回值
  • 后自减：a– ——》-号在后，表示先返回值，再-1
ヾ(๑╹◡╹)ﾉ”小练习：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//1.打印结果
var num = 5; 
console.log( num++ );  
console.log( ++num );  

//2. 打印结果
var a = 1;
var b = ++a + ++a;
console.log( b );

var a = 1;
var b = a++ + a++;
console.log( b );

var a = 1;
var b = a++ + ++a;
console.log( b );

var a = 1;
var b = ++a + a++;
console.log( b );
————————

逻辑运算符

判断逻辑是否成立的运算符，结果是布尔类型

类比于找男朋友~

  • &&：与运算符，表示并且，只有当两个操作数都为 true 的时候，结果才是true

    1
    2
    3
    4
    console.log( true && true);
    console.log( true && false);
    console.log( false && true);
    console.log( false && false);

  • ||：或运算符，表示或者，只要有其中一个操作数是 true，结果就是true

    1
    2
    3
    4
    console.log( true || true);
    console.log( true || false);
    console.log( false || true);
    console.log( false || false);

  • !：非运算符，取反

    1
    2
    console.log( !true );
    console.log( !false );