当前位置： 移动技术网 > IT编程>开发语言>JavaScript > JS学习笔记-初级篇

JS学习笔记-初级篇

2019年06月16日  | 移动技术网IT编程  | 我要评论

js学习笔记-初级篇

1.声明变量，没有赋值的情况

var a
console.log(a) //undefined
console.log(typeof a) //"undefined"

2.对于极大极小的数字可以采用科学技术法

啥时候去研究一下科学计数法

var y=123e5;      // 12300000
var z=123e-5;     // 0.00123

3.数据类型

typeof null //"object"
typeof {} //"object"
typeof [] //"object"
typeof 1 //"number"
typeof "1" //"string"
typeof new string("a") //"object"

4.对象

javascript 中的所有事物都是对象：字符串、数字、数组、日期，等等。
在 javascript 中，对象是拥有属性和方法的数据。

访问对象的属性

var cat = {
    color : "black",
    weight : "4kg",
    age : 5,
    eat :　function() {
        alert("cat need eat some foods")
    },
    run : function() {
        alert("cat run!")
    }
}

//输出cat颜色
//objectname.propertyname
console.log(catr.color)
//运行cat吃的方法
//objectname.methodname()
cat.eat()

tip：使用函数名称用长单词+驼峰法的命令方式，增加易读性eat-food,eat_food,eatfood,please choose eatfood

数组和对象类似

5.函数

var like = "play ping-pang ball"
//函数中的参数可以不写，可以不赋值，老版本中是不支持赋值的写法，现在大家都用新版了嘛
function test(arg1,arg2 = "qian") {
    console.log("firstname is %s,lastname is %s",arg1,arg2,like);
    //return "success"
    //返回一个值，可以在
}
test()
//输出啥自己测试去

tip1：在使用方法的时候特么注意全部变量和局部变量，以及作用域。不能乱写，不能污染。

tip2：javascript 变量的生存期javascript 变量的生命期从它们被声明的时间开始。局部变量会在函数运行以后被删除。全局变量会在页面关闭后被删除。

6.判段cookie是否启用

onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie

navigator.cookieenabled==true

7.创建元素





这是一个段落。


这是另一个段落。



<script>
    var para=document.createelement("p");
    var node=document.createtextnode("这是新段落。");
    para.appendchild(node);

    var element=document.getelementbyid("p1");
    element.appendchild(para);

    //删除元素
    element.removechild(para)
</script>

8.数组


length  返回数组长度
concat()    连接两个或更多的数组，并返回结果。
join()  把数组的所有元素放入一个字符串。元素通过指定的分隔符进行分隔。
pop()   删除并返回数组的最后一个元素
push()  向数组的末尾添加一个或更多元素，并返回新的长度。
reverse()   颠倒数组中元素的顺序。
shift() 删除并返回数组的第一个元素
slice() 从某个已有的数组返回选定的元素
sort()  对数组的元素进行排序
splice()    删除元素，并向数组添加新元素。
tosource()  返回该对象的源代码。
tostring()  把数组转换为字符串，并返回结果。
tolocalestring()    把数组转换为本地数组，并返回结果。
unshift()   向数组的开头添加一个或更多元素，并返回新的长度。
valueof()   返回数组对象的原始值


9.正则表达式


var patt1=new regexp("e");

//test()返回值为true 或者 false
var patt1=new regexp("e");

document.write(patt1.test("the best things in life are free")); 

//exec()返回值为该字符
document.write(patt1.exec("the best things in life are free")); 


tip：写一下正则的介绍：


修饰符


i   执行对大小写不敏感的匹配。
g   执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m   执行多行匹配。

var str = "this is test regexp"
var patter = /e/g


范围匹配


[abc]   查找方括号之间的任何字符。
[^abc]  查找任何不在方括号之间的字符。
[0-9]   查找任何从 0 至 9 的数字。
[a-z]   查找任何从小写 a 到小写 z 的字符。
[a-z]   查找任何从大写 a 到大写 z 的字符。
[a-z]   查找任何从大写 a 到小写 z 的字符。
[adgk]  查找给定集合内的任何字符。
[^adgk] 查找给定集合外的任何字符。
(red|blue|green)    查找任何指定的选项
| 或者


元字符


.   查找单个字符，除了换行和行结束符。
\w  查找单词字符。
\w  查找非单词字符。
\d  查找数字。
\d  查找非数字字符。
\s  查找空白字符。
\s  查找非空白字符。
\b  匹配单词边界。
\b  匹配非单词边界。
\0  查找 nul 字符。
\n  查找换行符。
\f  查找换页符。
\r  查找回车符。
\t  查找制表符。
\v  查找垂直制表符。
\xxx    查找以八进制数 xxx 规定的字符。
\xdd    查找以十六进制数 dd 规定的字符。
\uxxxx  查找以十六进制数 xxxx 规定的 unicode 字符。


