学习笔记-js-2017.2.27
2017-02-27 本文已影响0人
阿苏菇凉
一、Array（数组） 对象
数组可以用一个变量名存储所有的值，并且可以用变量名访问任何一个值。
数组中的每个元素都有自己的的ID，以便它可以很容易地被访问到。
访问数组中的第一个对象
<p id="demo"></p>
<script type="text/javascript">
var myCars=["a","b","c","d"];
var name=myCars[0];
document.getElementById("demo").innerHTML=myCars;
</script>
改变数组中第一个对象并输出
<p id="demo"></p>
<script type="text/javascript">
var myCars=["a","b","c","d"];
myCars[0]="f";
document.getElementById("demo").innerHTML=myCars;
</script>
合并数组
<script type="text/javascript">
var myCars=["a","b","c","d"];
var mytxt=["e","f","g"];
var he=myCars.concat(mytxt);
document.write(he);
</script>
从一个数组中选择元素
<p id="demo"></p>
<button onclick="myFunction()">点击</button>
<script type="text/javascript">
function myFunction(){
var myCars=["a","b","c","d"];
var select=myCars.slice(0,3);
document.getElementById("demo").innerHTML=select;
}
</script>
二、JavaScript 弹窗
<script type="text/javascript">
function myFunction(){
var x;
var r=confirm("按下按钮");
if(r==true){
x="你按下了\"确定\"按钮！";
}
else{
x="你按下了\"取消\"按钮！";
}
document.getElementById("demo").innerHTML=x;
}
</script>
<button onclick="myFunction()">点击</button>
<p id="demo"></p>
<script type="text/javascript">
function myFunction(){
var x;
var person=prompt("请输入你的名字","Harry Potter");
if(person!=null&&person!=""){
x="你好"+person+"!今天感觉如何？";
document.getElementById("demo").innerHTML=x;
}
}
</script>
三、JavaScript Cookie
<script type="text/javascript">
function setCookie(cname,cvalue,exdays){
var d=new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires="expires="+d.toGMTString();
document.cookie=cname+"="+cvalue+";"+expires;
}
function getCookie(cname){
var name=cname+"=";
var ca=document.cookie.split(';');
for(var i=0;i<ca.length;i++){
var c=ca[i].trim();
if(c.indexOf(name)==0)return c.substring(name.length,c.length);
}
return"";
}
function checkCookie(){
var user=getCookie("username");
if(user!="")
{
alert("Welcome again "+user);
}
else{
user=prompt("please enter your name:","");
if(user!="" && user!=null)
{
setCookie("username",user,30);
}
}
}
</script>
四、JavaScript 计时事件
每三秒弹出 "hello" ：
<script type="text/javascript">
function myFunction(){
setInterval(function(){alert("Hello")},3000);
}
</script>
三秒后弹出“hello”
<script type="text/javascript">
function myFunction(){
setTimeout(function(){alert("Hello")},3000);
}
</script>
五、JavaScript 函数定义
1、函数声明
function functionName(parameters) {
执行的代码
}
<script type="text/javascript">
function myFunction(a,b){
return a/b;
}
document.getElementById("demo").innerHTML=myFunction(0.1,0.2);
</script>
2、Function() 构造函数
<script type="text/javascript">
var myFunction = new Function("a","b","return a*b");
document.getElementById("demo").innerHTML=myFunction(4,3);
</script>
3、自调用函数
<p id="demo"></p>
<script type="text/javascript">
(function(){
document.getElementById("demo").innerHTML="Hello!"
})();
</script>
4、函数可作为一个值使用
<script type="text/javascript">
function myFunction(a,b){
return a*b;
}
var x=myFunction(4,3);
document.getElementById("demo").innerHTML=x;
</script>
5、函数是对象
<script type="text/javascript">
function myFunction(a,b){
return a*b;
}
document.getElementById("demo").innerHTML=myFunction.toString();
</script>
六、JavaScript 函数参数
1、Arguments 对象
JavaScript 函数有个内置的对象 arguments 对象。
argument 对象包含了函数调用的参数数组。
<p id="demo"></p>
<script type="text/javascript">
x=findMax(1,123,500,115,44,88);
function findMax(){
var i,max=arguments[0];
if(arguments.length<2) return max;
for(i=0;i<arguments.length;i++){
if(arguments[i]>max){
max=arguments[i];
}
}
return max;
}
document.getElementById("demo").innerHTML=x;
</script>
2、
<p id="demo"></p>
<script type="text/javascript">
function sumAll(){
var i,sum=0;
for(i=0;i<arguments.length;i++){
sum+=arguments[i];
}
return sum;
}
document.getElementById("demo").innerHTML=sumAll(1,2,3,4,5,6);
</script>
七、JavaScript 函数调用
1、函数作为方法调用
<p id="demo"></p>
<script type="text/javascript">
var myObject={
firstName:"John",
lastName:"Doe",
fullName:function(){
return this;
}
}
document.getElementById("demo").innerHTML=myObject.fullName();
</script>
2、使用构造函数调用函数
<p id="demo"></p>
<script type="text/javascript">
function myFunction(args1,args2){
this.firstName=arg1;
this.lastName=arg2;
}
var x=new myFunction("John","Doe")
document.getElementById("demo").innerHTML=x.firstName;
</script>
3、作为函数方法调用函数
<p id="demo"></p>
<script type="text/javascript">
var myObject;
function myFunction(a,b){
return a*b;
}
myObject=myFunction.call(myObject,10,2);
document.getElementById("demo").innerHTML=myObject;
</script>
八、JavaScript 闭包
1、全局变量
函数可以访问�由函数内部定义的变量
<button type="button" onclick="myFunction()">点击</button>
<p id="demo"></p>
<script type="text/javascript">
function myFunction(){
var a=4;
document.getElementById("demo").innerHTML=a*a;
}
</script>
2、函数访问定义在函数外的变量
<script type="text/javascript">
var a=4;
function myFunction(){
document.getElementById("demo").innerHTML=a*a;
}
</script>
3、JavaScript 闭包
<button type="button" onclick="myFunction()">点击</button>
<p id="demo"></p>
<script type="text/javascript">
var add=(function(){
var counter=0;
return function(){return counter +=1;}
})();
function myFunction(){
document.getElementById("demo").innerHTML=add();
}
</script>
九、ECMAScript 基础
ECMAScript 原始类型
ECMAScript 有 5 种原始类型（primitive type），即 Undefined、Null、Boolean、Number 和 String。
typeof 运算符
对变量或值调用 typeof 运算符将返回下列值之一：
- undefined - 如果变量是 Undefined 类型的
- boolean - 如果变量是 Boolean 类型的
- number - 如果变量是 Number 类型的
- string - 如果变量是 String 类型的
- object - 如果变量是一种引用类型或 Null 类型的
1、Undefined 类型
function testFunc() {
}
alert(testFunc() == undefined); //输出 "true"
2、Null 类型
undefined 是声明了变量但未对其初始化时赋予该变量的值，null 则用于表示尚未存在的对象
3、Boolean 类型
var bFound = true;
var bLost = false;
4、Number 类型
