javascript学习笔记---注意知识点（持续更新）/词法分析

最新推荐文章于 2018-09-06 07:05:15 发布

xiaoa~

最新推荐文章于 2018-09-06 07:05:15 发布

阅读量162

点赞数

分类专栏： javascript学习笔记

本文链接：https://blog.csdn.net/qq_34964399/article/details/79338591

版权

javascript学习笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

#序列化  
a = [1,2,34,5]  
b = JSON.stringify(a)  
"[1,2,34,5]"  
JSON.parse(b)  
[1, 2, 34, 5]  
  
eval：  
python：  
    eval(表达式)：  
        print(eval("1 + 2"))  
    exec(执行代码)：  
        func = lambda x: x + 1        
        exec("d = func(2)")  
        print("d",d)  
        或  
        a = 1;b = 2  
        exec("c = a + b")  
        print("c",c)  
JavaScript:  
    eval 就是python的2个合集  
  
#转义  
decodeURI( )                   URl中未转义的字符  
decodeURIComponent( )   URI组件中的未转义字符  
encodeURI( )                   URI中的转义字符，中文字符  
encodeURIComponent( )   转义URI组件中的字符，中文字符，斜杠等  
escape( )                         对字符串转义  
unescape( )                     给转义字符串解码  
URIError                         由URl的编码和解码方法抛出  
  
a = encodeURI("http://mp.blog.csdn.net/mdeditor/78513697理解")       
"http://mp.blog.csdn.net/mdeditor/78513697%E7%90%86%E8%A7%A3"  
decodeURI(a)  
"http://mp.blog.csdn.net/mdeditor/78513697理解"  
b = encodeURIComponent("http://mp.blog.csdn.net/mdeditor/78513697理解")  
"http%3A%2F%2Fmp.blog.csdn.net%2Fmdeditor%2F78513697%E7%90%86%E8%A7%A3"  
decodeURIComponent(b)  
"http://mp.blog.csdn.net/mdeditor/78513697理解"  
  
#时间：  
Data类  
 var d = new Date()  
 d.getXXX 获取  
 d.setXXX 设置  
  
 #作用域  
 1 javascript：以函数作为作用域（除了let）  
 其他语言：以代码块为作用域，  
public void Func(){  
    if(i==1){  
    string name = "Java";  
    }  
    console.writeline(name);   //因为在java中{}是一个代码块  
}  
Func()  
//报错  
  
python中： 以函数作为作用域  
case1：  
def func():  
    if True:  
        name = "andi"  
    print(name)  
func()  //成功  
  
case2：  
def func():  
    if True:  
        name = "andi"  
func()  
print(name)  
//报错  
  
2.javascript的函数的作用域在函数未被调用之前，已经创建  
  
function func(){  
    if(1==1){  
        var name = 'tony';  
    }  
    console.log(name);  
}  
  
3.JavaScript的函数的作用域存在于作用域链，并
且也是在被调用之前创建，如果执行func()，这样
输出变量x的时候，先找inner的作用域"tom"，再找
func的作用域"cam"，再找全局变量john  
  
x = "john"  
function func(){  
    var x = "cam";  
    function inner(){  
        var x = "tom";  
        console.log(x);  
    }  
    inner()  
}            
[html] view plain copy
 var a = 100;  
  (function d1(){  
  var a = a;   // 写成 a = a 或a = a + 10  
   console.log(a);  
            })()  
注意，这样是不会有输出的，跟python一样。 外面有个全
局变量a ，在函数内部也不能a = a 需要global a才能使用  

4.函数内部局部变量需要提前声明  
//var a;  
function func(){  
    console.log(a);  
    //var a = 'tom';  
}  
func();  
//这样会输出undefined  
因为javascript会自动先找一遍所有的局部变量，然后var a
（输出：undefined）进行声明，所以这样就会输出undefined  
如果将var a = 'tom' 注释掉就会报错  
[html] view plain copy
DOM  
直接查找  
var obj = document.getElementById('i1')  
间接查找  
    文本内容操作：  
    innerText 仅文本  
    innerHTML 全内容  
    value  
        input        获取其中的value值  
        select       获取其中的value值（selectedIndex）  
        textarea     获取其中的value值  
  
  
