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

(1)适用:

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

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

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

 

 

(2)本质:

脚本语言。

①轻量级编程语言;

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

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

④易学。

 

 

 

(3)<script>与</script>标签

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

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

即:

<script>

JS脚本

</script>

 

 

 

(4)JavaScript的作用

①写入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);

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

 

(8)输出时间:

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

<script>

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

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

document.getElementById("time").innerHTML=localtime; //在id为time的地方输出时间,注意,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; //在id为time的地方输出时间,注意,time需要在这行之前才可以

 

输出效果:

2016年2月27日0时38分27秒

 

 

(10)导入一个js文件

使用

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

</script>

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

时间: 2024-09-10 06:09:41

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

从零开始学_JavaScript_系列(八)——js系列&amp;lt;2&amp;gt;(事件触发顺序、文本读取、js编写ajax、输入验证、下拉菜单)

(20)事件触发的顺序 假如文档中有多个脚本(例如自动执行的脚本),那么他们执行是有一定的顺序的(在HTML文档之中): ①先执行<head>内的<script>标签.因此,这里的js脚本通常是嵌入代码.指向JS文件,可以在这里定义其后要使用的函数: ②其次是执行<body>内的script标签: ③然后是执行触发的脚本内容,例如在button按钮上添加的onclick=""命令,就是在点击后触发的. (21)文档对象模型(DOM) 文档对象模型(D

从零开始学_JavaScript_系列(二)——弹框及读取、条件判断、事件处理、注释、图片、超链和div

(11)导入js文件的潜在问题 假如有一个 <script src="111.js"> js脚本1 </script> 那么,由于导入了111.js的原因,"js脚本1"事实上是不会被执行的. 准确的说,包含导入js脚本功能的script标签,里面的脚本都不会执行(不能保证全部,但目前学到的都不会被执行,如果有可以执行的,其后会在这里修改说明).   (12)补充说明适应人群 至少要有一点的编程概念,毫无编程概念的话,恐怕是有一些难度的. 由

从零开始学_JavaScript_系列(七)——jquery(复选框及互斥、div块、修改css、标签数组、ajax连续加载)

(17)查看复选框是否被选中 复选框为: <input type="checkbox" name="yingmingliu"id="yingmingliu" value="yingmingliu"/> jq语法为: $("#yingmingliu").is(':checked') 如果选中,返回true,如果没有被选中,返回false.   查看复选框的值: $("#yingmingl

从零开始学_JavaScript_系列(十)——dojo(3)(GRID表格创建、样式、列宽可变、排序、过滤器)

如果没有接触过dojo,建议阅读: http://blog.csdn.net/qq20004604/article/details/51028702 里面介绍了如何加载dojo.(当然,本篇也考虑了未使用过dojo的人,可以只阅读该链接关于dojo下载的部分,以获得dojo) 关于dojo的下载,请查看: https://dojotoolkit.org/download/ 建议下载FULL SOURCE版 如果需要讨论,请评论.或者站内信,我会尽快回复. (34)gridx gridx系列插件并

从零开始学_JavaScript_系列(17)——CSS&amp;lt;4&amp;gt;(定位、遮罩、float、弹性布局flex)

部分可能不兼容低版本浏览器(比如IE) 部分图片来自网易云课堂,侵.私信.删   (60)定位 ①position   ②值: static:默认,无定位   relative:相对定位,仍在文档流之中(其他的元素不变),参照物相对于原来的位置进行定位.会压在其他的元素上面.作用是为绝对定位元素提供参照物.   absolute:绝对定位,脱离文档流(后续元素会在绝对定位元素的前序元素的后面),默认宽度是内容宽度,参照物是第一个定位的祖先/根元素(根元素是html元素),如果祖先没有定位元素,那

从零开始学_JavaScript_系列(九)——dojo(2)(AJAX、时间控件、鼠标事件、样式修改、事件移除、消息发布订阅)

如果没有接触过dojo,建议阅读: http://blog.csdn.net/qq20004604/article/details/51028702 里面介绍了如何加载dojo. 关于dojo的下载,请查看: https://dojotoolkit.org/download/ 建议下载FULL SOURCE版 如果需要讨论,请评论.或者站内信,我会尽快回复. (21)和(22)写的不好,跳过. (23)AJAX异步加载 插件:dojo/request 参数:request 语法(get): re

从零开始学_JavaScript_系列(五)——dojo(基础,动画移动,重力模拟,动画合并,添加标签)

关于dojo的下载,请查看: https://dojotoolkit.org/download/ 建议下载FULL SOURCE版 如果需要讨论,请评论.或者站内信,我会尽快回复.   (1)加载 ①首先,先设置   <script>      //替代使用data-dojo-config,我们创建一个dojoConfig对象(是个设置)在我们调用dojo.js之前,他们功能相同      //这比通过一大堆设置来说,更易阅读         var dojoConfig = {       

从零开始学_JavaScript_系列(15)——js系列&amp;lt;3&amp;gt;(转为字符串,截取字符串)

(29)把json转化为字符串 JSON.stringify(store) 即可(注意JSON要大写),store是json对象     (30)对一个数组赋值 ①假如我们有一个不定长度的数组abc ②我们想要将该数组逐值赋给另一个数组def: ③因此,机智的我们想到了使用for循环: for(var i = 0; i < abc.length; i++) {        def[i] = abc[i]; } ④然而,这样是无法赋值的(原因在于def之前未定义,因此不能直接把他当做一个数组):

从零开始学_JavaScript_系列(17)——dojo(6)(声明一个类declare)

(71)声明一个类declare 作用: 封装一个类,然后可以通过调用这个类,来调用其类方法.   优点: ①可以继承其他类的类方法:   ②假如我们需要使用一个类的类方法,而这个类依赖于5个插件.如果正常调用的话,我们需要在每个使用这个类的js文件里,调用这5个插件.当我们使用封装时,我们只需要调用这个类即可.而调用这个类的方法很简单.   ③可以使得代码模块化,按需加载.例如,我有封装好的A类B类C类,起初我用的是A类(假设A类依赖于20个插件),然后我可能弃用A类改用B类(B类使用与A类不