前端知识复习,温习前端知识

作者:计算机知识

趁着如今专门的学问不忙,重新温习前端一些学问,从JavaScript初阶吧。

js知识点

温习js


做了个游戏:

前者框架 EasyUI (0) 重新温习(序言),easyui温习

  几年前,参加过二个品类。那到底3个小型的消息保管连串,BS 结构的,前端用的是依靠 jQuery 的 EasyUI 框架。

前端知识复习,温习前端知识。  小编进 Team 的时候,项目曾经进来开辟阶段半个多月了。据悉整个项目标框架是另1个“牛人”搭建的,后来被那么些PM 直接拿来用了。

  因为搭框架的“牛人”已经不在了,整个 Team 未有对框架非常明白的人,开采进度中遇到重重难点。

  后台幸而,没用什么复杂的零件或框架,都以最核心的 ASP.NET 页面和 C# 代码,所以未有怎么难点。关键是前者,当时全部 Team 里不曾一个人在那个类型事先用过 EasyUI,以至 伍 个人中的 三 个都尚未用过 jQuery,所以先河的时候对前者页面包车型客车其余一点调度都很纠结。

  项目中境遇了难题,加之当时本人刚到场职业,没见过怎么着页面框架(上学的时候都以投机写 CSS 和 JS),所以立即看到 EasyUI 如故挺快乐的,就想协和抽时间好好研讨一下。所幸以前自学过 jQuery,没觉有吗难度,所以入门 EasyUI 难点一点都不大。

  小编挑了项目里用到的多少个插件,官方网址找来 Demo 运维一下,看看 德姆o 代码,然后自个儿建个 Project 写个 德姆o 调节和测试一下,改改属性参数看看效果,试试各样风浪、方法,没几天时间便知道了 EasyUI 的大意套路。

  仿效着 API,拿来项目,改起前端框架百步穿杨,消除掉了多少个很令人夭亡的标题(那时的 EasyUI 还应该有比较多的小 BUG),标准了瞬间前端框架使用的注意事项。后来便担起了这几个类型前端框架的修改维护事业。

  后来,因为及时从未找到比较系统又便于领悟的教程,所以就想写个博客分享一下,相同的时候也算对学过文化的笔录与计算。于是,开了2个分类,一共写了 五 篇,貌似读者商议还很不利。(帮忙了部分人,深感欣慰)

  后来因为项目改造,近几年都以在搞 WinForm 的项目,所以并未有再继续下去。直到眼下,离开了这家公司,妄想小憩1段时间,所以又策画将 EasyUI 再温习三回,一来给初学者分享,二来本人也积存一下。

  本想续写,可回头再看在此以前的几篇博客,因为版本更新 EasyUI 已变得不一样,所以笔者筹划重新从头初叶。

 

EasyUI (0) 重新温习(序言),easyui温习 几年前,参与过1个品类。那算是3个小型的新闻保管系列,BS 结构的,前端用的是基...

(一)温习JS知识一些大致记录

在此处,作者就只记录一些作者想记载的事物,以备自个儿之后继续商讨和壮大。

      一.JavaScript是1种基于对象和事件驱动的客户端脚本语言,也能运维于后台的语言,如现在风行的node.js。

      2.JavaScript的数据类型

            (1)原始数据类型:undefined,number,Boolean,string,null三种;能够用typeof 运算符实行验证,不过null会再次来到object,被以为是目的的占位符。

      其中undefined与null

console.log(undefined == null);//true,undefined是null派生出来的。
console.log(undefined === null);//false因为它们类型不同。

            (二)引用数据类型:引用类型的值是保存在内部存款和储蓄器中的对象。在JavaScript中差异意直接访问内存中的职位,也正是说不可能平素操作对象的内存空间。在操作对象时,实际上是在操作对象的引用而不是事实上的靶子。所以引用类型的值是按引用访问的。

            (3)JavaScript中‘==’与‘===’的不一致:不相同类型比较时,‘==’会转化成同1类型后的值,进行值相比较;‘===’要是类型不一致则不对等。

      3.JavaScript变量

             (1)呈现评释:var a = 壹;隐示评释:a = 壹;(申明是必须赋值,不然报错)

      4.在复习的时候看见多数大神写好的知识点,所以就不再去写那么多;今后主要记一下团结索要的啊

css知识点

温习css


<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #cont {
                margin-top: 100px;
                width: 400px;
                height: 400px;
                border: 1px solid brown;
                position: relative;

            }

            #main {
                top: -100px;
                width: 400px;
                height: 400px;
                border: 1px solid blueviolet;
                position: absolute;
            }

            .row {
                height: 100px;
            }

            .row div {
                width: 98px;
                height: 98px;
                border: 1px solid black;
                float: left;
            }

            .black {
                background: black;
            }
        </style>
    </head>

    <body>
        <h2 id="score">0</h2>
        <div id="cont">
            <div id="main"></div>
        </div>
    </body>
    <script type="text/javascript">
        //创建div
        var main = document.getElementById("main")
        var clock=null;
        var k=true;
        var speed=2;
        function cDiv(className) {
            var div = document.createElement("div");
            if(className) {
                div.className = className;
            }
            return div;
        }

        function cRow() {
            var ind = Math.floor(Math.random() * 4)
            var row = cDiv('row');
            for(var i = 0; i < 4; i  ) {
                if(i == ind) {
                    row.appendChild(cDiv('black'));
                } else {
                    row.appendChild(cDiv());
                }
            }
            if(main.firstChild) {
                main.insertBefore(row, main.firstChild)
            } else {
                main.appendChild(row);
            }

        }

        function init() {
            for(var i = 0; i < 4; i  ) {
                cRow();
            }
            main.onclick=function(ev){
                ev.target=ev.target||ev.srcElement;
                if(k==false){
                    alert("请点击刷新")
                }else if (ev.target.className=="") {
                    clearInterval(clock)
                    k=false;
                    alert("输了1")
                }else{
                    var score=document.getElementById("score");
                    var src=parseInt(score.innerHTML) 1;
                    score.innerHTML=src;
                    if(src==0){
                        speed=speed 1;
                    }
                    ev.target.className="";
                    ev.target.parentNode.pass=true;             
                }
            }
            clock=window.setInterval('move();', 40)
        }
        init();

        function move() {
            var top = getStyle(main, "top");
            top = parseInt(top) speed;
            main.style.top = top    'px';

            if(top>0){
                cRow();
                main.style.top="-100px";
                if (main.lastChild.pass==undefined) {
                    clearInterval(clock)
                    k=false;
                    alert("输了2")
                }
            }
            if (main.children.length>=5) {
                main.removeChild(main.lastChild)
            }

        }

        function getStyle(el, attr) {
            return el.currentStyle ? el.currentStyle[attr] : getComputedStyle(el, null)[attr];
        }

    </script>

</html>

jquery温习

投机达成一个jquery


本文由bwin必赢发布,转载请注明来源

关键词: 日记本 js