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

JavaScript学习（一） —— 环境搭建与JavaScript初探的更多相关文章

  1. hive_学习_01_hive环境搭建(单机)

    一.前言 本文承接上一篇:hbase_学习_01_HBase环境搭建(单机),主要是搭建 hive 的单机环境 二.环境准备 1.说明 hive 的下载来源有: 官方版本:http://archive ...

  2. hbase_学习_01_HBase环境搭建(单机)

    一.前言 本文承接上一篇:hadoop_学习_02_Hadoop环境搭建(单机)  ,主要是搭建HBase的单机环境 二.环境准备 1.说明 hbase 的下载来源有: 官方版本:http://arc ...

  3. hadoop_学习_02_Hadoop环境搭建(单机)

    一.环境准备 1.说明 hadoop的下载来源有: 官方版本:http://archive.apache.org/dist/hadoop/ CDH版本:http://archive.cloudera. ...

  4. 从0开始学爬虫9之requests库的学习之环境搭建

    从0开始学爬虫9之requests库的学习之环境搭建 Requests库的环境搭建 环境:python2.7.9版本 参考文档:http://2.python-requests.org/zh_CN/l ...

  5. Ubuntu16.04深度学习基本环境搭建，tensorflow , keras , pytorch , cuda

    Ubuntu16.04深度学习基本环境搭建,tensorflow , keras , pytorch , cuda Ubuntu16.04安装 参考https://blog.csdn.net/flyy ...

  6. ubuntu 深度学习cuda环境搭建，docker-nvidia 2019-02

    ubuntu 深度学习cuda环境搭建 ubuntu系统版本 18.04 查看GPU型号(NVS 315 性能很差,比没有强) 首先最好有ssh服务,以下操作都是远程ssh执行 lspci | gre ...

  7. Python基础学习之环境搭建

    Python如今成为零基础编程爱好者的首选学习语言,这和Python语言自身的强大功能和简单易学是分不开的.今天我们将带领Python零基础的初学者完成入门的第一步——环境搭建.本文会先来区分几个在P ...

  8. 001-深度学习Pytorch环境搭建(Anaconda , PyCharm导入)

    001-深度学习Pytorch环境搭建(Anaconda , PyCharm导入) 在开始搭建之前我们先说一下本次主要安装的东西有哪些. anaconda 3:第三方包管理软件. 这个玩意可以看作是一 ...

  9. 人工智能之深度学习-初始环境搭建（安装Anaconda3和TensorFlow2步骤详解）

    前言: 本篇文章主要讲解的是在学习人工智能之深度学习时所学到的知识和需要的环境配置(安装Anaconda3和TensorFlow2步骤详解),以及个人的心得体会,汇集成本篇文章,作为自己深度学习的总结 ...

随机推荐

  1. 使用C#处理基于比特流的数据

    使用C#处理基于比特流的数据 0x00 起因 最近需要处理一些基于比特流的数据,计算机处理数据一般都是以byte(8bit)为单位的,使用BinaryReader读取的数据也是如此,即使读取bool型 ...

  2. Linux下服务器端开发流程及相关工具介绍(C++)

    去年刚毕业来公司后,做为新人,发现很多东西都没有文档,各种工具和地址都是口口相传的,而且很多时候都是不知道有哪些工具可以使用,所以当时就想把自己接触到的这些东西记录下来,为后来者提供参考,相当于一个路 ...

  3. 实例操作JSONP原理

    絮语:按这个步骤走,你就会明白JSONP是什么鬼. 1.工程目录: ng-mywork demo.html test.js 2.nginx的server配置 server { listen ; ser ...

  4. Python应用03 使用PyQT制作视频播放器

    作者:Vamei 出处:http://www.cnblogs.com/vamei 严禁任何形式转载. 最近研究了Python的两个GUI包,Tkinter和PyQT.这两个GUI包的底层分别是Tcl/ ...

  5. CSS 3学习——边框

    在CSS 3中可以设置边框圆角.边框阴影和边框图像,分别通过border-radius.border-image和box-shadow属性设置. 边框圆角 border-radius属性是以下4个属性 ...

  6. Angular (SPA) WebPack模块化打包、按需加载解决方案完整实现

    文艺小说-?2F,言情小说-?3F,武侠小说-?9F long long ago time-1-1:A 使用工具,long long A ago time-1-2:A 使用分类工具,long long ...

  7. kali linux下的arp攻击

    这是我第一篇博客,写的不好请谅解 ____________________________(分割线)_______________________________ 在kali linux系统下自带工具 ...

  8. could not initialize proxy - no Session

    这是一个精典的问题:因为我们在hibernate里面load一个对象出来时,用到的是代理对象,也就是说当我们在执行load方法时并没有发sql语句,而是返回一个proxy对象.只有当们具体用到哪个ge ...

  9. [BOT]自己动手实现android 饼状图，PieGraphView，附源码解析

    本文要介绍的是一个参照手机支付宝app里面记账本功能里的"饼状图"实现的控件.通常app中可能的数据展示控件有柱状图,折线图,饼状图等,如果需要一个包含多种View控件的库,那么 ...

  10. DDD中的Unitwork与DomainEvent如何相容？(续)

    上篇中说到了面临的问题(传送门:DDD设计中的Unitwork与DomainEvent如何相容?),和当时实现的一个解决方案.在实际使用了几天后,有了新的思路,和@trunks 兄提出的观点类似.下面 ...