JavaScript(1)
第一次见到JavaScript的时候,看到了熟悉的“Java”,原来都是骗人的,李鬼不是李逵呀=。= 然而发现这个东西还是特别实用的,和Java比起来它简单多了,只是一种轻量级的脚本语言,主要用于HTML和Web。当初那些想尽办法,写了一堆代码完成的功能,只要用了JavaScript都变的非常的简单。
因为好久都没有用过这个东西,所以打算跟着W3SCHOOL再学习一边,以便为今后学习jQuery和Ajax打基础。
1.在HTML页面输出
JS能够直接写入HTML的输出流中,并在页面上输出,但是要注意的是,只能在HTML输出流中使用document.write,如果在文档加载后使用它,它将会覆盖整个文档。
<body> <script type="text/javascript"> document.write("JavaScript是一种脚本语言"); document.write("<br/>"); document.write("它和Java没关系=。="); </script> </body>
2.对事件作出反应
JavaScript能够对事件作出反应,比如点击按钮。
<!DOCTYPE html> <html> <body> <button type="button" onclick="alert('让你点你就点啊?!')">点击这里</button> </body> </html>
3.改变HTML内容
这个功能比较常用,document.getElementByID("some id"),这个方法是在HTML DOM中定义的,DOM是用以访问HTML元素的正式的W3C标准。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>改变HTML中的元素</title> </head> <body> <p id="demo">我在学JavaScript</p> <script type="text/javascript"> function test(){ x = document.getElementById("demo"); //根据id属性找到元素 x.innerHTML = "根本学不会呀!"; //改变元素 } </script> <button type="button" onclick="test()">快点我呀</button> </body> </html>
4.改变HTML的样式
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>改变HTML中的元素</title> </head> <body> <p id="demo">我在学JavaScript</p> <script type="text/javascript"> function test(){ x = document.getElementById("demo"); //根据id属性找到元素 x.style.color = "#ff0000" //改变元素 } </script> <button type="button" onclick="test()">快点我呀</button> </body> </html>
5.验证输入
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>验证输入</title> </head> <body> <p>请输入数字。如果输入值不是数字,会弹出提示框提示“输入错误”。</p> <input id="demo" type="text"><br/> <script type="text/javascript"> function test(){ var x = document.getElementById("demo").value; if(x==""||isNaN(x)){ alert("输入错误!"); } } </script> <button type="button" onclick="test()">快点我呀</button> </body> </html>