<span style="font-size:18px;">input框展示</span>  
  
   <!--onfocus:光标如果定位（按tab键或者鼠
   标点击input框）到输入框就会执行onfocus函数；-->  
    <!--onblur：光标如果离开输入框，那么就会执行onblur函数；-->  
    <div style="width:800px;margin:100px auto;">  
        <input id="i1" οnfοcus="Focus();" οnblur="Blur();" value="请输入关键字"/>  
        
        <input type="text" placeholder="请输入关键字啦"/>  
        <!--新的浏览器直接支持这样的 -->  
    </div>  
    <script>  
        function Focus(){  
            var tag = document.getElementById('i1');  
            var val = tag.value;  
            if(val == '请输入关键字'){  
                tag.value = "";  
            }  
        }  
        function Blur(){  
            var tag = document.getElementById('i1');  
            var val = tag.value;  
            if(val == ''){  
                tag.value = "请输入关键字";  
            }  
        }  
    </script>  
  
<strong>样式操作</strong>  
className  
classList  
    classList.add  
    classList.remove  
      
obj.style.fontSize = 16px;  
obj.style.backgroundColor = 'red';  
  
<strong>属性操作</strong>  
obj.attributes  
obj.removeAttribute('value')  
obj.getAttribute('value')  
  
<strong>#创建标签</strong>  
  
<input type="button" value="+1" οnclick="addEle1()"/>  
    <input id="i2" type="button" value="+2" οnclick="addEle2()"/>  
<div id="i1">  
    <input type="text"/>  
</div>  
<script>  
    function addEle1(){  
        var tag = "<p><input type='text'/></p>";  
        document.getElementById('i1').insertAdjacentHTML('beforeEnd',tag);  
    }  
    function addEle2(){  
        var tag = document.createElement('input');  
        tag.setAttribute('type','text');  
        tag.style.fontSize = '16px';  
        tag.style.backgroundColor = 'red';  
        tag.style.color = 'red';  
        var p =document.createElement('p');  
        p.appendChild(tag);  
        document.getElementById('i1').appendChild(p);  
    }  
  
</script>  
  
  
<strong>任何标签通过DOM都能提交</strong>  
    <form id='i1' action="http://www.baidu.com">  
        <!--<input type="submit" value="submit"/>-->  
        <a οnclick="submitForm()">提交表单</a>  
    </form>  
    <script>  
        function submitForm(){  
            document.getElementById('i1').submit();  
        }  
    </script>  
  
其他：  
1.console.log()  
2.alert(123)  
3.var v = confirm(信息)   #v:返回true或者false  
console.log(v)    
4. location.href = ""  #重定向，跳转  
    location.reload() == location.href = location.href  #页面刷新  
5. var obj = setInterval(function(){},5000)   
    clearInterval(obj) // 清除定时器  
var obj2 = setTimeout(function(){},5000); 只执行一次  
    clearTimeout(obj2)  //清除  
  
   
#行为（js）、样式（css）、结构（html） 相分离  
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Title</title>  
</head>  
<body>  
    <table width="300px" border="1px">  
        <tr><td>1</td><td>2</td><td>3</td></tr>  
        <tr><td>1</td><td>2</td><td>3</td></tr>  
        <tr><td>1</td><td>2</td><td>3</td></tr> 
        <tr id="i1" οnmοuseοver="func()" οnmοuseοut="func2()">
            <td>1</td><td>2</td><td>3</td>
        </tr>
    </table>  
    <script>  
        var myTrs = document.getElementsByTagName('tr');  
        var tr_len = myTrs.length; // tr_len = 4  
        for(var i=0;i<(tr_len-1);i++){  
            //写成myTrs[i].style.backgroundColor是不行的，全局变量myTris，tr_len
            // （虽然定义了var，但是定义在了函数外，在script块中）  
            //代码往下执行，先执行myTris，再执行tr_len，再执行for循环，
            // i=0,1,2,3(这个函数只是存放在内存中，并未执行)  
            //当你的鼠标放到div上触发onmouseover事件的时候，i一直等于3  
            myTrs[i].onmouseover = function(){  
//                this.style.backgroundColor = 'red';   //this 当前触发事件的标签  
                myTrs[i].style.backgroundColor = 'red';  
                console.log(i);  
            }  
            myTrs[i].onmouseout = function(){  
                this.style.backgroundColor = "";  
            }  
        }  
        function func(){  
            document.getElementById('i1').style.backgroundColor = 'blue';  
        }  
        function func2(){  
            document.getElementById('i1').style.backgroundColor = '';  
        }  
    </script>  
