JavaScript高级程序设计学习(一)之介绍

简介: 作为一名web开发人员,日常用的最多的就是js,也就是大名鼎鼎的ECMAScript,又称javascript。再次声明js与java除了语法上相似,没有半毛钱关系。据说之所以叫javascript,是因为过去网景公司花了十天时间开发历史上的第一版js,但当时没有名气,故借用java之名在该script前缀上加上一个java,以提升其知名度。

作为一名web开发人员,日常用的最多的就是js,也就是大名鼎鼎的ECMAScript,又称javascript。再次声明js与java除了语法上相似,没有半毛钱关系。据说之所以叫javascript,是因为过去网景公司花了十天时间开发历史上的第一版js,但当时没有名气,故借用java之名在该script前缀上加上一个java,以提升其知名度。具体的历史或老皇历,百度或者相关官网一大堆,这里不再赘述。

作为一名前后台都攻的软件工程师,虽说平时js足以解决常见的问题和共性问题,但发现总会有这样那样的小错误,有的时候,就是那么一个小错误,调试了3~4小时,浪费了很多时间,最后解决了,却发觉分分钟可以解决的问题,我居然花了这么长时间,觉得太对不起有限的光阴。所以决定好好系统学习下javascript。在我看来,为该书做序的人,说的一句话,挺对的,js上手是非常容易的,要么跟着w3scholl一遍遍敲,记得当初我学习js的时候就是这样,又或者参考廖雪峰的js教程,他们的教程很容易让你熟悉并了解js。

下面是网站:

w3school:  http://www.w3school.com.cn/js/index.asp

廖雪峰教程:https://www.liaoxuefeng.com/wiki/001434446689867b27157e896e74d51a89c25cc8b43bdb3000

不过如果是小白建议还是从w3school入手吧,当然在此也可以看看廖雪峰。我个人是从w3school一遍遍敲,一遍遍运行,一遍遍找博客了解和熟悉。但是博客毕竟是零散的,不够系统。视频了,我个人学习视频一大堆,有好哥们分享的,也有朋友给的。说到视频,如果你是完全的小白,建议可以先看视频再实战,因为视频可以让你了解熟悉,等到有了基本的熟悉,去除了一些陌生感,就是实战吧!

或许有人问,我为什么不看视频学习呢?

第一,我个人有相关经验,可以看懂js和使用js解决项目问题;

第二,作为一名工程师,平时忙于工作,没有很多时间去看视频,视频的时间太长了;

第三,在我看来视频适合小白,完全不懂的,但是作为有相关实战经验的人,没多大必要,当然有些进阶相关的视频还是不错的;

第四,书相对于视频,系统全面,而且,上下班地铁差不多的两个小时,我可以通过手机阅读,至少可以读完一章,这样时间也就充分的利用了;

 

说到js,至今我仍觉得它是一个非常神秘又好用的玩意,它可以做出酷炫的效果,也可以让我前后端分离开发,同时作为一名Java程序员,它的语法对我而言太容易懂了。当然,还是那句话,入手容易,深入难。如今我要打破这个瓶颈。

下面进行系统的讲解:

1.JavaScript由三部分组成

(1)核心(ECMASCRIPT),又称ECMA262,是js的核心;

ECMA由以下部分组成:

a.语法

b.类型

c.关键字

d.语句

e.保留字

f.操作符

g.对象

 

 

(2)浏览器对象模型;

常用的window,location,screen等,

我用的比较多的,还是window和location

window常用的方法

alert()警示框  常用于提示信息

confirm()确认框    通常用于是否删除这样的或是否启用等

propt()输入框  这个用的不多

setInterval()每隔多长时间加载 ,可以调用多次, ajax轮询可以使用它,不过太消耗服务器资源,应用的通常是数据定时更新

setTimeout()每隔多长时间加载 ,一般只加载一次

location.href用的比较多  前后端分离时,不过通过form提交的形式,直接通过window.location.href进入另外一个界面

location.reload用的也比较多 

