JavaScript
简介
略
从一个最简单的helloWorld开始
直接上代码:
<!DOCTYPE html>
<html>
<head>
<script>
document.write("<p>JS的HelloWorld</p>");
</script>
</head>
<body>
<p>普通的HelloWorld</p>
</body>
</html>
JS属于一种脚本语言,它可以直接插入到HTML页面中,从上面的例子也可以看出,JS可以利用在script标签中使用document.write来直接对前段页面进行修改。那是不是我们就可以利用JS对前端页面进行动态的修改了呢?下面这个例子就是在页面中动态的打印出HelloWorld:
<!DOCTYPE html>
<html>
<body>
<script>
function myFunction()
{
document.write("<p>HelloWorld</p>");
}
</script>
<button type="button" onclick="myFunction()">点击</button>
</body>
</html>
如果你运行一下上面这个例子,就可以发现你在点击完按钮之后,页面会显示出HelloWorld。
button标签中的onclick是button的一个属性,他可以指定点击按钮之后的操作。这里是直接对myFunction()这个方法进行调用。
但是这又有一个问题,点击完按钮之后,按钮不见了。这是因为document.write在页面加载完之后的调用会覆盖掉整个页面,那么我们该如何既能保持原来的页面不变,而仅仅增加一句HelloWorld呢?看一下下面的例子:
<!DOCTYPE html>
<html>
<body>
<button type="button" onclick="myFunction()">点击</button>
<p id="text"></p>
<script>
function myFunction()
{
x=document.getElementById("text");
x.innerHTML=x.innerHTML+"HelloWorld<br/>";
}
</script>
</body>
</html>
现在的界面,如果你点击按钮,按钮不会消失,在按钮下面会出现HelloWorld的字样,而且如果继续点击,会出现多行的HelloWorld。
我们来看一下代码,首先在body标签中,我们定义了一个绑定onclick事件为调用myFunction()的按钮,和一个没有内容的但是id为”text”的段落。
重点在我们的script中,这次我们的myFunction()中出现了一个x,这与Java不同的是我们并没有对x的类型进行指定,而且也没有声明初始化,而是直接拿来用于赋值的。
再来介绍一下document.getElementById这个函数,document.getElementById这个函数可以返回对拥有指定 ID 的第一个对象的引用,也就是取得页面中的一个对象。在取得这个对象的引用之后,我们就可以对对象的内容进行修改,从而达到对前端页面的修改。
x.innerHTML就是ID为”text”的对象的一个属性,这个属性是对象标签中的HTML内容。用这个,我们就可以对这个对象进行任意的修改。
以上是对JavaScript最最基础的介绍,也是JavaScript很多实现方法的基本。