</body>  
  
  
  
  
  
<strong>绑定事件的；两种方式</strong>：  
a.直接标签绑定 οnclick='xxx()'  onfocus   
b.先获取Dom对象，然后进行绑定  
document.getElementById('i1').onclick  
  
this,当前触发事件的标签  
a.第一种绑定方式  //参考http://blog.csdn.net/qq_34964399/article/details/79330990   
<input type='button' οnclick='ClickOn(this)'/>  
  
    <script>  
        function ClickOn(self){  
        //self 当前点击的标签}  
    </script>  
  
b.第二种绑定方式  
<input id='i1' type='button'/>  
document.getElementById('i1').onclick = function(){  
//this 代指当前点击的标签 （见上）   
}   或 $('i1')[0].onclick = function(){}   
如果用jQuery绑定 则为：  
[html] view plain copy
$('i1').click（function(){}）  
[html] view plain copy
c.第三种绑定方式  
<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <title>Title</title>  
    <style>  
        #main{  
            background-color:red;  
            width:300px;  
            height:200px;  
        }  
        #content{  
            background-color:blue;  
            width:100px;  
            height:100px;  
        }  
    </style>  
</head>  
<body>  
    <div id="main">  
        <div id="content">  
        </div>  
    </div>  
    <script>  
        var myMain = document.getElementById('main');  
        var myContent = document.getElementById('content');  
        myMain.addEventListener("click",function(){console.log('main')},true);  
        myContent.addEventListener("click",function(){console.log('content')},true);  
        //1.false：在w3c标准模型中，当点击content的时候就是冒泡方式 
        // 先输出content，再输出main（先输出内层）  
        //2.true：在w3c标准模型中，当点击content的时候就是
        // 捕捉方式 先输出main，再输出content（先输出外层）  
    </script>  
</body>

词法分析

#词法分析  
<script>  
function t1(age){  
console.log(age);  
var age = 27;  
console.log(age);  
function age(){}  
console.log(age)  
}  
</script>  
  
t1(3)  
输出：
ƒ age(){}  
27  
27  
  
  
active object ----->AO 词法分析  (js在执行函数前会先进行词法分析，系统有个AO对象，依次执行下面的3个步骤)
1.形式参数  
2.局部变量  
3.函数声明表达式  
  
  
1.形式参数  
AO.age = undefined  //先找到形式参数t1(age)  
AO.age = 3 ; //找到实际参数3，传入到形参age  
2.然后分析局部变量  
AO.age = undefined // 再找到局部变量var age   ，此时不是执行程序，就是执行AO词法分析，不会把局部变量的27赋值
3.最后进行函数声明表达式分析，有 function age(){}  赋值给AO.age这个对象
AO.age = function age（）  
  
  
然后开始执行js语句  
  
  
function t1(age){  
console.log(age);   
// 输出 function age()  

var age = 27;  //执行这句，把27 赋值给age 
console.log(age); // 输出age

function age(){}     // 没有程序调用这个函数，则不执行      
console.log(age)   // 最后执行这句，此时age还是27，因为function age(){}已经先进行词法分析了，此时不会执行function age(){}，所以不会将名为age的函数赋值给age对象

xiaoa~

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript学习笔记---注意知识点（持续更新）/词法分析

#序列化 a = [1,2,34,5] b = JSON.stringify(a) "[1,2,34,5]" JSON.parse(b) [1, 2, 34, 5] eval： python： eval(表达式)： print(eval("1 + 2")) exec(执行代码)： func = lam...
复制链接

扫一扫