从零开始学_JavaScript_系列(一)初步概念、工具选择、简单内容输出、加载js文件-阿里云开发者社区

开发者社区> 开发与运维> 正文
登录阅读全文

从零开始学_JavaScript_系列(一)初步概念、工具选择、简单内容输出、加载js文件

简介:

1)适用:

HTMLweb,可广泛用于服务器,PC,笔记本电脑,平板电脑和手机。

是所有现代浏览器和HTML5的默认脚本语言。

实际写的时候是跟HTML写一起,或者通过HTML来调用的。

 

 

2)本质:

脚本语言。

①轻量级编程语言;

②可插入HTML页面的编程代码;

③插入HTML页面后,可由所有的现代浏览器执行;

④易学。

 

 

 

3<script></script>标签

HTML的脚本必须位于<script></script>之中。

在这里,就是指JavaScript脚本必须位于<script></script>之中。

即:

<script>

JS脚本

</script>

 

 

 

4JavaScript的作用

①写入HTML用于输出(例如输出一行文字);

②对事件作出反应(例如点击按钮后有变化);

③其他(略)。

 

 

 

5)如何使用

创建一个文本文档,然后后缀改为html,用记事本打开,然后就可以往里面写东西了。

写出来的是网页(html),以网页形式展现输出结果。

也可以使用微软的FrontPage2003软件,特点是代码加亮、所写即所见等,但缺点貌似是加载其他js文件时无法显示加载的内容。

也可以使用VS(我的VS2015可以),会代码加亮、自动缩进等,不过经常会有警告性报错,而且查看效果的话需要通过浏览器。

或者使用其他html编辑工具。

 

 

6)标签

成对出现的<>(共2组)就是标签。

<p>文本</p>就是一组标签。

标签可以加id,如<p id="abc">文本</p>id用于之后寻找其使用。

寻找id使用getElementById("abc")这样的办法。

然后在这样的命令后面加对应的东西,如innerHTML(文本替换),value(得到值)。

<p id="abc">abc</p>

<button type="button" onclick="run()">点击</button>

<script>

function run()
{
document.getElementById("abc").innerHTML="ppp";

}

</script>

像这样的代码,在执行时,用ppp文本替换abc文本。

7)具体解释:

第一行是输出文字abc,然后给他一个id(用来找她)。

第二行是输出一个按钮(button),按钮上面的文字是点击。

第三行到最后</script>js脚本。这个脚本里面包含了一个函数(function);

函数的效果是,在标签idabc的地方(通过getElementById获得),用文本ppp替换之。

 

8)输出时间:

<p id="time"></p>

<script>

var nowtime=new Date(); //获得时间

localtime=nowtime.toString(); //将时间转为字符串

document.getElementById("time").innerHTML=localtime; //idtime的地方输出时间,注意,time需要在这行之前才可以

</script>

 

输出效果:

Sun Mar 27 2016 00:26:32 GMT+0800 (中国标准时间)

 

9)关于时间的其他函数:

hour=nowtime.getHours(); //将小时赋给hour

min=nowtime.getMinutes(); //分钟

second=nowtime.getSeconds(); //

day=nowtime.getDate(); //

mon=nowtime.getMonth(); //

year=nowtime.getFullYear(); //

datashow=year+""+mon+""+day+""+hour+""+min+""+second+"";

document.getElementById("time").innerHTML=datashow; //idtime的地方输出时间,注意,time需要在这行之前才可以

 

输出效果:

201622703827

 

 

10)导入一个js文件

使用

<script src="time.js"> //读取time.js这个JavaScript文件内容

</script>

然后可以将之前的关于timejs命令,放入time.js文件内(无需加上<script>标签)即可。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享: