前端与移动开发----JavaScript 基础----变量与数据类型

最新推荐文章于 2024-08-04 19:24:37 发布

東三城

最新推荐文章于 2024-08-04 19:24:37 发布

阅读量228

点赞数

分类专栏：前端与移动开发学习笔记 JavaScript学习笔记文章标签： js javascript

本文链接：https://blog.csdn.net/qq_40440961/article/details/109658880

版权

前端与移动开发学习笔记同时被 2 个专栏收录

75 篇文章 6 订阅

订阅专栏

JavaScript学习笔记

6 篇文章 0 订阅

订阅专栏

JavaScript基础

序言

JavaScript发展历史(js)

1.1994年，网景公司(Netscape)发布了Navigator浏览器0.9版，这是世界上第一款比较成熟的网络浏览器，轰动一时。但是这是一款名副其实的浏览器--只能浏览页面，浏览器无法与用户互动,当时解决这个问题有两个办法，一个是采用现有的语言,许它们直接嵌入网页。另一个是发明一种全新的语言。

2.1995年Sun公司将Oak语言改名为Java，正式向市场推出。Sun公司大肆宣传，许诺这种语言可以"一次编写，到处运行"(Write Once, Run Anywhere)，它看上去很可能成为未来的主宰。

3.网景公司动了心，决定与Sun公司结成联盟

4.34岁的系统程序员Brendan Eich登场了。1995年4月，网景公司录用了他,他只用10天时间就把Javascript设计出来了。（多肽语言）

5.(1)借鉴C语言的基本语法;(2)借鉴Java语言的数据类型和内存管理;(3)借鉴Scheme语言，将函数提升到"第一等公民"(first class)的地位;(4)借鉴Self语言，使用基于原型(prototype)的继承机制。

在这里插入图片描述

JavaScript是什么？

JavaScript：基于对象和事件驱动，运行在浏览器客户端的脚本语言。[js]
   ✔ js的运行环境：运行在浏览器端的一种语言
   ✔ 最后将所有的js代码都要以对象的形式去执行，都要通过事件的方式去触发执行【DOM】	
 对象： 
	 现实世界中的对象：将任何一个具体的事物都是一个对象【万事万物皆对象】
     编程中的对象：对现实中对象的抽象描述
     
     面向对象特征： 封装   继承   多态 
编程思想：
 ✔面向对象：
 	   代码执行都要以一个具体的对象为整体去执行
 ✔面向过程：
 	   代码执行的时候，一行一行执行的。

JavaScript能干什么？

  ☞ 常见的网页效果【表单验证，轮播图。。。】
  ☞ 与H5配合实现游戏【水果忍者： http://www.jq22.com/demo/html5-fruit-ninja/】
  ☞ 实现应用级别的程序【 http://naotu.baidu.com】
  ☞ 实现统计效果【http://echarts.baidu.com/examples/】
  ☞ 地理定位等功能【http://lbsyun.baidu.com/jsdemo.htm#i4_5】
  ☞ 在线学编程【https://codecombat.163.com/play/】
  ☞ js可以实现人工智能  【面部识别】
  ☞ 可以实现服务端功能  nodejs

JavaScript组成

☞ ECMASCRIPT    定义了javascript的语法规范,描述了语言的基本语法和数据类型
  
☞ BOM （Browser Object Model） 即浏览器对象模型。
	浏览器对象模型,一套操作浏览器功能的API,通过BOM可以操作浏览器窗口，比如：弹出框、控制浏览器跳转、获取分辨率等
    
☞ DOM (Document Object Model) 文档对象模型,一套操作页面元素的API,DOM可以把HTML看做是文档树，通过DOM提供的API可以对树上的节点进行操作 【js+HTMl+css】

JavaScript书写位置

内嵌式写法

☞在html页面内部设置
    <script type="text/javascript">
		 js
	</script>
 注意：
  	 该标签可以放到head标签中或者body标签中

外联式写法[推荐写法]

 ☞ 
 	1. 新建js文件
    2. 通过script标签引用到当前页面中
    <script type="text/javascript" src="test.js"></script>
注意：
	1. 不能将代码写到外联式标签中。
    2. 一个网页中可以同时调用多个外部js文件

行内式写法（不推荐）

☞  将js代码写到标签内部
<div onclick="js代码"></div>
注意：
	onclick 是一个点击事件： 当点击div的时候，会触发该事件，执行该事件中的代码

JavaScript中输入消息方式

alert();//在网页中以弹出窗口的形式输出消息

document.write('<h1>我是一段文字</h1>');//在网页中输出信息

prompt("请输入姓名","测试");//接收用户输入的

confirm("确定不听课么");//通过js的方式获取用户的选中操作(确定或者取消)

console.log("adsadsfafds");	 //在控制台中输出消息

总结：
	1.在js中如果希望输出一个具体的文本信息，必须带引号
    2.在使用document.write();的时候，可以在方法内输出html标签，加引号。
      document.write("<h1>我是一个标题标签</h1>");

