第一个JS作品，遇到的问题。

完整代码：keyboard.github.io/keb.html at…

初始化函数

这个没有遇到问题，就是先初始化hash和Keys

function init(){
            var keys = {
                '0': {0:'q',1:'w',2:'e',3:'r',4:'t',5:'y',6:'u',7:'i',8:'o',9:'p',length:10},
                '1': {0:'a',1:'s',2:'d',3:'f',4:'g',5:'h',6:'j',7:'k',8:'l',length:9},
                '2': {0:'z',1:'x',2:'c',3:'v',4:'b',5:'n',6:'m',length:7},
                'length': 3
            }
            var hash = {'q': 'qq.com', 'w': 'weibo.com', 'e': 'ele.me', 'r': 'renren.com', 't': 'tianya.com', 'y': 'youtube.com', 'u': 'uc.com' , 'i': 'iqiyi.com', 'o': 'opera.com', 'p': undefined, 'a': 'acfun.tv', 's': 'sohu.com', 'z': 'zhihu.com', 'm': 'www.mcdonalds.com.cn'
            }
            // 取出 localStorage 中的 zzz 对应的 hash
            var hashInLocalStorage = getFromLocalStorage('zzz') 
            if(hashInLocalStorage){
                hash = hashInLocalStorage
            }
            return {
                "keys": keys,
                "hash": hash
            }
        }
​
            

取出 localStorage 中的 zzz 对应的 hash 这一步遇到了问题

如 1.什么是localstorage 2.这个是干什么用的

            var hashInLocalStorage = getFromLocalStorage('zzz')
            //取出之前存的hash，对应button那个函数看很清晰
            if(hashInLocalStorage){
                hash = hashInLocalStorage
            }
            return {
                "keys": keys,
                "hash": hash
            }//如果用户编辑了新的网址，就让hash=新的改过的hash
        }

生成键盘，遍历kbd标签

    function generateKeyboard(keys, hash){
            for(var index=0; index< keys['length']; index = index+1 ){
                var div = tag('div')
                div.className = 'row'
​
                main.appendChild(div)
​
            var row = keys[index]  // 第一个数组  第二个数组  第三个数组
            for(var index2 =0;index2< row['length']; index2 = index2 + 1){
                var span = createSpan(row[index2])
​
                var button = createButton(row[index2])
​
                var img = createImage(hash[row[index2]])
​
                var kbd = tag('kbd')
                kbd.className = 'key'
​
                kbd.appendChild(span)
                kbd.appendChild(img)
                kbd.appendChild(button)
​
                div.appendChild(kbd)
            }
        }
    }   

这一步也没有问题 学到三个语句

1.var div = document.createElement('div'), 创建一个div,名字叫div

2.div.className='row',创建的div class的名字叫row

3.div1.appendChild(div)插入到div1这个div中

div11=document.createElement('div')

div11.className='row'

div1.appendChild(div11)自己写的例子

            var kbd = tag('kbd')
            kbd.className = 'key'
​
            kbd.appendChild(span)
            kbd.appendChild(img)
            kbd.appendChild(button)
​
            div.appendChild(kbd)

这几个顺序还有点讲究， 先创建Kbd标签 在kbd下再创建span span下再创建img 再img那里再创建button 最后在div下将kbd插入

结果大概是这样

不知道怎么起名字，这个函数

function listenToUser(hash){
        document.onkeypress = function(zywoo){
                var key = zywoo['key'] // q w e
                var website = hash[key]
                //location.href = 'http://'+website
                window.open('http://'+website, '_blank')
            }
        }

这个地方没有弄懂，查阅后发现onkeypress好像是一个关键词？ 可以监听键盘和数字，按下字母和数字时，会有提示按了啥键 我的目前理解这块代码是

1.定义key,存放我按下的键,var key=zywoo['key']

2.定义website=hash[key],这一步是取hash中我定义的子母所表达的网址如’q‘：qq.com 3.window.open('http://'+website, '_blank')，这一步就是在新窗口开启新页面

创建 button

function createButton(id){
            var button = tag('button')
            button.textContent = '编辑'
            button.id = id
            button.onclick = function(xx){
                var button2 = xx['target']
                var img2 = button2.previousSibling
                var key = button2['id'] // q w e r t
                var x = prompt('给我一个网址') // qq.com
                hash[key] = x  // hash 变更
                img2.src = 'http://'+x + '/favicon.ico'
                img2.onerror = function(xxx){
                    xxx.target.src = '//i.loli.net/2017/11/10/5a05afbc5e183.png'
                }
                localStorage.setItem('zzz', JSON.stringify(hash))
            }
            return button
        }

这一步当时整和的时候但看这一大块没有看懂，结合整个看会了 button.id=id,后面会得出每个键都有一个Button用于编辑，输入新的网址。

代码的解释，目前

onclick 事件会在元素被点击时发生

xx['target']:就是点击的元素

button2就是点击元素的按钮对应的Key中的button

button2['id']就是我之前定义的id//qwer....对应每个键盘

button.onclick = function(xx){
            var button2 = xx['target']
            //取到用户点击的元素
            var img2 = button2.previousSibling
            //这里这个previoussibling是为了取到每个Button对应的图片，从而达到修改网址图片也修改的目的
            var key = button2['id'] 
                //使key=qwer.....
            var x = prompt('给我一个网址') // qq.com
            hash[key] = x  // hash 变更
            
            
    这一段是为了button修改网址以后，键盘上面的图片变样子
            img2.src = 'http://'+x + '/favicon.ico'
            
    如果取不到网址的ico那么就用其他图片代替
            img2.onerror = function(xxx){
                xxx.target.src = '//i.loli.net/2017/11/10/5a05afbc5e183.png'
            }
            
            
改完之后hash就变了，所以需要用localstorage把这些更改过新hash表的给存下来
localStorage.setItem('zzz' JSON.stringify(hash))
        }
stringify  这个是使其转化成字符串
    

    function createImage(domain){
            var img = tag('img')
            if(domain){
                img.src = 'http://'+ domain + '/favicon.ico'
            }else{
                img.src = '//i.loli.net/2017/11/10/5a05afbc5e183.png'
            }
            img.onerror = function(xxx){
                xxx.target.src = '//i.loli.net/2017/11/10/5a05afbc5e183.png'
            }
            return img
        }
创建图片