JS学习（1）----innerHTML

来源：互联网发布：淘宝男士挎包单肩包编辑：程序博客网时间：2024/06/05 06:59

（一）javascript和html联系起来

（1）可以直接将Javascript写在html中
（2）一般采用

<script src="aa.js"></script>

将js独立为一个文件，上面这行代码可以放在head中或者是body中。

（二）用js打印数据的4中方法

（1）innerHTML

<!--index.html--><!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8"></head><body>    <h1>This is a heading.</h1>    <p id="test">Test</p>    <script src="script.js"></script></body></html>

// script.jsdocument.getElementById('test').innerHTML=9+8;

注意：在html中将script放在body的最后面是因为没有用到函数调用，而代码的加载是顺序执行的，如果将script放在p的前面，会出现下面的错误提醒：
这里写图片描述

（2）document.write()

注：document.write()用于打印调试比较方便。
直接将上面代码的js内容改为:

document.write("Hello World!");

显示的结果为：
这里写图片描述
注：如果是在html完全加载之后使用document.write(),则会清空html所有的内容，然后显示document.write()的内容，如下面的例子：

<!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8"></head><body>    <h1>This is a heading.</h1>    <p id="test">Test</p>    <button onclick="document.write('Hello World!')">Try it</button></body></html>

（3）console.log()

console.log也是用于调试的一种有效方法。
F12，重新运行即可看到要显示的内容在console中打印输出。

//  script.jsconsole.log("Hello World!");

这里写图片描述

（4）window.alert()

注：window.alert()主要用于提醒，也可以用于调试。

//  script.jswindow.alert("Welcome");

显示的结果为：
这里写图片描述

（三）js的语法

（1）js是大小写敏感的

不能够将var写成Var或者是VAR

（2）js中的变量

例子：

<!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8"></head><body>    <h1>This is a heading.</h1>    <p id="test">Test</p>    <script src="script.js"></script></body></html>

script.js

document.getElementById("test").innerHTML = "Joe" + 2 + "Tim";

显示的效果为:
这里写图片描述

（3）注释

html的注释用<!--  -->css的注释用/**/js的注释用//或者是/**/

（4）js中变量的使用

//  script.jsvar x, y,z;x = 1;y = 2;z = x + y;document.getElementById("test").innerHTML = "Hello"+z;//  显示的结果为: Hello3

（5）良好的编程习惯

在运算符号比如(+、-、*、/、=等)的两侧加上空格。

（四）函数

函数使得js的代码以block的形式组织起来。
要注意编程风格，每一个函数的行数不要过多。

<!DOCTYPE html><html lang="en"><head>    <meta charset="utf-8">    <script src="script.js"></script></head><body>    <p id="demo">this is a test.</p>    <p id="test">click the button to see what happens.</p>    <button onclick="myfunction()">Click here</button></body></html>

/* * @Author: Lin* @Date:   2017-07-16 18:20:18* @Last Modified by:   Lin* @Last Modified time: 2017-07-16 18:23:50*/function myfunction() {    document.getElementById("demo").innerHTML="change happens here";    document.getElementById("test").innerHTML="change also happens here";}

显示的结果为：
这里写图片描述

阅读全文

0 0