JavaScript学习第一天

最新推荐文章于 2021-09-14 07:00:31 发布

墨spot烟

最新推荐文章于 2021-09-14 07:00:31 发布

阅读量313

点赞数 1

文章标签： javascript

本文链接：https://blog.csdn.net/qq_28801949/article/details/105627318

版权

JavaScript学习第一天

时间：2020年4月18日

JavaScript共分为四个部分：

JavaScript基础
Web APIs（实战DOM BOM操作）
jQuery学习
JavaScript进阶高级

今天开始，学习第一部分内容：JavaScript基础

学习进度：

2020.4.18 看视频40节（基础内容一共190节）
2020.4.19 学习Typora的使用方法，并开始写学习笔记，记录第一天学习内容及心得

一、初识JavaScript

JavaScript是什么

JavaScript是一种运行在客户端的脚本语言（Script是脚本的意思）

脚本语言：不需要编译，运行过程中由js解释器（js引擎）逐行来进行解释并执行
JavaScript的作用
- 表单动态校验（密码强度检测）（JS产生最初的目的）
- 网页特效
- 服务端开发（Node.js）
- 桌面程序（Electron）
- APP（Cordova）
- 控制硬件-物联网（Ruff）
- 游戏开发（cocos2d-js）
HTML/CSS/JS的关系
HTML/CSS标记语言–描述类语言
- HTML决定网页结构和内容（决定看到什么），相当于人的身体
- CSS决定网页呈现给用户的模样（决定好不好看），相当于给人穿衣服、化妆
JS脚本语言–编程类语言
- 实现业务逻辑和页面控制（决定功能），相当于人的各种动作
浏览器执行JS
JS的组成
1. ECMAScript
2. DOM——文档对象模型
3. BOM——浏览器对象模型
JS初体验
1. 行内式JS
```
<input type="button" value="点我试试" onclick="alert('Hello World')" />
```
  - 注意：单双引号的使用：在HTML中推荐使用双引号，JS中推荐使用单引号
  - 特殊情况下使用
2. 内嵌JS
```
<script>
    alert('Hello World!');
</script>
```
  - 可以将多行JS代码写到<script>标签中
  - 学习时使用
3. 外部JS文件
```
<script src="my.js"></script>
```
  - 利于HTML页面代码结构化，把大段JS代码独立到HTML页面之外，既美观，也方便文件级别的复用
  - 引用外部JS文件的script标签中间不可以写代码
  - 实际开发中使用
JavaScript注释
1. 单行注释
```
// 我是一行文字，不想被JS引擎执行，所以注释起来
```
  - 快捷键：ctrl + /
2. 多行注释
```
/*
 获取用户年龄和姓名
 并通过提示框显示出来
*/
```
  - 默认快捷键：alt + shirt + a
  - 快捷键修改为：ctrl + shift + / （修改以后意义更明确）

二、变量

变量概述
1. 什么是变量
  
  白话：变量就是装东西的盒子
  
  通俗：变量是用于存放数据的容器。可通过变量名获取数据。
2. 变量在内存中存储
  
  本质：变量是程序在内存中申请的一块用来存放数据的空间。
  
  类似酒店的房间，一个房间就可以看作是一个变量。
变量的使用
1. 声明变量
```
// 声明变量
var age; // 声明一个名称为age的变量
```
  - var是一个JS关键字，用来声明变量（variabe变量的意思），使用该关键字声明变量后，计算机会自动为变量分配内存空间。
  - age是定义的变量名，需要通过变量名来访问内存中分配的空间。
2. 赋值
```
age = 10; // 给age这个变量赋值为10
```
  - = 用来把右边的值赋给左边的变量空间中，此处代表赋值的意思
  - 变量值是保存到变量空间里的值
3. 变量的初始化
```
var age = 10; // 声明变量同时赋值为18
```
  - 声明一个变量并赋值，称之为变量的初始化
变量语法扩展
1. 更新变量
```
var age = 18;
age = 81;  // 最后的结果是81，因为18被覆盖掉了
```
  - 一个变量被重新赋值后，它原有的值就会被覆盖，变量值将以最后一次赋的值为准。
2. 同时声明多个变量
```
var age = 10,
    name = 'zjt',
    sex = '女';
```
  - 同时声明多个变量时，只需要写一个var，多个变量名之间使用英文逗号隔开。
3. 声明变量特殊情况
变量命名规范

交换变量案例

要求：交换两个变量的值（实现思路：使用一个临时变量用来做中间存储）

<script>
        // js 是编程语言有很强的逻辑性在里面： 实现这个要求的思路 先怎么做后怎么做 
        // 1. 我们需要一个临时变量帮我们
        // 2. 把apple1 给我们的临时变量 temp 
        // 3. 把apple2 里面的苹果给 apple1 
        // 4. 把临时变量里面的值 给 apple2 
        var apple1 = '青苹果';
        var apple2 = '红苹果';
        temp = apple1;
        apple1 = apple2;
        apple2 = temp;
        console.log(apple1);
        console.log(apple2);
    </script>

