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

#序列化  
a = [1,2,34,5]  
b = JSON.stringify(a)  
"[1,2,34,5]"  
JSON.parse(b)  
[1, 2, 34, 5]  
  
evalpython    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 就是python2个合集  
  
#转义  
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中: 以函数作为作用域  
case1def func():  
    if True:  
        name = "andi"  
    print(name)  
func()  //成功  
  
case2def 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是不行的,全局变量myTristr_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').clickfunction(){}[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对象 


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值