JavaScript学习笔记(2)
JavaScript通常用于操作HTML
如需从JavaScript访问某个HTML元素,可以使用document.getElementById(id)方法
使用document.getElementById(id)方法的前提是HTML元素设置了id属性
1 操作HTML元素
如:
<!DOCTYPE html>
<html>
<body>
<script>
function test()
{
document.getElementById("nam").value="hehe"; //设置输入框内容
}
</script>
<h1>My First Web Page</h1>
<p id="demo">My First Paragraph.</p>
<script>
document.getElementById("demo").innerHTML="My First JavaScript";
</script>
<input type="text" name="user" id="nam"/>
<button type="button" onclick="test()">OK</button>
</body>
</html>
2 写入到HTML文档中输出
document.write();
如:
<!DOCTYPE html>
<html>
<body>
<script>
document.write("<p>Hello, JavaScript.</p>");
</script>
</body>
</html>
注:请使用 document.write() 仅仅向文档输出写内容。如果在文档已完成加载后执行 document.write,整个 HTML 页面将被覆盖:
JavaScript语句
1 分号
用于分隔JavaScript语句
通常我们在每条可执行的语句结尾添加分号
使用分号结束是可选的
如:
<!DOCTYPE html>
<html>
<body>
<h1>My Web Page</h1>
<p id="demo">A Paragraph.</p>
<div id="myDIV">A DIV.</div>
<button id="button">button</button>
<script>
document.getElementById("demo").innerHTML="Hello World";
document.getElementById("myDIV").innerHTML="How are you?";
document.getElementById("button").innerHTML="haha";
</script>
</body>
</html>
2 代码块
JavaScript语句通过代码块的形式进行组合
块的作用是使语句序列一起执行
如:
<!DOCTYPE html>
<html>
<body>
<p id="myPar">I am a paragraph.</p>
<div id="myDiv">I am a div.</div>
<p>
<button type="button" onclick="myFunction()">点击这里</button>
</p>
<script>
function myFunction()
{
document.getElementById("myPar").innerHTML="Hello World";
document.getElementById("myDiv").innerHTML="How are you?";
}
</script>
<p>当您点击上面的按钮时,两个元素会改变。</p>
</body>
</html>
注:JavaScript 对大小写敏感。
JavaScript 对大小写是敏感的。
当编写 JavaScript 语句时,请留意是否关闭大小写切换键。
函数 getElementById 与 getElementbyID 是不同的。
同样,变量 myVariable 与 MyVariable 也是不同的。
对代码行进行折行
您可以在文本字符串中使用反斜杠对代码行进行换行。下面的例子会正确地显示:
document.write("Hello \ World!");
不过,您不能像这样折行:
document.write \ ("Hello World!");