支持正则表达式的 string 对象的方法


search  检索与正则表达式相匹配的值。  
match   找到一个或多个正则表达式的匹配。
replace 替换与正则表达式匹配的子串。
split   把字符串分割为字符串数组。


10.js window


window


例如：


var teststr = "echone"
var testfun = function() {
    console.log(teststr)
}
teststr === window.str
testfun() === window.testfun()


有三种方法能够确定浏览器窗口的尺寸（浏览器的视口，不包括工具栏和滚动条）。

对于internet explorer、chrome、firefox、opera 以及 safari：


window.innerheight - 浏览器窗口的内部高度
window.innerwidth - 浏览器窗口的内部宽度


对于 internet explorer 8、7、6、5：


document.documentelement.clientheight
document.documentelement.clientwidth


或者


document.body.clientheight
document.body.clientwidth


window的一些方法


window.open() - 打开新窗口
window.close() - 关闭当前窗口
window.moveto() - 移动当前窗口
window.resizeto() - 调整当前窗口的尺寸


screen


//返回屏幕可用宽度
screen.availwidth === window.screen.availwidth
//高度
screen.availheight === window.screen.availheight


location


window.location 可以不写前缀


location.hostname 返回 web 主机的域名
location.pathname 返回当前页面的路径和文件名
location.port 返回 web 主机的端口 （80 或 443）
location.protocol 返回所使用的 web 协议（https:// 或 https://）
location.assign(url) 方法加载新的文档。


history


浏览器历史记录


history.back() - 与在浏览器点击后退按钮相同

history.forward() - 与在浏览器中点击按钮向前相同


window.navigator


对象包含有关访问者浏览器的信息。




 

<script>

txt = "
browser codename: " + navigator.appcodename + "
";
txt+= "
browser name: " + navigator.appname + "
";
txt+= "
browser version: " + navigator.appversion + "
";
txt+= "
cookies enabled: " + navigator.cookieenabled + "
";
txt+= "
platform: " + navigator.platform + "
";
txt+= "
user-agent header: " + navigator.useragent + "
";
txt+= "
user-agent language: " + navigator.systemlanguage + "
";

document.getelementbyid("example").innerhtml=txt;

</script>

tip：该方法不能用来判段浏览器，因为浏览器的信息可能被使用者更改


弹出框


alert（）
confirm()
prompt("文本","默认值")

var a = confirm("确定提交？")
//点击确认按钮
if(a == true) somethings can do
else do something  //取消按钮



计时器


var test = settimeout(function(){},time);

cleartimeout(test);


cookie


//设置cookie
setcookie = function(name, value, expiretimes) {
    var expdate = new date();
    expdate.settime(expdate.gettime() + expiretimes);
    document.cookie = name + "=" + value + ";expires=" + expdate.togmtstring() + ";path=/";
}
//获取cookie
getcookie = function(c_name) {
    if (document.cookie.length > 0) {
        c_start = document.cookie.indexof(c_name + "=");
        if (c_start != -1) {
            c_start = c_start + c_name.length + 1;
            c_end = document.cookie.indexof(";", c_start);
            if (c_end == -1) {
                c_end = document.cookie.length;
            }
            return document.cookie.substring(c_start, c_end);
        }
    }
}

删除cookie

setcookie(name,value,-1)


						

                    

                        

                            
                        

                    

                    


                    
                    

                        
    
                            
  • 
                                
                            
    • 
                        

                    


                    
                    

                    

                        
您可能感兴趣的文章:

                        
                    

                    

                        如对本文有疑问，
                        点击进行留言回复！！
                    

                

                 
                

                    
相关文章:

                    
                

               
                 
                 

                

                    
                    

                        
                        
                        

                        

                            

                                
                                    
                                
                                 
                                    
                                
                            

                            

                                验证码：
                                
                                    
                                    
                                    
                                
                            

                        

                        
                    

                    
                    

                        
                        
                        
                    

                

            

        

        
        
 
            

                

                    
                    

                    
                


                

                    

                        

                            
最近更新的文章

                            

                                
                            

                        

                    

                


                

                    
                    

                        
                    

                


                

                

                    

                        

                            
大家感兴趣的文章

                            

                                
                            

                        

                    

                

                

                    
                    

                        
                    

                


            

        

    



 


 
 

     
    

        

移动技术网