基础知识
变量
- 申明
var 变量名
var 用来定义变量，这个用法在很多语言里都一样。
- 命名
- 变量名必须使用字母、下划线或 $ 符号开头。
- 由数字、字母、下划线、$ 符号组成。
- 命名需要避免js的关键字和保留字。
- 使用
- 先申明，再赋值
var mychar;
mychar="javascript";
- 注意
- 变量名区分大小写。
if语句
所有语言的if语句都差不多，js也一样。
函数定义
function 函数名()
{
函数内部实现
}
function 是申明函数的关键字。
例：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>函数调用</title>
<script type="text/javascript">
function contxt() //定义函数
{
alert("哈哈，调用函数了!");
}
</script>
</head>
<body>
<form>
<input type="button" value="点击我" onclick="contxt()" />
</form>
</body>
</html>
输出内容
直接输出字符串
document.write("I love JavaScript");
输出字符串变量内容
var mystr="hello world!";
document.write(mystr); //直接写变量名，输出变量存储的内容。
”+“拼接输出
var mystr="hello";
document.write(mystr+"I love JavaScript"); //多项内容之间用+号连接
输出后换行
var mystr="hello";
document.write(mystr+"<br>");//输出hello后，输出一个换行符
alert消息对话框
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>alert</title>
<script type="text/javascript">
function rec(){
var mychar="I love JavaScript";
alert(mychar);
}
</script>
</head>
<body>
<input name="button" type="button" onClick="rec()" value="点击我，弹出对话框" />
</body>
</html>
confirm 消息对话框
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>confirm</title>
<script type="text/javascript">
function rec(){
var mymessage=confirm("你是女士吗？");;
if(mymessage==true)
{
document.write("你是女士!");
}
else
{
document.write("你是男士!");
}
}
</script>
</head>
<body>
<input name="button" type="button" onClick="rec()" value="点击我，弹出确认对话框" />
</body>
</html>
语法
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>confirm</title>
<script type="text/javascript">
function rec(){
var mymessage=confirm("你是女士吗？");;
if(mymessage==true)
{
document.write("你是女士!");
}
else
{
document.write("你是男士!");
}
}
</script>
</head>
<body>
<input name="button" type="button" onClick="rec()" value="点击我，弹出确认对话框" />
</body>
</html>
语法
var isMeal = confirm("您是女士吗？");
confirm()函数会触发一个弹窗，自带确定和取消按钮。这个函数有个bool类型的返回值，点击确定返回true，取消返回false。
prompt消息对话框
语法
prompt(str1,str2);
- str1: 要显示在消息对话框中的文本，不可修改
- str2：文本框中的内容，可以修改
- 点击确定按钮，文本框中的内容将作为函数返回值
- 点击取消按钮，将返回null
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>prompt</title>
<script type="text/javascript">
function rec(){
var score = prompt("请输入您的成绩"); //score变量，用来存储用户输入的成绩值。
if(score>=90)
{
document.write("你很棒!");
}
else if(score>=75)
{
document.write("不错吆!");
}
else if(score>=60)
{
document.write("要加油!");
}
else
{
document.write("要努力了!");
}
}
</script>
</head>
<body>
<input name="button" type="button" onClick="rec()" value="点击我，对成绩做评价!" />
</body>
</html>
打开新窗口
window.open([URL], [窗口名称], [参数字符串])
-
URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。
-
窗口名称：可选参数，被打开窗口的名称。
窗口名称可为"_top"、"_blank"、"_self"
_blank：在新窗口显示目标网页
_self：在当前窗口显示目标网页
_top：框架网页中在上部窗口中显示目标网页 -
参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>window.open</title>
<script type="text/javascript">
function Wopen(){
window.open('http://www.baidu.com','_blank','width=400,height=600,top=100,left=0');
}
</script>
</head>
<body>
<input name="button" type="button" onClick="Wopen()" value="点击我，打开新窗口!" / >
</body>
</html>
参数列表：
关闭窗口
window.close(); //关闭本窗口
<窗口对象>.close(); //关闭指定的窗口
练习
点击按钮，弹窗，选择确定打开新窗口
<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<script type="text/javascript">
function openWindow(){
var open=confirm("是否打开？");
if (open) {
window.open('http://www.baidu.com','_blank','width=400,height=500,menubar=no,toolbar=no');
}
}
</script>
</head>
<body>
<input type="button" value="新窗口打开网站" onclick="openWindow()" />
</body>
</html>