JS基础:数据类型及其案例

目录

1. 数据类型

1.2 变量的数据类型

1.3 数据类型分类

1.3.1 简单数据类型

1.4 检测数据类型

1.5 数据类型转换

1.5.1 转字符串类型

1.5.2 转数字型(重点)

2. 案例

2.1 显示年龄案例

2.2 输入年份显示年龄

2.3 简单加法器


1. 数据类型

为了充分利用空间,数据类型把数据分为内存大小不同的数据。

1.2 变量的数据类型

JavaScript是一种弱类型或者动态语言。只有在运行过程中根据=右边的值来判断数据类型。

JavaScript有动态类型,相同的变量可用不同的类型(如var=10;var=‘lisa’)

1.3 数据类型分类

数据类型分为为两大类:

  • 简单数据类型(number、string、Boolean、undefined、null)
  • 复杂数据类型(object)

1.3.1 简单数据类型

1. 数字型

二进制:ob

八进制:(0-7表示),前面加 0 表示八进制

十六进制:(0-9,a-f),前面加 0x 表示十六进制

数值最大值(Number.MAX_VALUE)

数值最小值   (Number.MIN_VALUE)

数字型三个特殊值:Infinity,无穷大;-Infinity,无穷小;NaN,Not number,非数值

isNaN( )方法用来判断非数字,并返回值(false、true)

 2. 字符串型(string)

 用引号(单引号‘ ’和双引号‘’ ”)来表示,JS推荐用单引号,或者用双引号内嵌单引号(外双内单,外单内双

字符串转义符:

转义符解释
\n换行符
\\斜杠\
\'' 单引号
\"“ 双引号
\ttab 缩进
\b空格,blank

转义字符都是用反斜杠/开头的,它们必须包含在引号里面

字符串长度由length属性获取

 字符串的拼接 +

口诀:数值相加,字符相连

 变量不能添加引号,加引号会变字符串

3. 布尔型 Boolean

 有 true(真 1)和 false(假 0)两个值

1.4 检测数据类型

用  typeof 变量可用检测数据类型

prompt取值是字符型的,不能进行运算,需要进行数据转换

1.5 数据类型转换

使用表单,prompt获取的数据默认是字符串类型的,不能进行运算,需要转换数据类型

1.5.1 转字符串类型

方式说明例子

toString()

转字符串var num =1;alert(num.toString);
String()强制转换var num =1;alert(String(num));
加号拼接和字符串拼接的都是字符串var num =1;alert(num+“字符串”);

 第三种方式最常用,也称隐式转换

1.5.2 转数字型(重点)

方式说明例子
parselnt(String)将string转整数数值型(取整)parselnt(‘232’);
parseFloat(string)转为浮点字符型parseFloat(‘2.33’)
Number()强制转换转为字符型Number(‘12’)
js隐式转换(- * /)用算数运算符转为数值型‘12’ - 0

1.5.3 转布尔型

方式说明例子
Boolean()函数其他类型转布尔型Boolean(‘小小’)

 代表空、否的值会被转为false,如‘’、0、NaN、null、undefined

其余的都会转为true

2. 案例

2.1 显示年龄案例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var age = prompt("请输入您的年龄:");
        alert('您的年龄是' + age);
    </script>
</head>

<body>

</body>

</html>

2.2 输入年份显示年龄

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var year = prompt("请输入出生年份:");
        var age = 2022 - year + 1;
        alert('您今年' + age + '岁啦!');
    </script>
</head>

<body>

</body>

</html>

2.3 简单加法器

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        var num1 = prompt('请输入第一个数值:')
        var num2 = prompt('请输入第二个数值:')
        var result = parseFloat(num1) + parseFloat(num2);
        alert(num1 + '+' + num2 + '=' + result);
    </script>
</head>

<body>

</body>

</html>
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
《精通JS脚本之ExtJS框架》由浅入深地讲解了ExtJS在Web开发中的相关技术。本书共分17章,分别介绍了JavaScript的对象编程、JavaScript浏览器对象模型和事件机制、ExtJS的核心类库和组件、ExtJS的事件处理方式、设计进度条、设计工具栏和菜单栏、设计面板、设计表格、设计表单、设计数据表、对Ajax的支持以及如何调试等。最后利用一个商品信息管理系统和一个企业任务管理系统,向读者演示了ExtJS在实际项目中的应用以及实现流程。   《精通JS脚本之ExtJS框架》附有配套光盘,提供了书中实例的源代码和视频教学文件。此外,读者还可以通过访问itzcn网站来获得即时在线帮助。   《精通JS脚本之ExtJS框架》可以作为Web开发的自学参考书,也可以作为RIA Web程序开发的培训教材。 第1章 JavaScript入门必备 1.1 JavaScript语言概述 1.1.1 JavaScript简介 1.1.2 JavaScript特点 1.1.3 JavaScript与Java 1.2 第一个JavaScript程序 1.2.1 嵌入JavaScript 1.2.2 链接外部JavaScript文件 1.2.3 注意事项 1.3 基础语法 1.3.1 数据类型 1.3.2 变量与常量 1.3.3 运算符 1.4 流程控制语句 1.4.1 if条件语句 1.4.2 switch条件语句 1.4.3 while循环语句 1.4.4 do while循环语句 1.4.5 for循环语句 1.4.6 for in循环语句 1.4.7 try catch finally语句 1.4.8 其他语句 第2章 JavaScript浏览器对象模型与事件处理 2.1 浏览器对象模型 2.1.1 文档对象 2.1.2 表单及其元素对象 2.1.3 浏览器信息对象 2.1.4 窗口对象 2.1.5 网址对象 2.1.6 历史记录对象 2.2 基本事件处理 2.3 2级DOM事件模型 2.3.1 事件传播 2.3.2 注册事件处理程序 2.3.3 event对象 2.4 常用事件 2.4.1 键盘事件 2.4.2 鼠标事件 2.4.3 页面事件 第3章 开始使用ExtJS 3.1 ExtJS概述 3.1.1 ExtJS简介 3.1.2 ExtJS中的基本概念 3.1.3 ExtJS与常见JavaScript库的介绍与对比 3.2 创建第一个程序 3.2.1 下载ExtJS 3.2.2 部署到开发工具中 3.2.3 编写HelloWorld.html 3.2.4 运行调试ExtJS 3.3 辅助开发 3.3.1 调试工具Firebug 3.3.2 开发利器Spket 第4章 ExtJS事件机制 4.1 设计模式——观察者模式 4.2 自定义事件 4.3 浏览器事件 4.4 ExtJS中的事件 4.4.1 Function.call()/apply()方法 4.4.2 函数的作用域 4.4.3 Ext.lib.Event事件 4.4.4 Ext.util.Observable事件 4.4.5 Ext.EventManager事件 4.4.6 Ext.EventObject事件 4.5 各种事件登记方式 4.5.1 传统式登记 4.5.2 内联式登记 4.5.3 Dom Level2登记 4.6 高级组件事件 4.7 ExtJS键盘事件 第5章 ExtJS组件 5.1 核心组件 5.1.1 ExtJS组件结构 5.1.2 Ext.Component 5.1.3 Ext.BoxComponent 5.1.4 Ext.Container 5.1.5 Ext.Panel 5.1.6 Ext.TabPanel 5.2 信息提示框组件 5.2.1 Ext.MessageBox简介 5.2.2 Ext.MessageBox.alert() 5.2.3 Ext.MessageBox.confirm() 5.2.4 Ext.MessageBox.prompt() 5.2.5 Ext.MessageBox.wait() 5.2.6 Ext.MessageBox.show() 5.2.7 Ext.MessageBox的其他功能 5.3 进度条组件 5.3.1 Ext.ProgressBar简介 5.3.2 手工模式的进度条 5.3.3 自动模式的进度条 5.3.4 自定义样式的进度条 5.4 工具栏和菜单栏 5.4.1 Ext.Toolbar简介 5.4.2

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值