示意图：

三、数据类型

数据类型简介
1. 为什么需要数据类型
  - 在计算机中，不同的数据所需占用的存储空间是不同的，为了便于把数据分成所需内存大小不同的数据，充分利用存储空间，于是定义了不同的数据类型。
  - 简单来说，数据类型就是数据的类别型号。比如姓名“张三”，年龄18，这些数据的类型是不一样的。
2. 变量的数据类型
  - 变量是用来存储值得所在处，它们有名字和数据类型。变量的数据类型决定了如何将代表这些值的位存储到计算机的内存中。
  - JavaScript是一种弱类型或者说动态语言。
  - 这意味着不用提前声明变量的类型，在程序运用过程中，类型会被自动确定。
```
var age = 10;          //这是一个数字型
var areYouOk = '是的';  //这是一个字符串
```
  - 在代码运用时，变量的数据类型由JS引擎 根据 = 右边变量值的数据类型来判断 的，运行完毕以后，变量就确定了数据类型。
  - JavaScript拥有动态类型，同时也意味着相同的变量可用作不用的类型：
```
var x = 6;            //x为数字
var x = 'Bill';       //x为字符串
```
3. 数据类型的分类
  JS把数据类型分为两类：
  - 简单数据类型（Number，String，Boolean，Undefined，Null）
  - 复杂数据类型（object）
简单数据类型
1. 数字型Number
  
  JavaScript数字类型既可以用来保存整数值，也可以保存小数（浮点数）。
```
var age = 21;       // 整数
var Age = 31.3747;  // 小数
```
  数字型进制
  
  最常见的进制有二进制、八进制、十进制、十六进制。
  现阶段我们只需要记住，在JS中八进制前面加0，十六进制前面加 0x
```
// 1.八进制数字序列范围： 0~7
var num1 = 07; // 对应十进制的7
var num2 = 019; // 对应十进制的19
var num3 = 08; // 对应十进制的8
// 2.十六进制数字序列范围： 0~9以及A~F
var num = 0xA;
```
  数字型范围
  
  JavaScript中数值的最大和最小值
  - 最大值： Number.MAX_VALUE，这个值为： 1.7976931348623157e+308
  - 最小值： Number.MIN_VALUE，这个值为： 5e-324
```
alert(Number.MAX_VALUE); // 1.7976931348623157e+308
alert(Number.MIN_VALUE); // 5e-324
```
  数字型三个特殊值
  - Infinity ，代表无穷大，大于任何数值
  - -Infinity ，代表无穷小，小于任何数值
  - NaN ， Not a number，代表一个非数值
```
alert(Infinity);   // Infinity
alert(-Infinity);  // -Infinity
alert(NaN);        // NaN
```
  isNaN()
  
  用来判断一个变量是否为非数字的类型，返回 true 或者 false
  
  $[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-g5W4uTCp-1587346008079)(C:\Users\朱锦涛\AppData\Roaming\Typora\typora-user-images\image-20200419232208945.png)]$
```
var usrAge = 21;
var isOk = isNaN(userAge);
console.log(isNum); // false ， 21 不是一个非数字
var usrName = "andy";
console.log(isNaN(userName)); // true ， "andy"是一个非数字
```
2. 字符串型String
  
  字符串型可以是引号中的任意文本，其语法为双引号 “ ” 和单引号 ‘ ’
  
  因为HTML标签里面的属性使用的是双引号，JS这里我们更推荐使用单引号。
```
var strMsg = "我爱北京天安门~";  //使用双引号表示字符串
var strMsg2 = '我爱吃猪蹄';     //使用单引号表示字符串
// 常见错误
var strMsg3 = 我爱大肘子;       //报错，没使用引号，会被认为是js代码，但js没有这些语法
```
  字符串引号嵌套
  
  JS可以用单引号嵌套双引号，或者用双引号嵌套单引号（外双内单，外单内双）
```
var strMsg = '我是"高帅富"程序猿';   // 可以用''包含""
var strMsg2 = "我是'高帅富'程序猿";  // 也可以用"" 包含''
// 常见错误
var badQuotes = 'What on earth?"; // 报错， 不能 单双引号搭配
```
  字符串转义符
  
  类似HTML里面的特殊字符，字符串中也有特殊字符，我们称之为转义符。
  
  转义符都是\开头的，常用的转义符及其说明如下：
  
  字符串长度
  
  字符串是由若干字符组成的，这些字符的数量就是字符串的长度。通过字符串的length属性可以获取整个字符串的长度。
```
var strMsg = "我是帅气多金的程序猿！ ";
alert(strMsg.length); // 显示 11
```
  字符串拼接
  - 多个字符串之间可以使用 + 进行拼接，其拼接方式为字符串 + 任何类型 = 拼接之后的新字符串
  - 拼接前会把与字符串相加的任何类型转成字符串，再拼接成一个新的字符串
