[学习笔记]JavaScript[0]-入门
2017-03-26 18:56
459 查看
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很多实现方法的基本。
相关文章推荐
- JavaScript学习笔记 1-入门
- Javascript:Javascript教程,javascript入门,学习笔记
- JavaScript入门学习笔记
- 整理Javascript基础入门学习笔记
- 零基础入门-javaScript学习笔记之从基本数据类型学起
- JavaScript学习笔记之JS基础入门
- java 从零开始,学习笔记之基础入门<javascript>(三十)
- 整理Javascript基础入门学习笔记
- 20150727 JavaScript入门学习笔记
- javaScript学习笔记---入门
- JavaScript学习笔记[1]---入门
- JavaScript 简单入门学习笔记(二)
- JavaScript 简单入门学习笔记(四)
- JavaScript入门学习笔记(最后的代码)
- JavaScript学习笔记8-jQuery入门介绍、css选择器复习
- JavaScript入门学习笔记
- JavaScript入门学习笔记(三)
- Javascript教程,javascript入门,学习笔记,Javascript Tutorials
- javascript入门学习笔记
- JavaScript的MVVM库Vue.js入门学习笔记