变量（重点）

变量概念

 ☞ 变量：变量指的是在程序中保存数据的一个容器

定义变量及赋值

☞ 定义变量
 	 var  变量名;
☞ 赋值
 	 变量名 = 值;
☞ 总结：
	 1.一个变量一次只能保存一个值
     2.最后一次的赋值结果
     3.变量是区分大小写（js区分大小写）

变量命名规范

☞ 规则(必须遵守的，不遵守的话JS引擎发现并报错) 
  1.由字母(A-Za-z)、数字(0-9)、下划线(_)、美元符号( $ )组成，如：var usrAge, num01, _name
  2.区分大小写 强调：JS 严格区分大小写 ，var app; 和 var App; 是两个变量
  3.不能以数字开头，或者汉字定义变量名
  4.不能是关键字(具有特殊含义的单词)、保留字(在当前的js版本中没有特殊含义,但是在其他版本中具有特殊含义)和代码符号，例如：var、for、while、&, class
  5.不能出现空格
        
☞ 规范(建议遵守的，不遵守的话JS引擎也不会报错)
	1. 变量名必须有意义
    2. 遵守驼峰命名法。首字母小写，后面单词的首字母需要大写。

在这里插入图片描述

测试

1. 气温表示方式有两种：摄氏度和华氏度
	   华氏度=9/5*摄氏度+32
   请使用代码完成：让用户输入任意的摄氏度，得到对应的华氏度。
   <script>    
        // 1. 先定义一个变量保存华氏度
        var  hsd;
        // 2. 定义一个变量保存摄氏度, 将用户输入的值赋值给 ssd 变量
        var ssd = prompt('请输入摄氏度');
        // 3. 套公式计算
        hsd = 9 / 5 * ssd + 32;
        // 4. 输出最后的结果
        document.write(hsd);
    </script>
4. 定义两个变量，求和
	<script>
        var a = Number(prompt('请输入第一个值：'));
        var b = parseInt(prompt('请输入第二个值：'));
        var c = a + b;
        alert('和为：' + c);
    </script>
5. 交换两个变量的值
  <script>           
       // 交换两个变量的值    a = 2    b = 1;
        var a = 1;
        var b = 2;
       // 步骤:
       // 1. 定义一个临时变量 (空的容器)
        var c;
       // 2. 将a变量中的值赋值给c变量(将a容器中的液体倒入到c中)
         c = a; 
       // 3. 将变量b的值赋值给a
         a = b;
       // 4. 将变量c的值赋值给b;
         b = c;
         console.log(a);
         console.log(b);
   </script>

数据类型（重点）

数据类型

 ☞ 数据类型:数据类型指的是变量的数据类型

简单数据类型

数字类型(number)

☞凡是数字都属于该类型【整数，小数，负数】
☞只要变量的值是一个具体的数字，那么当前变量的数据类型就是数值类型
☞number类型表示的数字大小：
   最大值是±1.7976931348623157乘以10的308次方     Number.MAX_VALUE
   最小值是±5 乘以10的-324次方				     Number.MIN_VALUE

字符串类型(string)

☞字符串可以是引号中的任意文本。可以使用单引号或双引号
☞在js中一般写字符串类型的变量时候，推荐使用单引号。
☞注意：
1. 单引号和双引号之间的嵌套
   	例如： 输出我是"高帅富"程序猿;  
     <script>
        alert('我是"高富帅"程序猿');
    </script>
     2. 转义字符
  	 \n     换行
     \\		斜杠
      \'	单引号
	  \"	双引号
	  \r 	回车符
     
例如：
  var strMsg = 'I'm the GOD of my world ~!'; //输出:I'm the GOD of my world ~!
  var strMsg2 = "I"m the GOD of my world ~!";//输出I"m the GOD of my world ~!
  var strMsg3 = '反斜杠是这个 \\，神奇！'; //输出：反斜杠是这个 \，神奇！

布尔类型(boolean)

☞只要变量的值是 true  或者 false 中的一个,那么该变量就是布尔类型.
注意事项:
    1. true 和 false 就是一个特殊的值
    2. true 在程序中表示正确的,条件成立的
    3. false 在程序中表示错误的,条件不成立的

undefined类型（了解）

//如果一个变量没有赋值，该变量的默认是undefined
  var n1;
//如果一个变量的值是undefined，那么该变量的数据类型就是undefined类型

null 空对象类型（了解）

◆ null类型被看做空对象指针.只有一个值，即 null 值
◆ null 空比如一个变量原先有值 可以将变量的值设置为null 代表清空变量容器中的数据 
◆ 作用为了清空对象。

复杂数据类型

object类型

数据类型判断

☞使用 typeof 变量可以得到对应变量的数据类型
☞例如：
	var n1 = 123;
	//获取n1的数据类型
	console.log(typeof n1);

判断一个变量是不是数字