```
//1.1 字符串 "相加"
alert('hello' + ' ' + 'world'); // hello world
//1.2 数值字符串 "相加"
alert('100' + '100'); // 100100
//1.3 数值字符串 + 数值
alert('11' + 12); // 1112
```
  字符串拼接加强
  - 我们经常会将字符串和变量来拼接，因为变量可以很方便地修改里面的值
  - 变量是不能添加引号的，因为加引号的变量会变成字符串
  - 如果变量两侧都有字符串拼接，口诀“引引加加 ”，删掉数字，变量写加中间
```
console.log('pink老师' + 18);            // 只要有字符就会相连
var age = 18;
// console.log('pink老师age岁啦');       // 这样不行哦
console.log('pink老师' + age);          // pink老师18
console.log('pink老师' + age + '岁啦');  // pink老师18岁啦
```
3. 布尔型Boolean
  
  布尔类型有两个值： true 和 false ，其中 true 表示真（对），而 false 表示假（错）。
  
  布尔型和数字型相加的时候， true 的值为 1 ， false 的值为 0。
```
console.log(true + 1);  // 2
console.log(false + 1); // 1
```
4. Undifined和Null
  
  一个声明后没有被赋值的变量会有一个默认值 undefined ( 如果进行相连或者相加时，注意结果）
```
var variable;
console.log(variable);          // undefined
console.log('你好' + variable);  // 你好undefined
console.log(11 + variable);     // NaN
console.log(true + variable);   // NaN
```
  一个声明变量给 null 值，里面存的值为空（学习对象时，我们继续研究null)
```
var vari = null;
console.log('你好' + vari);  // 你好null
console.log(11 + vari);     // 11
console.log(true + vari);   // 1
```
获取变量数据类型

typeof可用来获取检测变量的数据类型
```
var num = 18;
console.log(typeof num);  // 结果 number
```
不同类型返回值：
字面量

字面量是源代码中一个固定值的表示法，通俗来说，就是字面量表示如何表达这个值。
- 数字字面量：8,9,10
- 字符串字面量：‘学习’，”快乐”
- 布尔字面量：true，false

数据类型转换

什么是数据类型转换
使用表单、prompt获取过来的数据默认都是字符串类型的，此时就不能直接简单的进行加法运算，而需要转换变量的数据类型，通俗来说，就是把一种数据类型的变量转换为另一种数据类型。

通常有3种方式的转换：
- 转换为字符串类型
- 转换为数字型
- 转换为布尔型

转换为字符串

方式	说明	案例
toString()	转成字符串	var num = 1; alert(num.toString());
String()强制转换	转成字符串	var num = 1; alert(String(num));
加号拼接字符串	和字符串拼接的结果都是字符串	var num = 1; alert(num + “我是字符串”);

toString()和String()使用方式不一样。
三种转换方式，我们更喜欢用第三种加号拼接字符串转换方式，这一种方式也称之为隐式转换。

转化为数字型（重点）

方式	说明	案例
parseInt(string)函数	将string类型转成整数数值型	parseInt(‘78’)
parseFloat(string)函数	将string类型转成浮点数数值型	parseFloat(‘78.21’)
Number()强制转换函数	将string类型转换为数值型	Number(‘12’)
js 隐式转换（ - * / ）	利用算术运算隐式转换为数值型	‘12’ - 0

注意parseInt和parseFloat单词的大小写，这两个是重点
隐式转换使我们在进行算术运算的时候，JS自动转换了数据类型

案例：简单加法器

计算两个数的值，用户输入的一个值后，继续弹出第二个输入框并输入第二个值，最后用过弹窗显示出两次输入值相加的结果。

案例分析：

先弹出第一个输入框，提示用户输入第一个值保存起来
在弹出第二个输入框，提示用户输入第二个值保存起来
把这两个值相加，并将结果赋给新的变量（注意数据类型转换）
弹出警示框（alert），把计算的结果输出（输出结果）
<script>
    // 先弹出第一个输入框，提示用户输入第一个值  保存起来
    // 再弹出第二个框，提示用户输入第二个值  保存起来
    // 把这两个值相加，并将结果赋给新的变量（注意数据类型转换）  
    // 弹出警示框（alert) ， 把计算的结果输出 （输出结果）
    var num1 = prompt('请输入第一个值：');
    var num2 = prompt('请输入第二个值：');
    var result = parseFloat(num1) + parseFloat(num2);
    alert('计算结果是' + result);
</script>

转化为布尔型

方式说明案例
Boolean()函数其他类型转成布尔值 Boolean(‘true’);
- 代表空、否定的值会被转换为false，如 ‘ ’、0、NaN、null、undifined
- 其余值都会被转换为true

方式	说明	案例
Boolean()函数	其他类型转成布尔值	Boolean(‘true’);

墨spot烟

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript学习第一天

JavaScript学习第一天时间：2020年4月18日JavaScript共分为四个部分：JavaScript基础Web APIs（实战DOM BOM操作）jQuery学习JavaScript进阶高级今天开始，学习第一部分内容：JavaScript基础学习进度：2020.4.18 看视频40节（基础内容一共190节）2020.4.19 学习Typora的使用方法，...
复制链接

扫一扫