JS基础-第1天

JavaScript 第一天笔记

学习目标

• 了解Javascript的作用及其组成
• 掌握变量的使用，知道变量的作用是存储数据
• 掌握变量的命名规范
• 掌握 JavaScript 的 5 种简单数据类型
• 掌握 6 种数据类型的显示转换方法
• 掌握算术操作符、比较操作符、逻辑操作符、赋值操作符
• 了解操作符的优先级

阶段学习内容

1. JavaScript 基础（6天，语法基础，编程思维，写注释）
2. Web API （7天，操作网页）
3. JavaScript 高级（5天，面向对象）
4. jQuery（4天，快速开发）

学习内容

JavaScript 概述

目标

JavaScript 的概念是什么，它是用来干什么的？

JavaScript 编程语言，脚本语言，可直接运行的语言。

剧本出错了，先停止拍摄，拍好了再继续拍后面的剧本。 脚本语言也是同理，脚本出错了，程序停止执行，处理了错误才可以继续往后执行。

概念

 

语言：用于交流的，平时说话都叫语言，中文是语言，英文也是语言。

所有的语言都有固定的语法和单词，固定语法是一定要遵守的，以后在于固定语法上面，没有为什么。

脚本：戏剧剧本，只要按照流程一步一步走，就可以把所有的事情做完。

脚本语言有一个特性：如果执行到某一行出错了，就会终止执行，不再继续执行。

客户端：是区别于服务端的，目前我们所说的客户端，就是浏览器。

JavaScript是：一门运行在浏览器上面的脚本语言

 

小结

JavaScript 的是什么语言？

JavaScript 脚本语言，直接运行，出错会停止。

JavaScript 作用和组成

目标

了解Javascript的作用及其组成。

Web三大标准

HTML：结构

CSS：样式

JS：行为

JavaScript的组成

• ECMAScript （语法规范，前6天基础学习的）
• DOM （操作网页，写网页特效，WebAPI）
• BOM（操作浏览器，前进后退等，WebAPI）

小结

JavaScript 是用来干什么的？

前期主要用来实现网页交互。

以后还可以用来做服务器，小程序。

JavaScript 有几部分组成？

ECMAScript（简称ES，语法）

BOM 操纵浏览器

DOM 操纵页面元素

JavaScript 初体验

目标

知道 JavaScript 的书写方式。

js代码写在哪里

1. 内嵌式 - 页面的script标签里面
2. 外链式 - 写在js文件里面，使用 script标签进行引入
3. 行内式 - 事件写法

<script src="js文件的路径"></script>

注意点：外链式引入的js代码的 script 标签里面，写代码是无效的。

JS注释语法

1. 单行注释

// 这就是js的注释的语法

1. 多行注释

/*

在这一对符号的中间的内容，都是注释

*/

小结

怎么写内嵌式JS？

<script> </script>

什么时候用内嵌式 JS？

学习阶段使用内嵌式较多，单个页面生效。

什么时候用外链式 JS ？

工作的时候一般使用 JS 外链式。

可在多个网页引入复用，简洁，方便修改。

怎么写外链式 JS？

1. 新建 .js 文件

2. 直接书写 js 代码

3. 引入 js 文件，<script src="外链JS的路径"> </script>

常用输入输出的方法

目标

学习 JS 常用输入4种 输出的方法。

语法和作用

1. alert() 弹出一个提示框，提示框里面有我们的提示信息

1. prompt() 弹出一个输入框，输入框可以提供用户的输入

1. console.log() 在控制台输出，控制台就是开发者工具里面的一个功能，一般在elements的旁边。

1. document.write() 在body里面输出，如果输出的格式是标签格式，会变成标签（了解）

小结

alert, prompt 运行的时候是怎样的？

alert 弹窗，一个按钮，点击后消失，alert 会中断代码执行。

prompt 弹窗，有一个输入框，有两个按钮，确认和取消， 会中断代码执行。

console.log() 的内容在哪里查看？

控制台查看 Console 面板。

变量

目标

知道变量的作用，语法。

什么是变量

什么是变量：变量是js中用于存储数据的容器，通常就是一个单词，使用一个单词，代替一个数据。

在程序里面，一个数据是可能不断变化的，不管它怎么变，只要使用变量存储起来，我想要的时候，直接通过变量获取即可。

变量的作用

所以变量的作用是： 存储数据

变量的语法

变量如何使用：

// 变量的语法，是一定要学会记住的

var 变量名 = 数据;

变量运行展示，输入张三后，可复用输出：

 

变量的命名规范

