六、JavaScript--1、概述及取网页中元素DOM示例
2018-05-29 本文已影响0人
cybeyond
1.javascript是什么
javascript是一门计算机语言,又称为java脚本,但和java没有关系,简称js
javascript是一种脚本语言,类似的语言如VBscript,又称为VB脚本(用的较少,只有IE能识别)。
主要作用是放在网页上,增强网页的效果,让网页的功能变得强大,实际中,使用js做一些客户端的数据验证工作。
2.javascript语法
和java和c的语法很像,但是一种弱类型语言
3.js代码的位置
-
写在网页中
-
存在于单独的js文件中
4、一个简单示例
html三种按钮:前两个按钮需要写在表单中才有意义,最后一个可以写在非表单中
(1)提交按钮 type="submit"
(2)重置按钮 type="reset"
(3)普通按钮 type="button"
事件event:发生了一件事情,以及发生了事情后的处理办法
onlick点击事件(处理办法),事件处理函数 click=点击
- 写在网页中
<html>
<head>
<title>这是一个测试网页</title>
</head>
<body>
<form>
请输入姓名:<input type="text"/>
</br>
<input type="button" value="问候" onclick="alert('你好');" />
</form>
</body>
</html>

- 存在于函数中调用
<html>
<head>
<title>这是一个测试网页</title>
<script>
function sayHello(){
alert ('你好啊');
}
</script>
</head>
<body>
<form>
请输入姓名:<input type="text"/>
</br>
<input type="button" value="问候" onclick="sayHello()" />
</form>
</body>
</html>

- 存在于单独的js文件中
在html目录下,创建一个myjs.js文件
function sayHello(){
alert('你好吗?');
}
html代码:
<html>
<head>
<title>这是一个测试网页</title>
<script type="text/javascript" src="myjs.js"></script>
</head>
<body>
<form>
请输入姓名:<input type="text"/>
</br>
<input type="button" value="问候" onclick="sayHello()" />
</form>
</body>
</html>

- javascript操作网页上的元素,也称为文档对象元素,即DOM
比如:在有表单时,在输入名字框中,点击后出现“xxx,你很好吧?”
<html>
<head>
<title>这是一个测试网页</title>
<script type="text/javascript" src="myjs.js"></script>
</head>
<body>
<form>
请输入姓名:<input type="text" name="xm"/>
</br>
<input type="button" value="问候" onclick="sayHello()" />
</form>
</body>
</html>
function sayHello(){
alert('你很好吧?'+document.forms[0].xm.value);
}

在没有表单时,如何去找元素?通过document.getElementsByName和document.getElementById
<html>
<head>
<title>这是一个测试网页</title>
<script type="text/javascript" src="myjs.js"></script>
</head>
<body>
请输入姓名:<input type="text" name="xm"/>
</br>
<input type="button" value="问候" onclick="sayHello()" />
</body>
</html>
function sayHello(){
// alert('你很好吧?'+document.forms[0].xm.value);//取表单元素数组中第一个,即0的元素
alert('你是否真的很好?'+document.getElementsByName("xm")[0].value) //从多个名字中找到第一个xm
}

<html>
<head>
<title>这是一个测试网页</title>
<script type="text/javascript" src="myjs.js"></script>
</head>
<body>
请输入姓名:<input type="text" id="xm"/>
</br>
<input type="button" value="问候" onclick="sayHello()" />
</body>
</html>
function sayHello(){
// alert('你很好吧?'+document.forms[0].xm.value);//取表单元素数组中第一个,即0的元素
//alert('你是否真的很好?'+document.getElementsByName("xm")[0].value) //从多个名字中找到第一个xm
alert('我也很好,'+document.getElementById("xm").value)
}
