# javascript快速入门2--变量,小学生数学与简单的交互
## 变量
对于变量的理解:变量是数据的代号。如同人的名字一样。
```
var num;//在JavaScript中使用关键字var声明一个变量
```
在JavaScript中,使用上面的语法,就可以声明一个变量,以便在之后给其指定值.
```
var num;
num=128;//这样,就将num做为值128的一个名字,有了名字,就可以在之后引用!
document.write(num);//输出128
```
貌似下面的代码和上面的具有一样的输出
```
document.write(128);//这样当然也输出了128
```
不过再试试下面的代码
```
document.write(3.14159265358979);//我们要多次输出这个值
document.write(3.14159265358979);
document.write(3.14159265358978);
document.write(3.14159265358979);
document.write(3.14159265358979);
```
于是可以用变量的概念来偷懒
```
var num;
num=3.14159265358979;
document.write(num);
document.write(num);
document.write(num);
document.write(num);
document.write(num);
```
虽然看上去没节约多少笔墨,但有一个概念即是:我们使用document.write多次输出的是同一个值!而前面一块则不同,它在每次输出时产生了一个新的值,显而易见,使用变量可以清楚的表达我们想要做的,而且简短的变量名引用可以使代码更清晰且不容易出错! 当然,名字不是乱取的,变量的命名有一些限制:只能包含字母,数字,和下划线,还有个特殊的$字符,并且变量名只能以字母,下划线,还有$开头;另外,还不能使用JavaScript关键字和保留字;所以说,下面的变量声明全是错误的
```
var 34bad;//不能以数字开头
var per人;//不能包含中文
var bad-var;//非法的-
var var;//var就是一个关键字,所以很明显不能用来做变量名
```
**另外要注意的一点是,变量的名称是区分大小写的!**
## 值,类型
```
var dog;
dog="小虎子";//字符串,它们总被包含在双引号(或单号)中
var num;
num=1;//数字,它们裸露的出现了
var strNum;
strNum="1";//但是现在strNum所引用的是一个字符串,因为它被包含在引号中了
var badNum;
badNum=3.345;//一个小数,因为它带有一个小数点
badNum=.2;//仍然是一个小数,这句代码与badNum=0.2是一样的!
badNum = 0.4.5;//当然,这句代码是错的,一个非法数字
```
上面那样的写法(为了演示),我已经不想再忍受了,完全可以这样声明变量
```
var dog,num,strNum,badNum;//可以一次声明多个变量,它们用逗号分隔,然后再赋值
dog="小虎子";
num=1;
..........................
```
当然还有另一种声明变量的方法,事实上这种风格才是最常见的
```
var dog="小虎子"; var num=1; var str="some string",strNum="123";
......
```
数字(只能有整数或小数),字符串可能最常用的了,还有另一种类型:布尔值(Boolean).不像数字或字符串,有无限种可能的值,Boolean值只有两种可能:真,假
```
var bool=true;//用true表示真值
bool=false;//用false表示假值
```
JavaScript是动态类型语言,在声明变量时无需指明其类型,在运行时刻变量的值可以有不同的类型。
```
var s="Hello,World!!!";//无需指明为字符串类型
s=1.61803;//在运行时将变量值指定为另一个类型
```
JavaScript的变量类型不止字符串,数字,布尔值这三种,然而这三种确是最常用的了。其它数据类型(参考):
复合(引用)数据类型是:
* 对象
* 数组
特殊数据类型是:
* Undefined
```
//事实上,我们接触的第一个数据类型是Undefined,它的含义是"未定义值"
var a;//声明一个变量,但没有对其赋值
alert(a);//但它仍然有值的,它的值为undefined
alert(b);//但注意,输出一个未定义的变量将出现错误,而不是输出undefined
```
## 字符串
字符串相连
```
var s1="Hello,";
s1=s1+"World!";
alert(s1);
s1+="!!!!";
alert(s1);
```
## 数学运算与比较
首先是小学生都会的加减乘除:+,-,*,/
```
//加法 +
//减法 -
//乘法 *
//除法 /
//自增 ++
//自减 --
var a = 12; var b = 30; var c = a+b;
alert(c);//输出42
c=b-a;
alert(c);//输出18
c=c*2;
alert(c);//输出36
c=c/2;
alert(c);//输出18
c = 12;
c++;//这与c=c+1;效果是一样的
alert(c);//输出13
c--;//这与c=c-1;效果是一样的
alert(c);//输出11
//自增与自减运算符出现的地方也有讲究
c=20;
alert(c++);//输出20,因为++写在变量后面,这表示变量c完成运算之后,再将其值增1
alert(c);//现在将输出21,自减运算符也与些相似
//如果只是类似这样的计算
c = c+12; //可以这样写
c+= 12;//这与写c= c+12;效果是一样的
//类似其它的运算也有简便的方法
c-=3;//c=c-3
c*=4;//c=c*3;
c/=2;//c=c/2;
```
要注意的是,在JavaScritp中,连接字符串时也使用“+”号。当字符串与数字相遇时?——JavaScript是弱类型语言
```
var num=23+45;
alert("23+45等于"+num);//表达式从左往右计算,字符串之后的数字都会当成字符串然连接
alert("23+45="+(23+45));//使用括号分隔
```
比较操作符:<,>,<=,>=,==,!=,!;比较操作符返回布尔值
```
//小于 <
//大于 >
//小于或等于 <=
//大于或等于 >=
//相等 ==
//不相等 !=
alert(2<4);//返回true
alert(2>4);//返回false
alert(2<=4);//返回true
alert(2>=2);//返回true
alert(2==2);//返回true
alert(2!=2);//返回true
```
表达式的组合
```
alert( (2<4)==(5>3)==(3<=3)==(2>=2)==(2!=2)==(2==2)==true );
```
## 逻辑运算符
逻辑运算符用于对布尔值进行比较
```
// &&逻辑与,当两边的值都为true时返回true,否则返回false
// || 逻辑或,当两边值都为false时返回false,否则返回true
// ! 逻辑非
alert(true && false);//输出false
alert(true && true);//输出true
alert(true || false);//输出true
alert(false || false);//输出false
alert(!true);//输出false
```
## 类型转换入门
由于JavaScript是弱类型语言,所以我们完全可以将字符串和数字(两个不同类型的变量)进行相加,这个我们在前面已经演示过了.当然,不仅仅可以将字符串和数字相加,还可以将字符串与数字相乘而不会出现脚本错误!
```
var str ="some string here!"; var num = 123;
alert(str*num);//将输出NaN,因为乘法运算符只能针对数字,所以进行运算时计算机会将字段串转换成数字
//而这里的字符串转换成数字将会是NaN
//NaN是一个特殊的值,含义是"Not A Number"-不是一个数字,当将其它值转换成数字失败时会得到这个值
str ="2";
alert(str*num);//将输出246,因为str可以解析成数字2
```
其它类型转换
```
var bool = true;
alert(bool*1);//输出1 ,布尔值true转换成数字为1,事实上将其它值转换在数字最简单的方法就是将其乘以1
bool = false;
alert(bool*1);//输出0
alert(bool+"");//输出"flase",将其它类型转换成字符串的最简单的方法就是将其写一个空字符串相连
alert(123+"");//数字总能转换成字符串
var str = "some string";
alert(!!str);//true,因为非运算符是针对布尔值进行运算的,所以将其它类型转换成布尔值只须将其连续非两次
str ="";
alert(!!str);//输出false,只有空字符串转换成布尔值时会是false,非空字符串转换成布尔值都会返回true
var num =0;
alert(!!num);//false
num=-123.345;
alert(!!num);//true,除0以外的任何数字转换成布尔值都会是true
//还有一个非常重要的是,空字符串转换成数字将会是0
alert(""*1);//输出0
```
获取变量类型 typeof 运算符
```
var bool = true;
alert(typeof bool);//输出boolean
var num =123;
alert(typeof num);//输出number
var str = "some string here";
alert(typeof str);//输出string
var strNum = "123";
alert(typeof strNum);//输出string
strNum *= 1;
alert(typeof strNum);//输出number
```
## 根据用户的输入进行计算
使用window.prompt可以弹出包含输入框的窗口,用户输入的内容将是此函数的返回值
```
var msg = window.prompt("请输入一个数字","默认值");//prompt方法包含一个必须参数和一个可选参数。
//第一个参数是必须的,将在窗口中显示的文字,第二个参数是可选的,为文本框的预设值
alert(msg);//将输出我们输入进去的东西
```
请用户输入年龄,我们计算出他活了多少秒(貌似无聊的很啊)
```
var age=window.prompt("请输入您的年龄!","18"); var liveSeconds=age*365*24*3600;
alert("您已经度过了"+liveSeconds+"秒!");
```
- 介绍
- HTML/CSS 教程
- 第 1 章 HTML5 概述
- 第 2 章 基本格式
- 第 3 章 文本元素
- 第 4 章 超链接和路径
- 第 5 章 分组元素
- 第 6 章 表格元素
- 第 7 章 文档元素
- 第 8 章 嵌入元素
- 第 9 章 音频和视频
- 第 10 章 表单元素[上]
- 第 10 章 表单元素[中]
- 第 10 章 表单元素[下]
- 第 11 章 全局属性和其他
- 第 12 章 CSS 入门
- 第 13 章 CSS 选择器[上]
- 第 14 章 CSS 颜色与度量单位
- 第 15 章 CSS 文本样式[上]
- 第 15 章 CSS 文本样式[下]
- 第 16 章 CSS 盒模型[上]
- 第 16 章 CSS 盒模型[下]
- 第 17 章 CSS 边框与背景[上]
- 第 17 章 CSS 边框与背景[下]
- 第 18 章 CSS 表格与列表
- 第 19 章 CSS 其他样式
- 第 20 章 CSS3 前缀和 rem
- 第 21 章 CSS3 文本效果
- 第 21 章 CSS3 文本效果
- 第 23 章 CSS3 边框图片效果
- 第 24 章 CSS3 变形效果[下]
- 第 25 章 CSS3 过渡效果
- 第 26 章 CSS3 动画效果
- 第 27 章 CSS 传统布局[上]
- 第 27 章 CSS 传统布局[下]
- 第 28 章 CSS3 多列布局
- 第 29 章 CSS3 弹性伸缩布局[上]
- 第 29 章 CSS3 弹性伸缩布局[中]
- 第 29 章 CSS3 弹性伸缩布局[下]
- 第 30 章 使用 Emmet 插件
- Bootstrap 教程
- 第 1 章 Bootstrap 介绍
- 第 2 章 排版样式
- 第 3 章 表格和按钮
- 第 4 章 表单和图片
- 第 5 章 栅格系统
- 第 6 章 辅组类和响应式工具
- 第 7 章 图标菜单按钮组件
- 第 8 章 输入框和导航组件
- 第 9 章 路径分页标签和徽章组件
- 第 10 章 巨幕页头缩略图和警告框组件
- 第 11 章 进度条媒体对象和 Well 组件
- 第 12 章 列表组面板和嵌入组件
- 第 13 章 模态框插件
- 第 14 章 下拉菜单和滚动监听插件
- 第 15 章 标签页和工具提示插件
- 第 16 章 弹出框和警告框插件
- 第 17 章 按钮和折叠插件
- 第 18 章 轮播插件
- 第 19 章 附加导航插件
- 第 20 章 项目实战--响应式导航[1]
- 第 20 章 项目实战--响应式轮播图[2]
- 第 20 章 项目实战--首页内容介绍[上][3]
- 第 20 章 项目实战--首页内容介绍[下][4]
- 第 20 章 项目实战--资讯内容[5,6]
- 第 20 章 项目实战--案例和关于[7]
- javaScript 教程
- javascript快速入门1--JavaScript前世今生,HelloWorld与开发环境
- javascript快速入门2--变量,小学生数学与简单的交互
- javascript快速入门3--分支判断与循环
- javascript快速入门4--函数与内置对象
- javascript快速入门5--数组与对象
- javascript快速入门6--Script标签与访问HTML页面
- javascript快速入门7--ECMAScript语法基础
- javascript快速入门8--值,类型与类型转换
- javascript快速入门9--引用类型
- javascript快速入门10--运算符,语句
- javascript快速入门11--正则表达式
- javascript快速入门12--函数式与面向对象
- javascript快速入门13--BOM——浏览器对象模型(Browser Object Model)
- javascript快速入门14--DOM基础
- javascript快速入门15--节点
- javascript快速入门15--表单
- javascript快速入门16--表格
- javascript快速入门17--事件
- javascript快速入门18--样式
- javascript快速入门19--定位
- javascript快速入门20--Cookie
- javascript快速入门21--DOM总结
- javascript快速入门22--Ajax简介
- javascript快速入门23--XHR—XMLHttpRequest对象
- javascript快速入门24--XML基础
- javascript快速入门25--浏览器中的XML
- javascript快速入门26--XPath
- javascript快速入门27--XSLT基础
- PHP 教程
- 第一章 如何加载运行已发布的PHP项目
- 第二章 PHP基础
- 第三章 操作符与控制结构
- 第四章 数学运算
- 第五章 数组
- 第六章 目录与文件
- 第七章 自定义函数
- 第八章 字符串处理
- 第九章 正则表达式
- 第十章 日期与时间
- 第十一章 表单与验证
- 第十二章 会话控制
- 第十三章 上传文件
- 第十四章 处理图像
- 第十五章 MySQL 数据库
- 第十六章 PHP 操作MySQL
- 第十七章 面向对象基础
- 第十八章 面向对象的特性
- 第十九章 面向对象的工具