入门 - 快速尝试

  • 作者：KK

  • 发表日期：2016.2.1

学习本章节前你需要准备以下知识/技能:

  • 掌握HTML+CSS基础,会做一些简单的页面和排版

  • 使用Chrome浏览器,火狐浏览器或者IE9版本以上版本的IE浏览器进行代码练习/学习,如果用QQ浏览器,360浏览器和猎豹浏览器等请看看有没有极速模式,必须使用极速模式

JavaScript又简称为JS,它非常非常出名!学习JS,就等于真正步入了编程的学习生涯

JS可以让网页更加生动有趣,此前学的HTML+CSS都只是能排出一个"安安静静"的网页,但加入JS后这个网页就可以跟用户互动,比如输入信息进行判断,提交信息进行处理等

请新建一个HTML文件(注意编码格式要是UTF-8无BOM的!),再复制下面的网页代码粘贴进去用浏览器查看吧,其中重点是里面有个叫script的标签包住的内容就是JS代码

<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>快速了解JavaScript</title>
<script type="text/javascript">
alert('你好啊!我叫JavaScript');

function aaa(){
	var age = prompt('请输入你的年龄,试下小于18或大于18,还有输入文字试下!').trim();
	age = parseInt(age);
	if(isNaN(age)){
		alert('你输入的东西都不是个年龄数字!');
		return;
	}

	if(age < 5){
		alert('才5岁不到呀!这怎么打电脑哟');
		return;
	}

	var ageResult = document.getElementById('ageResult');
	if(age < 18){
		ageResult.innerHTML = '哦!你还没成年!才' + age + '岁呀';
	}else{
		ageResult.innerHTML = '' + age + '岁呀,你要罩着我哦!'
	}
}
</script>
</head>
<body>
<button type="button" onclick="aaa()">设置年龄</button>
<p style="margin-top:30px; font-size:20px;" id="ageResult"></p>
</body>
</html>

上面你明显能看到很多不是HTML也不是CSS的代码放在script标签里面,运行以上代码后你先是看到一个弹窗跟你打招呼,然后浏览器窗口里显示了一个按钮让你去设置年龄

当你设置的数字小于5时,会说你不会打电脑;当你的数字小于18时会说你未成年,当你的数字大于或等于18的时候会叫你罩着它

这种交互体验显然根据你学习的HTML+CSS知识是做不出来的,因为这需要让网页对你输入的年龄进行"思考"并得出一个结果

而JS(JavaScript)就是可以让网页思考起来,当然不是人工智能那么高级别,但正因为有JS,所以你平时才能使用各种网站的各种网页进行各种业务操作,比如上网购物,下载东西,泡论坛发帖等,都离不开JS代码的帮助!