Javascript简介
Javascript是最流行的脚本语言,它被设计为向HTML增加交互性,在我目前的学习中,它有两个方面的运用,一个是为网页增加各种特效,另一个是与Ajax配合完成数据交互。
在网页中添加Javascript片段
添加Javascript片段的格式如下:
<script type="text/javascript">
xxxxxxx
</script>
那些老旧的实例可能会在 <script> 标签中使用 type="text/javascript"。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。
一共有三种方式在网页中添加Javascript代码:
<head>中的Javascript函数:
<head>
<script>
alert("我的第一个 JavaScript");
</script>
</head>
<!--这里的语句还不是函数,在Javascript中写的函数要在HTML标签中调用-->
<body>中的Javascript:
<body>
<h1>我的 Web 页面</h1>
<button type="button" onclick="myFunction()">尝试一下</button>
<script>
function myFunction()
{
document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</body>
<!--这个函数是一个鼠标点击事件,无需知道函数的意思,只要明白调用方法即可-->
外部的Javascript文件(这是在大型的开发中最常用的方式,在独立的文件中编写需要的函数,再在HTML代码中引入js文件,这样可以随时反复调用,还便于维护):
<!--HTML代码,这里只需记住格式,不用明白函数意思,后面会讲-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登录界面</title>
<script src="../js/login.js"><!--这里用src引入login.js即js文件相对于当前文件的路径(相对路径),“..”指的是文件路径向上一级-->
</script>
</head>
<body>
<div class="div1">
<form action="Defaut.html" name="login" method="post" onsubmit="return check()"><!--这里调用check()函数-->
请输入学号
<input type="text" style="width: 150px;height: 20px" id="id">
<input type="submit" value="登录" style="width: 50px;height: 27px">
</form>
</div>
</body>
</html>
<!--文件名后缀为js的代码-->
<!--js文件中不能出现script标签,只需编写函数-->
function check() {
var id = document.getElementById("id").value;
var idInt = parseInt(id);
var idString = idInt.toString();
if (idString.length == 9 && idString.slice(0,4) == "2017"){
alert('账号正确');
return true;
}
else {
alert('账号错误');
return false;
}
}
JS的基础语法:
和其他的编程语言一样,JS里面的量有变量和常量,常量也有字符型,数字,数组等,整型也可以用科学计数法表示,字符型也要加双引号等,这里按下不表。JS中无论定义数字还是字符变量,皆用 var 定义,使用 function 来定义函数,这里后面会详细讲解,除此之外,JS的数值运算符和逻辑运算符与其他的语言相同。
<script>
var a;
a = 1;
a = "hfsk";
a = [1,2,3,4,5];
document.write(a[1]);//数组元素的调用同样是用下标调用,另外在JS里面双斜扛打注释
</script>
一些基本输出数据的方法(Javascript没有输出函数,以不同的方式输出数据):
window.alert() (弹出警告框):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>web页面</h1>
<p>我的第一个Javascript</p>
<script>
window.alert("欢迎");
</script>
</body>
</html>
document.getElementById().innerHTML获取标签中的内容:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>Web页面</h1>
<p id="demo">我的第一个Javascript</p>
<script>
document.getElementById("demo").innerHTML = "内容已修改。"; <!--document.getElementById("demo")是获取id为demo的标签中的内容,然后进行修改-->
<!--
var a=document.getElementById("demo").innerHTML;
window.alert(a); 与前一个方法结合,这里弹出的是“我的第一个Javascript”
-->
</script>
</body>
</html>
document.write() 写入内容:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1>Web页面</h1>
<p id="demo">我的第一个Javascript</p>
<script>
document.write("欢迎"); <!--将“欢迎”写入HTML文档中-->
</script>
</body>
</html>
值得注意的是,如果该语句在页面加载后执行,则原有的内容将会被函数中的内容覆盖。例如将该语句写成一个鼠标点击事件的函数,那么在加载玩页面点击特定位置后执行该语句,就会产生覆盖。