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. 引人瞩目的 CSS 变量（CSS Variable）

    这是一个令人激动的革新. CSS 变量,顾名思义,也就是由网页的作者或用户定义的实体,用来指定文档中的特定变量. 更准确的说法,应该称之为 CSS 自定义属性 ,不过下文为了好理解都称之为 CSS 变 ...

  2. UWP开发之Template10实践：本地文件与照相机文件操作的MVVM实例(图文付原代码)

    前面[UWP开发之Mvvmlight实践五:SuspensionManager中断挂起以及复原处理]章节已经提到过Template10,为了认识MvvmLight的区别特做了此实例. 原代码地址:ht ...

  3. 关于Raid0,Raid1,Raid5,Raid10的总结

    RAID0 定义: RAID 0又称为Stripe或Striping,它代表了所有RAID级别中最高的存储性能.RAID 0提高存储性能的原理是把连续的数据分散到多个磁盘上存取,这样,系统有数据请求就 ...

  4. [原] KVM 虚拟化原理探究（6）— 块设备IO虚拟化

    KVM 虚拟化原理探究(6)- 块设备IO虚拟化 标签(空格分隔): KVM [toc] 块设备IO虚拟化简介 上一篇文章讲到了网络IO虚拟化,作为另外一个重要的虚拟化资源,块设备IO的虚拟化也是同样 ...

  5. js数组学习整理

    原文地址:js数组学习整理 常用的js数组操作方法及原理 1.声明数组的方式 var colors = new Array();//空的数组 var colors = new Array(3); // ...

  6. Java类变量和成员变量初始化过程

    一.类的初始化 对于类的初始化:类的初始化一般只初始化一次,类的初始化主要是初始化静态成员变量. 类的编译决定了类的初始化过程. 编译器生成的class文件主要对定义在源文件中的类进行了如下的更改: ...

  7. html中table边框属性

    1.向右(横向)合并: <td colspan="5"><span>后台管理系统</span></td> 2.向下(纵向)合并: & ...

  8. CSS3新特性应用之结构与布局

    一.自适应内部元素 利用width的新特性min-content实现 width新特性值介绍: fill-available,自动填充盒子模型中剩余的宽度,包含margin.padding.borde ...

  9. 技术笔记：Indy IdSMTP支持腾讯QQ邮箱邮件发送

    1.腾讯QQ邮箱的授权码问题 因为腾讯邮箱折腾了个底朝天,其要搞什么授权码登录第三方客户端,否则会报这个错误: 'Error: 请使用授权码登录.详情请看: http://service.mail.q ...

  10. 如玫瑰一般的PHP与C#混合编程

    故事背景是这样的,有一套项目,服务器端是用C#写的,为了完成某种事情,它需要使用到一个组件,这个组件很小但很重要,很不巧的是,这个这个组件是用PHP语言写的,如果为了使用这个组件而专门搭建一个PHP的 ...