当然浏览器对象除了上述说的,还有navicator,不过这个我也没用过,开发一段时间,从未用过,看字面意思,似乎有导航的作用 

 

(3)文档对象模型;

文档对象,简单的说对节点进行增,删,改,查。

增加的话,比如遍历数据后,将html元素,通过append方法追加到某个ID选择器或者类选择器中

删除的话,节点删除,比如,上级公司下级部门这样的

修改的话,replace方法替换

查的话,find或push之类的方法

 

这是我个人开发用的比较多的

 

2.html页面如何写js

html写js有三种方式:

(1)外部js 通过<script src="test.js"></script>引入html中,从而可调用该js文件中所有函数,我个人建议,非常强烈建议开发,不论是初学者还是半路出家的,多写外部js少写内部js或者直接在<body></body>中嵌入js,因为这种写法一点都不好,至少我这么认为,写外部js可以将公共部分js抽取复用,而且方便管理修改规范;

运行示例:

test.html

<html>
<head>
<script src="test.js"></script>
</head>
<body>
</body>
</html>

 

test.js

alert("hello js")

 

 

(2)内部js 在<head></head>中嵌入<script></script>

<html>
<head>
<script>
alert("hello js")
</script>
</head>
<body>
</body>
</html>

(3)<body></body>内嵌入js

<html>
<head>
</head>
<body>

<script>
alert("hello js")
</script>
</body>
</html>

 

(1)还是那句话,建议使用,(2)的话,慎用,因为到时对web进行优化时,<head></head>内嵌入大量的js将会导致浏览器加载网页速度变慢,不利于web性能优化

另外js文件放头部和尾部的效果是不一样的,因为头部优先加载,头部通常放置css外部文件,尾部放置js,因为浏览器优先加载头部,由头到尾,由于css优先加载,这样渲染效果也会很快,如果是js文件放置头部的话,会导致css渲染效果变慢从而导致影响用户体验

 

目录
相关文章
|
2月前
|
JavaScript
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
Node.js【GET/POST请求、http模块、路由、创建客户端、作为中间层、文件系统模块】(二)-全面详解(学习总结---从入门到深化)
27 0
|
2月前
|
消息中间件 Web App开发 JavaScript
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
Node.js【简介、安装、运行 Node.js 脚本、事件循环、ES6 作业队列、Buffer(缓冲区)、Stream(流)】(一)-全面详解(学习总结---从入门到深化)
70 0
|
4天前
|
JavaScript 前端开发 应用服务中间件
node.js之第一天学习
node.js之第一天学习
|
1月前
|
运维 JavaScript 前端开发
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
|
1月前
|
前端开发 搜索推荐 JavaScript
编程笔记 html5&css&js 001 学习编程从网页开始
编程笔记 html5&css&js 001 学习编程从网页开始
|
2月前
|
前端开发 JavaScript
从零开始学习前端开发:HTML、CSS、JavaScript入门指南
【2月更文挑战第1天】本文将带领读者从零开始学习前端开发,介绍HTML、CSS和JavaScript的基础知识与应用,帮助读者快速入门前端开发领域。
64 1
|
2月前
|
数据采集 机器学习/深度学习 JavaScript
画【Python折线图】的一百个学习报告(二、pyecharts引入js文件)
画【Python折线图】的一百个学习报告(二、pyecharts引入js文件)
51 0
|
2月前
|
JSON 前端开发 JavaScript
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)
35 0
Webpack【Webpack图片处理、Webpack中proxy代理 、自动清理dist、Webpack优化、JavaScript中的代码检查】(三)-全面详解(学习总结---从入门到深化)
|
2月前
|
资源调度 JavaScript 关系型数据库
Node.js【文件系统模块、路径模块 、连接 MySQL、nodemon、操作 MySQL】(三)-全面详解(学习总结---从入门到深化)
Node.js【文件系统模块、路径模块 、连接 MySQL、nodemon、操作 MySQL】(三)-全面详解(学习总结---从入门到深化)
33 0
|
2月前
|
JavaScript 中间件 测试技术