JS 区分大小写，标点符号用英文状态下的符号。

必须遵守

1. 不能以数字开头
2. 不能以关键字或者保留字命名
3. 字母数字组合
4. 符号只允许 下划线 和 $

其他建议

1. 变量命名要有语义
2. 命名建议使用驼峰命名

补充变量的其他知识点

变量可以重新赋值

可以一次性声明多个变量，但是多个变量之间需要使用逗号隔开

也可以一次性声明多个并同时赋值

注意：在使用变量的时候，不要在变量的两边加上引号

常见变量报错

SyntaxError - 语法错误 - 你的语法已经写错了，肯定是行不通的

报错的右边，会告诉你在第几行出错

A is not defined A 这个变量没有定义

小结

变量的作用？

存储数据。

变量命名规范？

必须遵守：

1. 不能以数字开头 2. 英文数字组合
1. 符号 _ $
1. 不能使用关键字和保留字

建议：

1. 驼峰命名
2. 变量有语义

以下哪些变量名是合法的：

1num 不合法，数字开头

num1

nu1m

_num $num

n__um$$

num-1 不合法，中划线不能用于变量名

 

数据类型

目标

知道 JavaScript 的６种数据类型，5 种基本类型和 1 种复杂类型。

字符串类型

固定格式： 在js中所有的字符串都是一个引号包起来(引号包括单引号和双引号)

比如："abc",'abc'

数值类型

所有的数字都归数字类型管，比如： 整数，小数，负数，正数 ...

以及在js里面有一个特殊的存在，NaN，也是归数字类型管(编程源于生活，但是高于生活)

NaN

NaN 是三个单词的缩写： Not a Number - 不是一个数字，这个东西是专门用来表示某个结果不是数字。

出现 NaN 情况：

数据类型转换成数值型转换失败的时候返回的结果。

进行数学运算无法运算得到结果的时候也会出现NaN。

布尔类型

只有两个值，一个是true，一个是false

这个类型，是在编程中专门为了得到判断是否成立的类型

true 这个结果表示判断成立

false 这个结果，表示判断不成立

undefined 和 null

undefined 的值只有 undefined

 

null 的值只有 null

undefined的作用是表示变量声明了没有赋值

null表示一个数据是空的，一般后期会把变量声明为null，和把变量复制null，优化程序的

typeof 关键字

在js中，可以使用typeof这个关键字，获取某个数据的类型

用法：

typeof 数据

// 或

typeof(数据)

得到的结果对应的理解：

string - 说明数据的类型是字符串

 

number - 说明得到的是数字

 

boolean - 说明的到的类型是布尔

 

undefined - 得到的结果是undefined

小结

JS 的 5 种基本数据类型？

1. 字符串型 - prompt 输入框输入的数据默认是字符串型

2. 数值型 - 在 JS 种，数值型数据才能进行数学运算，运算结果不是数字得到 NaN

3. 布尔类型

4. 未定义型

5. 空值型

 

数据类型的转换

目标

知道字符串型，数值型，布尔类型的数据类型转换

转换数字型

Number(数据)

// 可以把字符串类型，布尔类型都转换成数字

parseInt(数据)

// 可以把字符串转换为<整数>

parseFloat(数据)

// 可以把字符串转换为<小数>

注意：转换失败返回结果 NaN，代表不是一个数字，无法进行转换。

转换成字符串型

String(数据);

// 推荐使用，可以把所有的类型的数据都变成字符串

数据.toString()

// undefined 和 null 无法转换

其他类型变成布尔

Boolean() 可以把数据转换成布尔类型的数据，结果只有 true，false

转换成 true 的情况有无数种，但是转换成 false 只有 6 种

1. '' 真空字符串，引号里面不能有空格

2. 0 数字0

3. NaN 不是一个数字

4. undefined 未定义

5. null 空值

6. false false 自己

小结

如何把字符串类型<转数值>类型？

1. Number(数据)

2. parseInt(数据) - 转换成整数

3. parseFloat(数据)

转换失败的情况下会返回 NaN。

如何把数值类型转<字符串>类型？

1. String(数据)

2. 数据.toString()

<布尔类型>转换成 false 的6种情况？

1. ''

2. 0

3. NaN

4. undefined

5. null

6. false

浏览器中的js如何排错

1如果效果没有出来，第一件事不要回去找代码，而是直接打开浏览器的开发者工具，打开console，如果你的代码有问题，必然会在console(控制台)里面有报错

2根据报错里面的提示信息解决问题

根据不同的提示信息解决

