六、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代码的位置

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>
执行结果
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>
执行结果
<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)
}
执行结果
上一篇 下一篇

猜你喜欢

热点阅读