从零开始学_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>标签)即可。

目录
相关文章
|
4月前
|
JavaScript 前端开发 内存技术
js文件的入口代码及需要入口代码的原因
js文件的入口代码及需要入口代码的原因
63 0
|
1月前
|
JavaScript 前端开发 API
Next.js 实战 (六):如何实现文件本地上传
这篇文章介绍了在Next.js中如何实现文件上传到本地的方法。文章首先提到Next.js官方文档中没有提供文件上传的实例代码,因此开发者需要自行实现,通常有两种思路:使用Node.js原生上传或使用第三方插件如multer。接着,文章选择了使用Node.js原生上传的方式来讲解实现过程,包括如何通过哈希值命名文件、上传到指定目录以及如何分类文件夹。然后,文章展示了具体的实现步骤,包括编写代码来处理文件上传,并给出了代码示例。最后,文章通过一个效果演示说明了如何通过postman模拟上传文件,并展示了上传后的文件夹结构。
|
3月前
|
缓存 前端开发 JavaScript
JavaScript加载优化
JavaScript加载优化
|
3月前
|
缓存 前端开发 JavaScript
优化CSS和JavaScript加载
优化CSS和JavaScript加载
|
3月前
|
缓存 前端开发 JavaScript
优化CSS和JavaScript加载
Next.js和Nuxt.js在优化CSS和JavaScript加载方面提供了多种策略和工具。Next.js通过代码拆分、图片优化和特定的CSS/JavaScript优化措施提升性能;Nuxt.js则通过代码分割、懒加载、预渲染静态页面、Webpack配置和服务端缓存来实现优化。两者均能有效提高应用性能。
|
4月前
|
JavaScript 前端开发 应用服务中间件
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
vue前端开发中,通过vue.config.js配置和nginx配置,实现多个入口文件的实现方法
270 0
|
JavaScript 前端开发
JavaScript 输出和对话框
JavaScript 输出和对话框
222 0
JavaScript 输出和对话框
|
3月前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
49 1
JavaScript中的原型 保姆级文章一文搞懂
|
7月前
|
JavaScript Java 测试技术
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
基于springboot+vue.js+uniapp的客户关系管理系统附带文章源码部署视频讲解等
138 2
|
3月前
JS+CSS3文章内容背景黑白切换源码
JS+CSS3文章内容背景黑白切换源码是一款基于JS+CSS3制作的简单网页文章文字内容背景颜色黑白切换效果。
33 0

热门文章

最新文章