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

目录
相关文章
|
27天前
|
存储 自然语言处理 前端开发
抖音快手小红书虚拟评论截图生成器,模拟对话制作工具,html+js+css
这是一款纯前端实现的多平台虚拟评论生成器,支持抖音、快手、小红书风格,适用于产品演示与UI设计。采用Vanilla JS与Flexbox布局,利用IndexedDB存储数据,CSS Variables切换主题。
|
27天前
|
存储 前端开发 安全
病历单生成器在线制作,病历单生成器app,HTML+CSS+JS恶搞工具
本项目为医疗病历模拟生成器,旨在为医学教学和软件开发测试提供数据支持,严格遵守《医疗机构病历管理规定》。
|
27天前
|
存储 前端开发 JavaScript
仿真银行app下载安装, 银行卡虚拟余额制作app,用html+css+js实现逼真娱乐工具
这是一个简单的银行账户模拟器项目,用于学习前端开发基础。用户可进行存款、取款操作,所有数据存储于浏览器内存中
|
2月前
|
资源调度 JavaScript 前端开发
Day.js极简轻易快速2kB的JavaScript库-替代Moment.js
dayjs是一个极简快速2kB的JavaScript库,可以为浏览器处理解析、验证、操作和显示日期和时间,它的设计目标是提供一个简单、快速且功能强大的日期处理工具,同时保持极小的体积(仅 2KB 左右)。
180 24
|
2月前
|
人工智能 监控 前端开发
基于 Next.js 的书法字体生成工具架构设计与 SSR 优化实践
本项目是一款书法字体生成工具,采用 Next.js 14(App Router)与 Tailwind CSS 构建前端,阿里云 Serverless 部署后端。通过混合渲染策略(SSG/SSR/CSR)、Web Worker 异步计算及 CDN 字体分片加载优化性能。服务端借助阿里云函数计算处理计算密集型任务,将平均耗时从 1200ms 降至 280ms,支持 1000+ QPS。动态路由与 ARMS 监控提升工程化水平,未来计划引入 WebGPU 和 AI 字体风格迁移技术,进一步优化用户体验。
|
4月前
|
JavaScript 前端开发 算法
JavaScript 中通过Array.sort() 实现多字段排序、排序稳定性、随机排序洗牌算法、优化排序性能,JS中排序算法的使用详解(附实际应用代码)
Array.sort() 是一个功能强大的方法,通过自定义的比较函数,可以处理各种复杂的排序逻辑。无论是简单的数字排序,还是多字段、嵌套对象、分组排序等高级应用,Array.sort() 都能胜任。同时,通过性能优化技巧(如映射排序)和结合其他数组方法(如 reduce),Array.sort() 可以用来实现高效的数据处理逻辑。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
4月前
|
数据采集 JavaScript 前端开发
JavaScript中通过array.filter()实现数组的数据筛选、数据清洗和链式调用,JS中数组过滤器的使用详解(附实际应用代码)
用array.filter()来实现数据筛选、数据清洗和链式调用,相对于for循环更加清晰,语义化强,能显著提升代码的可读性和可维护性。博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
JavaScript 前端开发
56个JavaScript 实用工具函数(下)
56个JavaScript 实用工具函数
168 0
|
JavaScript 前端开发 网络协议
56个JavaScript 实用工具函数(中)
56个JavaScript 实用工具函数
208 0
|
存储 JavaScript 前端开发
56个JavaScript 实用工具函数(上)
56个JavaScript 实用工具函数
141 0

热门文章

最新文章