小兔JS教程(一) -- 环境搭建与JavaScript初探1.开发环境搭建2.JavaScript初探

1.开发环境搭建

本系列教程的开发工具,我们采用HBuilder。

可以去网上下载最新的版本,然后解压一下就能直接用了。学习JavaScript,环境搭建是非常简单的,或者说,只要你有一个浏览器,一个记事本就行了,不存在环境搭建的问题。而且,通过运行浏览器,立刻就能看到效果,这一点比较Java要方便很多。省去了很多繁杂的操作,如果你正打算转行从事程序猿这个职业,不妨以JavaScript为切入点,从而发现编程的乐趣。当你深刻理解了JavaScript的思想,其他任何面向对象的语言都是大同小异的。

2.JavaScript初探

2.1 基本概念

一个网页,一般来说,分为Html,css,还有JavaScript。如果说Html是网页的骨架,那么css就是它的的外衣。JavaScript则是一个网页的能源,就是专门负责让网页动起来的必不可少的因素。

2.2 基础核心

作为一门基于对象的语言,JavaScript也和其他任何一门面向对象的语言一样,有着对象的概念。其实,就我看来,我们很多人在学习的过程中,都情不自禁地把简单的东西复杂化了,总想着去归类,最后把PPT做得很漂亮,理论说起来一套一套的。大纲弄得有模有样,条理清清楚楚,任何教科书,培训基本都是如此。在我看来,没必要搞得这么复杂,一下子弄这么多,我也记不住啊,难道你就非得拿着一本字典跟我一页一页地讲嘛?JavaScript学习,无非都是围绕着对象和属性两个方面来兜圈子罢了。万变不离其宗。

在Javascript中,能点出来的,或者中括号里面的必然是属性(方法)。当然,数组不算在列。

对象调用属性。

对象调用属性。

对象调用属性。

整个Javascript其实翻来覆去都在围绕这个事情做文章。

在今后的学习过程中,我会反复强调这个事情,因为大家的时间都很宝贵,所以我打算把重要的东西反复讲,讲到你理解为止。一遍不行就说两遍,两遍不行说三遍,直到你明白JavaScript其实就是这么回事。

当你能够卸去对新东西的恐惧之后,然后才会逐渐掌握主动权,从而更加深入地学习它。

我很明白,包括当初的我自己也是如此,因为不懂,所以害怕去学,怕受打击。

比如Javascript,看了半天看不懂,网上找的资料也不明白是什么意思,买一本教材吧,看得我都快怀疑人生了,心想怎么这么深奥啊。

后来发现,仅仅是因为我的不自信,不敢跨出第一步!

如果你是初学者,请先从编写很烂的代码开始,不要害怕被嘲笑,先去做,踏出第一步再说!

然后,你会渐渐发现乐趣的,只要你不断地总结,不断地总结,总有一天,你会有一种感觉的。就是一种仿佛什么事情都难不住你的感觉,这并非你自信心膨胀,而是你勇敢踏出了第一步之后,获得的内功积累。

当你真的去做了之后,你就会发现,没那么难,而且你会越学越有乐趣。

2.3 小案例 - 制作一个按钮

代码:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>我的第一个html页面</title>
         
        <style type="text/css">
            .btn {
                height: 30px;
                width: 100px;
                background: #0c093e;
                color:#fff;
                font-family: "微软雅黑";
                border-radius: 5px;
                text-align: center;
                line-height: 30px;
                position: absolute;
                left: 50%;
                margin-left: -50px;
                top: 50%;
                margin-top: -15px;
                cursor: pointer;
                transition: background 1s ease;
            }
             
            .btn:hover{
                background: #251f8c;
            }
        </style>
    </head>
     
    <script type="text/javascript">
     
        /*var person = {
            name : "zhangsan"
        }
     
        person.name = "lisi";
         
        person.name = "wangwu"
         
        alert(person.name);*/
     
     
        window['onload'] = function(){
             
            //alert(1);
            //1. 获取按钮的dom元素
            var btn = document.getElementsByTagName('div')[0];
             
            btn.onclick = function(){
                alert('保存成功!');
            }
             
        }
         
        /*window.onload = function(){
            alert(2);
        }*/
         
        /*
         *  A 1
         *  B 2
         *  C 1,2
         *  D 报错
         * 
         * */
    </script>
     
    <body>
        <div class='btn'>
            保存
        </div>
    </body>
</html>

开发工具包:http://pan.baidu.com/s/1bo6VzbD 视频地址:http://pan.baidu.com/s/1jHUxLPW

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Java学习网

优秀程序员的 18 大法则

优秀程序员的 18 大法则 经过多年的积累,我发现,下面这些基本的指导法则,可以帮助我成为一个更加高效的程序员。 程序设计法则,与设计和工程的原理密切相关。下面...

2565
来自专栏程序人生 阅读快乐

编写高质量代码:改善Java程序的151个建议

在通往“Java技术殿堂”的路上,本书将为你指点迷津!内容全部由Java编码的最佳实践组成,从语法、程序设计和架构、工具和框架、编码风格和编程思想等五大方面对J...

901
来自专栏阮一峰的网络日志

VP8视频格式初探

昨天,Google发布了一个开源项目WebM。 这个项目的目的,是在文件格式方面,为制作和发布互联网视频提供了一个开源的解决方案。 ? WebM采用MKV作为封...

4366
来自专栏C/C++基础

编程语言分类

从1946年世界第一台计算机ENIAC诞生至今,计算机从早期的军事计算领域,已经渗透到人类生产和社会发展的各个领域。从政府机构到企业部门、从军事领域到民用行业、...

9853
来自专栏Crossin的编程教室

input vs raw_input

今天是教师节,祝老师们节日快乐。然后,今早,我居然也收到了祝福。。。暗自窃喜。 把之前有几篇不属于课程系列的文章整理了一下,回复 w 可以看到文章列表。包括罚点...

30511
来自专栏Golang语言社区

GO 开发者对 GO 初学者的建议

注:原文地址为 Advise from Go developers to Go programming newbies 以促进 India 的 go 编程作为 ...

3656
来自专栏北京马哥教育

R、Python、Scala 和 Java,到底该使用哪一种大数据编程语言?

当你找到大数据项目,你首先会怎么做?确定这个项目的问题领域,确定这个项目的基础设施,在往上,确定项目的框架,选择最适合用来处理当前数据的所有内容。这个时候唯一摆...

3915
来自专栏程序员维他命

2017年5月iOS招人心得(附面试题)

在2017年5月中旬,技术老大让我招两个1-2年的iOS开发,把简历的筛选和第一轮技术面试的任务交给了我。于是便自己准备了这套面试题。

1774
来自专栏月牙寂

白话面向智能体编程(Agent Oriented Programmig, AOP)之二

Agent之前-Object世界 在说起Agent之前,俺们还有必要先敬拜一下Agent的前辈Object,因为Agent实际上是由Object“进化”而来...

3195
来自专栏Java社区

微信小游戏入门与实战 刷爆朋友圈教程视频

2453

扫码关注云+社区

领取腾讯云代金券