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!");

 

posted @ 2015-04-13 11:46  陈良文  阅读(113)  评论(0编辑  收藏  举报