3 当我们把自己认为的错误的地方修改过后，再浏览器里面刷新重试即可

常见的错误

1 xxxx is not defined 这个错误的意思是： xxxx 这个变量没有定义

在后面还会告诉你在第几行出错了

2 把对象的某个不存在的方法直接使用了

只要看到这个错误，唯一的可能就是 . toString() 的前面的那个数据 是 undefined

常用的运算符(操作符)

目标

知道JS中的运算符使用。

算术操作符

+ - * / %

要点：

算术运算符，在进行计算的时候，是会进行隐式转换的

隐式转换的规则

1 字符串+其他类型，优先把前天转换为字符串再相加

2 如果-*/%这些，优先转换为数字再运算

3自增和自减

主要是理解前和后的区别

如果是++--在前面，需要先自增或者自减之后，再运算

如果是++--在后面，先把原来的值参与运算，再自增或者自减

比较操作符

> < >= <= 这些跟以前的数学中的作用是一样的，比较数字大小的

== 判断两个值是否相等

!= 判断两个值是否不相等

=== 判断两个数据是否相等，但是同时比较值和类型

!== 判断两个数据是否不相等，但是同时比较值和类型，结果和 === 相反

逻辑操作符

&& 且(与)：如果一个为 false，最终的结果都为 false，找假;

 

|| 或：如果一个为 true，最终的结果都为 true，找真;

 

！ 非：用来把结果颠倒是非的

赋值操作符

=

作用： 就是把某个值，赋值给变量

var a = 10; // =号的作用，就是把10存储到a里面，存储的过程，称为赋值的过程

+= -= *= /= %=

以上这么多的运算符，其实就是一个简单的简写

 

a += 1 相当于 a = a + 1;

a -= 5 相当于 a = a - 5;

操作符的优先级

在数学里面，计算加减乘除，需要先乘除，后加减(优先级)

今天学习了这么多的运算符，也是有优先级

优先级从高到底

1. () 括号优先级《最高》

2. 一元运算符 ++ -- !

3. 算数运算符 先* / % 后 + -

4. 关系运算符 > >= < <=

5. 相等运算符 == != === !==

6. 逻辑运算符 先&& 后||

7. 赋值运算符《最低》

简单记忆的口诀：

先算术，再比较，再逻辑，再赋值

 

练习

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>

</body>
</html>

<script>

  // 运算符的方法
  // var number1 = 100;
  // var number2 = 200;
  // number1 = number1 + number2;
  // number2 = number1 - number2;
  // number1 = number1 - number2;
  // console.log(number1, number2);

  // 临时变量的方法
  var number1 = 100;
  var number2 = 200;
  var temp = number1;
  number1 = number2;
  number2 = temp;
  console.log(number1,temp);
</script>

交换变量的2种方法

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
</body>
</html>

<script>
  // 计算工资的js小程序
  var salary = prompt("小丽的工资: ");
  var bonus1 = prompt("小丽的年终奖: ");
  var bonus2 = prompt("小丽的全勤奖: ");
  var bonus3 = prompt("小丽的补贴: ");
  var bonus4 = prompt("小丽的提成: ");
  salary = Number(salary);
  bonus1 = Number(bonus1);
  bonus2 = Number(bonus2);
  bonus3 = Number(bonus3);
  bonus4 = Number(bonus4);
  result = salary + bonus1 + bonus2 + bonus3 + bonus4;
  alert("丽丽的总工资: " + result);
</script>

计算工资

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <input type="button" onclick="login()" value="点我登录">  <!-- 遇到鼠标点击事件则执行login函数 -->
  <input type="button" onclick="loginInfo()" value="查看账户信息">  <!-- 遇到鼠标点击事件则执行loginInfo函数 -->
</body>
</html>

<!-- 需求：用户点击登录标签弹出输入框要求输入用户名、密码、手机号，把3个信息存储起来,用户点击查看信息就弹窗显示-->
<script>
  var userName, passWord, telNumber;    /* 声明全局变量 */
  function login() {
    userName = prompt("亲,请输入您的用户名: ");
    passWord = prompt("亲,请输入您的密码: ");
    telNumber = prompt("亲,请输入您的手机号: ");
    // alert("亲,您的用户名为:"+ userName + "\n亲,您的密码为:"+passWord+"\n亲,您的手机号为:"+telNumber);
  }
  function loginInfo() {
      alert("亲,您的用户名为:"+ userName + "\n亲,您的密码为:"+passWord+"\n亲,您的手机号为:"+telNumber);
    }
</script>

查看登录信息