day one
JavaScript简介
JavaScript是一个脚本语言,这门语言可用于 HTML 和 web,
更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
一个网页包含三个部分:结构,行为,样式;
结构:HTML
样式:css
行为:JavaScript
JavaScript的输出语句:
window.alert();
//弹出警告框;
console.log();
//写入到浏览器的控制台
innerHTML();
//写入到HTML元素中
document.write();
//写入到HTML文档中
实例
- 弹出警告框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>警告框</title>
</head>
<body>
<h1>我的第一个页面</h1>
<p>我的第一个段落。</p>
<script>
window.alert("I love you !");
</script>
</body>
</html>
- 写入到浏览器控制台
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>控制台显示</title>
</head>
<body>
<h1>我的第一个 Web 页面</h1>
<p>
浏览器中(Chrome, IE, Firefox) 使用 F12 来启用调试模式, 在调试窗口中点击 "Console" 菜单。
</p>
<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>
</body>
</html>
- 写入到HTML元素中
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>写入HTML元素</title>
</head>
<body>
<h1>我的第一个 Web 页面</h1>
<p id="demo">我的第一个段落。</p>
<script>
document.getElementById("demo").innerHTML="段落已修改。";
</script>
</body>
</html>
- 写入HTML文档
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>写入文档</title>
</head>
<body>
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<script>
document.write(Date());
</script>
</body>
</html>
注意:请使用 document.write() 仅仅向文档输出写内容。
如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖
eg:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction()
{
document.write(Date());
}
</script>
</body>
</html>
JavaScript输入语句
JS提供了两种输入方法prompt()和confirm(),接下来就对他们进行学习;
1、prompt()方法
弹出一个允许输入值得对话框,带有确认和取消两个按钮,并允许设置默认值
语法格式:
prompt(msg,defaultText)
// msg:要显示的文本信息;
//defaultText:输入框的默认值;
实例:
<script type="text/javascript">
var score = parseInt(window.prompt('input',100));
if(score > 90 && score <= 100){
document.writeln("greet");
}else if(score>80 && score<=90){
documetn.writeln("good");
}else if(score >70 && score <= 80){
document.write("normal");
}else {
document.write('bad');
}
</script>
2、confirm()方法
弹出一个确认消息对话框,有确定和取消两个按钮,点击确定就返回true,点击取消就返回false。
弹出一个对话框,显示已经编辑好的内容,并带有确定和取消两个按钮,点击确定返回true,点击取消返回false;
语法格式:
confirm(message); //message为想要显示的内容
实例:
<body>
<script type="text/javascript">
function clickbut(){
var cond = window.confirm("you love me");
if (cond) {
alert("I love you too");
} else {
var cond3 = window.confirm("are you sure?");
if (cond3) {
alert("broken heart");
} else {
alert("I will be waiting for you all the time");
}
}
}
</script>
<button onclick="clickbut()">hello</button>
</body>