前端零基础 JS 教学第一天 01 - day 变量与数据类型

栏目: JavaScript · 发布时间: 6年前

内容简介：本人记录使用的工具是xmind 要是不会的小伙伴可以百度下很简单每天的课程下面都会有实战案例的演示Demo学习目标：电脑基本介绍：

本人记录使用的工具是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 )复制代码

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

Agile Web Development with Rails 4

Sam Ruby、Dave Thomas、David Heinemeier Hansson / Pragmatic Bookshelf / 2013-10-11 / USD 43.95

Ruby on Rails helps you produce high-quality, beautiful-looking web applications quickly. You concentrate on creating the application, and Rails takes care of the details. Tens of thousands of deve......一起来看看《Agile Web Development with Rails 4》这本书的介绍吧!

码农工具

图片转BASE64编码

在线图片转Base64编码工具

HTML 编码/解码

HEX HSV 转换工具

HEX HSV 互换工具

前端零基础 JS 教学 第一天 01 - day 变量与数据类型

关于编辑器vscode 的几个知识 视口 与 ie