其实前端就是 一共三步骤 : 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 里面不能填写内容*/
&lt;script <span class="hljs-built_in">type</span>=<span class="hljs-string">"text/javascript"</span> src=<span class="hljs-string">""</span>&gt;&lt;/script&gt;

</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 )复制代码

感谢    赞同    分享    收藏    关注    反对    举报    ...