isNaN(x) 方法
例如：
	var usrAge = 21;
    var isOk = isNaN(usrAge);
    console.log(isNum); // false ，21 不是一个 非数值

    var usrName = "James";
    console.log(isNaN(usrName));//true ，"James"是一个 非数值

数据类型转换

转数值类型

☞Number(变量)：
  总结：
    1.可以通过该方法将数据类型转换为数值类型
        var n1 = '123';
        console.log(typeof n1);
        //方法一：通过Number()
        n1 = Number(n1);
        console.log(typeof n1);
    2.在转换的过程中可以将原来的值保留，遇到小数直接保留下来，不会舍去.
    3.如果变量无法转换为数值类型，那么返回的结果是NaN;对应的数据类型依然是数值类.
    4.如果将布尔类型转换为数值类型，true 转化后的结果是1,false 转化后的结果是0.         
☞parseInt(变量)
  var num1 = parseInt("12.3abc");//返回12,如果第一个字符是数字会解析知道遇到非数字结束
  var num2 = parseInt("abc123");//返回NaN，如果第一个字符不是数字或者符号就返回NaN
   总结：
     1.只会保留整数部分，通过该方式进行数据类型转换后得到就是一个整数
     2.如果一个变量中的值无法转换为具体数字，那么返回的结果是一个 NaN 的值
     3.NaN (not  a  number)----NaN对应的数据类型是数值类型
     4.通过该方法可以将其他数据类型转为数值类型       
☞parseFloat(变量)
	parseFloat()把字符串转换成浮点数
    总结：
      1.通过该方法可以将其他数据类型转换为数值类型
      2.在转换过程中，如果遇到小数，那么会直接将小数部分保留
      3.如果转化不成功过，返回的结果NaN

转字符串类型

☞变量.toString()
 	var num = 5;
	console.log(num.toString());
☞String(变量)   	
  总结：
	String()函数存在的意义：有些值没有toString()，这个时候可以使用String()。
    比如：undefined和null

转布尔类型

☞Boolean()
 当其他数据类型转化为布尔类型后,变量原来的值一定会发生改变, 是 true 或者 false
 总结：
	0 |''(空字符串)| null | undefined | NaN 会转换成 false 其它都会转换成 true

测试

1. 让用户输入一个三位数【整数】，使用代码分别获取到这个三位数字百位，十位，个位上的数字。
  <script>
     //1.先获取一个3位数, 用户输入
     	var num = prompt('请输入一个3位数');
     //2.需要将3位数转换为真正的数字类型
     	num = Number(num);
     //3.获取当前这个数字身上的百位十位个位上的值%获取余数
        var bai = parseInt(num / 100);
        var shi = parseInt(num % 100 / 10);
        var ge =  parseInt(num % 10);
        console.log('百位是:' + bai + '十位是:' + shi + '个位是:' + ge);       
    </script> 	 	
2. 用户任意输入一个三位数，求这个三位数字百位，十位，个位之和。
	<script>
        var num = Number(prompt('请输入一个三位数：'));
        var a = parseInt(num / 100);
        var b = parseInt(num % 100 / 10);
        var c = parseInt(num % 10)
        alert('百位：' + a + '    十位：' + b + '    个位：' + c);
        var he = a + b + c;
        document.write('百位，十位，个位之和：' + he);
    </script>

算数运算符

+ 运算
  总结：
    1.如果是数值类型的变量相加，结果就是一个数值类型的结果
    2.如果是一个字符串类型的变量相加，最后的结果就是字符串（加号起到的作用就是拼接字符串的功能）   	
-运算
  总结：
    1.如果是数值类型的变量相减，结果就是一个数值类型的结果
    2.如果是数字的字符串相减，得到的结果也是一个数值类型结果（发生了隐式类型转化）
            var n1 = '123';
            var n2 = '123';
    3.如果是非数字的字符串相减，得到的结果是NaN
*运算
	
/运算
	1.如果是数值类型的变量相除，结果就是一个数值类型的结果
    2.如果是数字的字符串相除，得到的结果也是一个数值类型结果（发生了隐式类型转化）
    3.如果是非数字的字符串相除，得到的结果是NaN
    4.如果除数是0 ，得到的结果是 Infinity （无穷大的值）	 
%取余（获取余数）

如有不足，请多指教，
未完待续，持续更新！
大家一起进步！

東三城

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
2
评论
前端与移动开发----JavaScript 基础----变量与数据类型

JavaScript基础序言JavaScript发展历史(js)1.1994年，网景公司(Netscape)发布了Navigator浏览器0.9版，这是世界上第一款比较成熟的网络浏览器，轰动一时。但是这是一款名副其实的浏览器--只能浏览页面，浏览器无法与用户互动,当时解决这个问题有两个办法，一个是采用现有的语言,许它们直接嵌入网页。另一个是发明一种全新的语言。2.1995年Sun公司将Oak语言改名为Java，正式向市场推出。Sun公司大肆宣传，许诺这种语言可以"一次编写，到处运行"(Writ
复制链接

扫一扫