专栏首页web编程技术分享小兔JS教程(一) -- 环境搭建与JavaScript初探1.开发环境搭建2.JavaScript初探

小兔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 条评论
登录 后参与评论

相关文章

  • 从啥也不会到可以胜任最基本的JavaWeb工作,推荐给新人的学习路线(一)

    剽悍一小兔
  • 【手把手】JavaWeb 入门级项目实战 -- 文章发布系统 (第二节)

    剽悍一小兔
  • 【php增删改查实例】第二十四节 - 文件上传在项目中的具体应用

    剽悍一小兔
  • webpack通用功能开发 原

    在util/mm.js下,包含ajax的数据请求,服务器地址的获取,url正则提取后的路径,html模板渲染的,成功、错误提示,字段的正则验证,对登录的统一处理...

    晓歌
  • 葵花宝典之机器学习:全网最重要的AI资源都在这里了(大牛,研究机构,视频,博客,书籍,Quora......)

    翻译 | AI科技大本营(rgznai100) 参与 | Joe,焦燕 2000年早期,Robbie Allen在写一本关于网络和编程的书的时候,深有感触。他发...

    AI科技大本营
  • border、margin、padding属性的区别

    可以先看下这个视频教程:http://my.tv.sohu.com/us/97014746/64226777.shtml

    跟着阿笨一起玩NET
  • 1.CSS单位-CSS进阶

    见贤思齊
  • 使用supervisor对程序的输出重定向

    超级大猪
  • iOS Swift基础语法(一)

    傅_hc
  • Docker Image 解决镜像无法删除的问题

    Error response from daemon: conflict: unable to delete 4ac2d12f10cd (must be for...

    搜云库

扫码关注云+社区

领取腾讯云代金券