其实前端就是 一共三步骤 : 1, 获取数据, 2, 处理数据 3, 展示数据
本人记录使用的工具是 xmind 要是不会的小伙伴可以百度下很简单 每天的课程下面都会有实战案例的演示 Demo
学习目标:
掌握基础编程语法
训练程序思维(用代码实现业务的思维)
电脑 基本介绍:
软件共分为两类: 系统软件, 应用软件
应用软件: 放到系统软件里面去运行
CPU 相当于人的大脑
内存: 变量放在内存中是供电使用所以很快 , 断电后不能保存数据 读写速度快 4g 8g 16g
硬盘: 属于外部存储, 永久存储数据, 断点依然保存读写速度慢
- 1gb = 1024mb
- 1tb = 1024gb
关于编辑器 vscode 的几个知识 视口 与 IE
- <!DOCTYPE html>
- <HTML lang="en">
- <head>
- <meta charset="UTF-8" />
- <!-- 移动端 视口 -->
- <meta name="viewport" content="width=device-width, initial-scale=1.0"
- />
- <!-- 让我们的 ie 浏览器用 edge 模式显示 -->
- <meta http-equiv="X-UA-Compatible" content="ie=edge" />
- <title>
- Document
- </title>
- </head>
- <body>
- </body>
- </HTML>
视口与兼容后面会讲到
JS 语言介绍
JS 是运行在客户端的语言脚本语言 script 脚本语言: 不需要编译, 运行过程中由解释器逐行来进行解释的
浏览器内核分成两部分渲染引擎和 JS 引擎, 由于 JS 引擎越来越独立, 内核就倾向于指渲染引擎
渲染引擎: 用来解析 HTML,CSS 俗称内核,
重要
JavaScript 语法
DOM 文档对象模型 可以对页面上的各种元素进行操作大小位置颜色等
BOM 浏览器对象模型 可以操作窗口, 比如弹窗, 控制浏览器跳转获取分辨率
JS 创始人布兰登. 艾克 10 天创建了 JS
编程语言分为 解释型语言和编译型语言
JS 是解释型语言 java 是编译型语言
JS 基础语法
理解:
掌握 JS 三种书写位置和注释
能用自己的话解释变量与数据类型概念
能说出常见的数据类型
算数运算符和自增自减
三种输入框 方法是带括号的
alert()方法
console.log()方法
prompt()方法
JS 也是有三种写法的 行内 外链 内嵌
- <!DOCTYPE HTML>
- <head>
- <meta charset="UTF-8">
- <title>
- Document
- </title>
- /* 内嵌样式 */
- <script>
- alert('你好吗')
- </script>
- /* 外链样式谨记 script 里面不能填写内容 */
- <script type="text/javascript" src="">
- </script>
- </head>
- <body>
- /* 行内式写法, 行内使用双引号, 使用中文需要添加单引号, 原则是外双内单 */
- <input type="button" value="点击一下" onclick="alert(1)">
- <input type="button" value="点击一下" onclick="alert('你好')">
- </body>
- </HTML>
- // 注释 单行注释
- /* 多行注释 */
变量
变量的目的: 一次声明, 多次调用, 非常方便
什么是变量:
通俗: 变量就是一个装东西的盒子
概念: 变量是用于存放数据的容器, 里面的数据我们可以多次使用, 甚至数据可以修改
本质: 变量是程序在内存 中申请的一块用来存放数据的空间
变量的使用:
变量的使用分为 2 步
1, 声明变量, 变量的名字用来区分每个存放的容器
2, 赋值 先声明在赋值 使用 var 用来声明变量 variable 变量的意思
- //1, 声明 var num 变量声明
- //2, 赋值 var num = 10; 变量的初始化 声明 + 赋值
- var num = 10 ;
var num 赋值 10 等号是 赋值
以前是 1+1=2
现在 在计算机里面 计算是 先算右面 再算左面 2 = 1 + 1
变量使用注意点:
只声明不赋值 var age console.log(age) //undefined
不声明 不赋值 直接使用 console.log(age) // 报错
不声明 只赋值 age = 10 console.log(age) //10 不推荐这样写
- <script>
- var num = 10
- console.log(num);
- num = 20;
- console.log(num);
- </script>
变量内部值的更改
一个变量被重复赋值后它原有的值会被覆盖, 以最后一次赋值的值为准
- /*
- 语法扩展 声明多个变量
- var num1,num2,num3;
- num1 = 10'
- */
- var num1,num2,num3;
- // num1 = num2 = num3 = 10; 值相同的情况下
- /* 值不同的情况下 第一种写法
- num1 = 10;
- num2 = 20;
- num3 = 30;
- */
- /* 值不同的情况下 第二种写法 一个 var 进行声明 使用逗号隔开, 最后以分号结束
- var num1 = 10,
- num2 = 20,
- num3 = 30;
- */
变量命名规则和规范
规则 必须准守, 不遵守的话 JS 引擎发现并报错
由字母 A-Za-z 数字 0-9 下划线 (_) 美元符号 ($) 组成如 var usrAge num01 _name
** 区分大小写 强调: JS 严格区分大小写 var App 和 VAR App 是两个变量
** 不能以数字开头
** 不能是关键字, 保留字和代码符号 列如 var,for while &
规范 建议遵守, 不遵守的话 JS 引擎也不会报错
规范相当于人类社会的道德
变量名必须有意义
遵守驼峰命名法, 首字母小写, 后面单词的首字母需要大写 userName userPassword
练习案例 重点 **
交换两个变量的值(实现思路: 使用一个临时变量 用来做中间存储)
- var num1 = 'num1 的值 10';
- var num2 = 'num2 的值 20';
- var num3 = num1;
- var num1 = num2;
- var num2 = num3;
- console.log(num1,num2);
- //console.log(num1);
输出之后就会发现变量已经被交换, 因为使用了三方的变量进行存储交换
重点 变量小结
1, 变量是内存里的一块空间, 用来存储数据, 变量就是一个小盒子存储数据, 方便我们以后使用里面的数据, 调用, 修改,
2, 我们使用变量的时候, 一定要声明变量, 并且赋值, 一次存储多次使用
3, 变量名尽量要规范, 见名知意
数据类型介绍
1, 什么是数据类型?
答案: 所有变量都具有数据类型, 以决定能够存储那种数据, 比如'名字' 和年龄 18 这些数据类型是不一样的
2, 变量属于那种数据类型?
答案: 在代码运行时, 由 JS 引擎根据 = 右边 变量值的数据类型 来判断
- var num = 10; // 这是数值型
- var str = '你好'; // 这是一个字符型
- // 数值的最大值
- console.log(Number.MAX_VALUE);
- // 数值的最小值
- console.log(Number.MIN_VALUE);
- // 无穷大
- console.log(Infinity);
- // 无穷小
- console.log(-Infinity);
- // 不是一个数字 not a Number 非数字都是 nan
- console.log(NaN);
isNaN()不是数值, 返回 true 是数值类型的返回 false
- var age = 'asd';
- var isage = isNaN(age);
console.log(isage); 这里不是一个数字返回 true
console.log(isNaN(age));
布尔型
- var flag = true; // 正确 真
- var flag = false; // 错误的 假
拼接字符串
在 HTML 中属性是宽高
- var str = 'abc';
- console.log(str.length);// 3
在 JS 中想要知道一个属性长度需要加上长度, length, 谨记 空格也算一个空字符长度.
在 Ajax 中数据交互, 我们把数据传到后台, 后台返还给我们 拼接字符
- console.log(1+1); // 数值相加
- console.log('你好' + '吗'); // 字符相连
- console.log('你好' + 18); // 只要有字符就会相连 打印出: 你好 18
输入年龄的案例
- var age = prompt('请输入你的年龄');
- alert('你填的是多少'+ age +'岁');
步骤:
1, 页面打开会弹出一个输入框
2, 用户输入年龄, 我们保存这个年龄数据
prompt('请输入您的年龄'); 用户点击确定后保存至, 点击取消返回空值
3, 弹出提示框提示多少岁了
NaN 不是一个数字
console.log(11 + NaN)
除了一个字符串, 任何数字加上 NaN 都是 NaN
总结 + 口诀
数值相加 字符相连 NaN 除了字符都是 NaN
Number : JS 中的数值类型变量 可以保存 整型数值 和浮点型数值
String : 字符串用单引号 双引号都可以 , 但是前段开发统一规范使用单引号 var usrName = '字符串值';
多个字符串可以用 + 号相拼接
length 属性获取字符串长度
转义符
Boolean: 布尔值 用 true 和 false
Undefined: 声明后未赋值的变量的默认值
Null : 空对象
可以用 typeof 获取数据类型
Chrome 浏览器字符串显示黑色 , 数值类型蓝色, 布尔值也是蓝色 undefined 和 null 是灰色的
变量的数据类型 共五种
- var num = 10;
- var str = 'nihao';
- var flag = true;
- var de = undefined;
- var nu = null; // 空 打印出对象 bug
- var obj = new Object();
下面是 typeof 的两种写法
- console.log(typeof num);
- console.log(typeof(num));
- console.log(typeof str);
- console.log(typeof(str));
- console.log(typeof flag);
- console.log(typeof(flag));
- console.log(typeof de);
- console.log(typeof(de));
- console.log(typeof nu); // 打印出 obj 是 bug
- console.log(typeof(nu));
- console.log(typeof obj);
- console.log(typeof(obj));
数据类型转换 重要 转换成字符型
就是把一种数据类型的变量转换成另外一种数据类型
通过调用系统函数进行类型转换, 主要分 3 类 : 转 字符串, 转数值, 转布尔
方式 说明
转换为字符串
toString() to 是去的意思 把变量转换成字符串
String()强制转换 把特殊值转成字符串
加号拼接字符串 把字符串拼接 的结果都是字符串
- var num = 19;
- // var str = num.toString();
- var str = num.toString(2); // 里面书写了 2 数值编程了 2 进制
- console.log(str);
使用 String 进行转换
console.log(String(10));
使用加号进行拼接的方法
console.log(110 + '');
使用减法进行隐式转换
console.log(19 - '18');
使用方法: 区别
XX.toString() String()包含在里面 + 加号进行拼接, - 使用减号进行隐式转换
数据类型转换 重要 转换成数字类型
表单获取过来的数据默认是字符串, 我们需要转换为数值型
方式 说明
parseInt()函数 将 String 类型参数转成整数 重点
parseFloat()函数 将 String 类型参数转成浮点数 重点
Number()强制转换函数 将 String 类型参数转成浮点数 重点
- var str = '18';
- console.log(typeof str); // 这里判断是什么类型 这里是 String 类型
- var num = parseInt(str); // 使用 parseInt 进行转换
- console.log(typeof num); // 这里在控制台输出看看到底打印的是什么类型 Number 类型
- console.log(num); // 打印那个值
- var str = '189';
- console.log(parseFloat(str)); // 显示数值类型的 189
- console.log(parseInt(12.91)); // 取整这里显示的是 12 后面的小数会舍去
- console.log(parseFloat(12.91)); // 小数函数 不会四舍五入
- console.log(Number(12.9)); // 显示 12.9
- console.log(Number(true)); //true 显示 1 false 显示 0
- console.log(Number(false)); //0
- console.log(Number(null)); //0
- console.log(Number(undefined)); // NaN Not a Number 不是一个数字
- console.log(Number(''));//0
- console.log(parseInt('12abc')) // 会显示数值 12
- console.log(parseFloat('abc12')) // 会显示 NaN
弱数据类型的特点 - */ 都可以做隐式转换
console.log( 2 * '4');
利用 JS 的弱类型的特点, 只进行了算数运算, 实现了字符串到数字的类型转换, 不推荐
转换为布尔值 Boolean
Boolean 函数 一共五中情况下会为 false 代表 空否定的值会被转换为 false 有五种类: "" ,0 NaN, null undefined
谨记这五种类型是假的 其余的都是 true 真的
- console.log(Boolean(''));
- console.log(Boolean(0));
- console.log(Boolean(null));
- console.log(Boolean(NaN));
- console.log(Boolean(undefined));
扩展内容:!! 有兴趣的可以打印看一下两个!! 是布尔值的意思, 一个布尔值是取反
- console.log(!! null);
- console.log(!! undefined);
运算符 加, 减, 乘, 除, 取, 余 =(取模型)
运算符 描述 实例
+ 加 1+2 =3
- 减 2-1 =1
* 乘 2 * 5 = 10
/ 除 6 / 2 = 3
% 余 9 % 2 = 1
取余用来判断能否被整除, 他的余数是 0
一元运算符 正, 负,! 取反, 还有 ++ 和 -- 也是一元
前置运算
++ 和 -- 既可以放在变量的前面, 也可以放在变量的后面
++ num 前自增, 先自加后运算
谨记当 ++num 自己在单独的一行的时候无论前置与后置加加 都会自加 1
- var num = 1;
- // num = num + 1;
- ++num; // 每次自己增加 1 和上面的相等
- ++num; // 实际开发中 单独使用 ++
- console.log(num); // 等于 2
前置 ++
- var num = 5;
- console.log(++num + 10); //16
前置加加 先 自加 后运算
后置 ++
- var num = 5;
- console.log(num++ + 10) // 15
num++ 后置加加: 先原值运算 后自加
总结 :
++ 和 -- 运算符的目的可以简化代码的编写, 让变量的值 + 1 或者 -1;
单独使用时, 运行结果相同
与其他代码联用时, 执行结果会不同
后置: 先原值运算 后置加
前置: 先自加后运算
开发时: 大多使用后置自增 / 减, 并且代码独占一行
开发时: 不要和其他代码联用 -- 会降低代码的可读性
小练习 是练习 前置与后置加加的
- :demo 1
- var a = 10;
- ++a; //11
- var b = ++a + 2; //14
- console.log(b) //14
小练习 :demo 2
- var c = 10;
- c++; //11
- var d = c++ + 2;
- console.log(d) //13
实战案例的 Demo
案例 1:
计算年龄弹出一个框, 输入我们的出生年份, 能计算出我们的年龄
- var num = Number(prompt('请输入您的年龄'));
- var age = 2019 - num;
- alert('您的年龄是'+ age);
- console.log(age);
步骤:
1, 弹出框输入出生年份 prompt
prompt('请输入您的出生年份');
2, 得到这个值, 并且存储起来
var year = prompt('请输入您的出生年份');
这里的 year 拿过来的是字符型的
3, 用今年减去刚才得到的年份, 就能算出来
var result = 2019 - year;
这里使用 2019 减去 使用了隐式转换 数值型
4, 弹出得到年龄的框
alert('您的年龄是'+result)
案例 2:
计算两个数的值, 用户输入第一个值, 技术弹出输入第二个值, 最后弹出结果
案例: 转换
- var number1 = Number(prompt('请输入第一个值'));
- var number2 = Number(prompt('请输入第二个值'));
- var result = number1 + number2;
- alert('您输入的结果是' + result);
步骤:
1, 先弹出第一个输入框, 用户输入第一个值
var num1 = prompt('请输入第一个值');
2, 在弹出第二个框, 用户提示输入第二个值
var num2 = prompt('请输入第二个值');
3, 我们把这两个值进行相加 (有坑字符型 字符相连 需要转换数值型)
var result = parserFloat(num1)+parseFloat(num2);
4, 弹出结果
alert('打印结果是' + result);
练习题三: 一次询问年龄并且获取用户姓名, 年龄, 性别, 打印出来, 并且换行
- var name = prompt('请输入您的姓名');
- var age = prompt('请输入您的年龄');
- var sex = prompt('请输入您的性别');
- console.log(name + age + sex);
alert(name + '\n' +age + '\n' + sex )
来源: https://juejin.im/post/5c498f0d51882525487c6612