您的位置：首页 > Web前端 > JavaScript

JavaScript01—概述、语法、流程控制

2017-07-03 16:56 429 查看

概述

javaScript是嵌入HTML页面中，由浏览器解释执行代码的脚本语言

事件定义式：在事件定义时直接写js

嵌入式:使用
<script>
标签

文件调用式：页面引用.js文件

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js</title>
<script type="text/javascript">
function method() {
alert("hello2");
}
</script>
<script type="text/javascript" src="alertMethod.js"></script>
</head>
<body>
<input type="button" value="事件定义式" onclick="alert('hello1');">
<input type="button" value="嵌入式" onclick="method();">
<input type="button" value="文件调用式" onclick="method3();">
</body>
</html>


alertMethod.js

脚本文件中不需要脚本的开始和结束声明

function method3() {
alert("hello3");
}


基础语法

变量：使用var声明变量，未初始化的对象自动赋值：undefined。变量没有类型，统一使用var声明，变量引用的数据是有类型的

数据类型

null：空；undefined：未定义；

Number：数字；String：字符串；Boolean：布尔；Function：函数；Array：数组

window：浏览器对象；document：文档对象

Object：自定义对象

数据类型的隐形转换

数字+字符串：数字转换成字符串

数字+布尔值：true转换成1，false转换成0

字符串+布尔值：布尔值转换成字符串true或false

布尔值+布尔值：布尔值转换成0或1

数据类型转换函数

toString所有数据类型均可转换成String类型

parseInt强制转换为int，否则返回NaN(not a number) parseInt(5.9)返回5

typeof查询当前类型

isNaN检查是否不是数字(is not a number)，不是数字返回true，是数字返回false

实例：计算数值的平方

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>计算平方</title>
<script type="text/javascript">
function calc(){
//在控制台，打印一个日志，用作测试
console.log("开始计算平方");

//取出文本输入框中的内容
var txtNumber = document.getElementById("txtNumber").value;
console.log( txtNumber );
console.log( typeof txtNumber );

//判断输入的内容是否是一个数值
if( isNaN(txtNumber) ){ //如果不是一个数值
alert("请输入一个数值");
} else {                    //否则是一个数值
//输出结果
var num = parseFloat( txtNumber );
var result = num * num;
alert( "结果是：" + result );
}

}
</script>
</head>
<body>
请输入一个数值：
<input type="text" id="txtNumber" size="5"/>
<input type="button" value="计算平方"
onclick="calc();" />
</body>
</html>


运算符

/除法：java中5/2结果是2，js中5/2结果是2.5

三目运算：表达式？表达式1：表达式2

实例：猜0~100之间的一个随机整数

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>猜数字</title>
<script type="text/javascript">

//定义一个全局的变量：生成一个随机整数
//该变量，是直接存放在浏览器中，在所有函数中都可访问该变量
var result = parseInt( Math.random()*100 );//控制小数点后位数

function guess(){
console.log( "要猜的结果是：" + result );

var txtNumber =
document.getElementById("txtNumber").value;

//检查输入的文本，是否是数值
if( isNaN(txtNumber) ){//如果不是一个数值
alert("请输入数值！");
} else {
//判断大小，并提示
var input = parseInt(txtNumber);
if( input>result ){
alert("输入的大了，输入个小点的！");
} else if( input<result ){
alert("输入的小了，输入个大点的！");
} else {
alert("猜对了！亲！");
}
}

}

</script>
</head>
<body>
<h1>猜数字</h1>
猜0~100之间的一个随机整数：
<input type="text" id="txtNumber" size="2" />
<input type="button" value="我猜!"
onclick="guess();"/>
</body>
</html>


流程控制

0,null,”“,undifned,NaN对应的布尔值均为false

一切表示空的值都是false

实例：计算整数的阶乘

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>求阶乘</title>
<script type="text/javascript">
function calc(){
var txtNumber =
document.getElementById("txtNumber").value;

if( isNaN(txtNumber) ){
alert("请输入一个整数");
return;
}

var input = parseInt( txtNumber );
var result = 1;
for( var i=1; i<=input; i++ ){
result *= i;
}

alert( input + "的阶乘是：" + result );
}
</script>
</head>
<body>
<h1>求阶乘</h1>
请输入一个整数：
<input type="text" id="txtNumber" size="2" />
<input type="button" value="求阶乘"
onclick="calc();" />
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  javascript
相关文章推荐
新的分享
章节导航