前端学习ing

反过来存储数组的内容，声明一个新的数组newArr,取旧数组索引号的第四个（arr.length -1）,最后i--

var arr = ['red', 'green','blue','pink','purple']; var newArr = []; for (var i =arr.length - 1; i>=0 ; i--){     newArr[newArr.length] = arr[i] } console.log(newArr);

冒泡排序

var arr = [5,4,3,2,1]; for (var i = 0; i <= arr.length - 1;i  ){///外管列数     for (var j = 0; j <= arr.length - i; j  ){////内层管每次交换的次数         ///内部交换两个变量值，与较前一个和后一个数组元素         if (arr[j] < arr[j   1]){             var temp = arr[j   1];             arr[j] = arr[j   1];             arr[j   1] = temp;         }     } } console.log(arr);

函数

函数是包装可重复执行的代码块 目的是重复使用大量代码

function getSum(num1,num2){     var sum = 0;     for (var i = num1; i <=num2; i  ){         for(var i = num1; i<=num2; i  ){             sum  =i;         }         console.log(sum);     }     getSum(1,100);     getSum(10,50);     getSum(1,1000); }

利用函数求任意两个数之间的累积和

function getsum(num1,num2){     console.log(num1   num2); } getsum(1, 3); getsum(3, 8); ///求函数任意两个数之间的和 function getsums(start,end){     var sum = 0;     for (var i = start; i<=end; i  ){         console.log(sum);     } } getsums(1,100);

！多个参数用逗号隔开，形状参数可视为无声明变量

///函数形参数匹配参数 function getsuma(num1,num2){         console.log(num1,num2); } //如果上次按的数量与形参的数量一致，则正常输出 //如果实参的数量是多余的形参的数量，无论多余的数量如何，都会获得形参的数量 getsuma(1,2,3) //如果实参数小于形参数，num二是变量但无接收值，多余的形参定义为undefined，结果就是NaN getsuma(1)

函数内部不适合写输出句，因此函数结果需要返回

function 函数名（）{     return 需要返回的结果； } 函数名()； function getresult(){     return 666; } getresult(); console.log(getresult());  function cook(num1,num2){     return num1   num2; } console.log(cook(3,5))

两个数的最大值

function getmax(num1,num2){     return num1 > num2 ? num1 :num二、//三元表达式 } console.log(getmax(1,3));

function getsm(num1,num2){     return num1   num2;//return后面的代码不会执行     alert(这是不会执行的) } console.log(getsum(1,2)); //2.retun只能返回一个值
function fn(num1,num2){
    return num1,num2;//返回的结果是最后一个值
}
console.log(fn(1,2));

function getresu(num1,num2){
    return [num1+num2];
}//要返回俩个数的结果可以使用数列

函数如果有return就返回return后面的值，如果没有return就返回undefined

arguments存储了传递的所有实参

function fn(){
    console.log(arguments);//里面存储了所有传递过来的实参
    console.log(arguments.length);
    console.log(aeguments[2]);
    //遍历arguments
    for (var i = 0; i < arguemnts.length;i++){
        console.log(arguments[i]);
    }
}
fn(1,2,3);

伪数组，并不是真正意义上的数组

具有数组length的属性

按照索引的方式进行存储的

它没有真正数组的一些方法pop(),push()等

function getmax(){
    var max = arguments[0];
    for(var i = 1;i < arguments.length; i++){
        if (arguments[i] > max){
            max = arguments [i];
        }
    }
    return max;
}
console.log(getmax(1,2,3));
console.log(getmax(1,2,3,4,5));
console.log(getmax(1,2,3,4,5,6,7));

function reverse(arr){//反转
    var newArr = [];
    for (var i = arr.length - 1; i >= 0; i--){
        newArr[newArr.length] = arr[i];
    }
    return newArr;
}
var arr1 = reverse([1,2,3,4,5,6]);
console.log(arr1);
var arr2 = revere(['red','pink','nlue']);
console.log(arr2);

使用函数判断是否是闰年

function isrunnian(year){
    var flag = false;
    if(year % 4 == 0 && year % != 0 || year % 400 == 0){
        flag = true;
    }
    return flag;
}
console,log(isrunnian(2000))

//函数是可以相互调用的
function fn1(){
    console.log(11);
    fn2();
}
fn1();
function fn2(){
    console.log(22);
}

全局变量：在全局作用域下的变量，在全局作用下可以使用

注意：如果在函数内部，没有声明直接赋值的变量也属于全局变量

局部变量，只能在函数内部起作用，函数的形参也是个局部变量

函数内部如果直接定义一个变量没有声明的话也算一个全局变量

function fun(){
    var num1 = 10;//num1是局部变量，只能在函数内部使用
    num2 = 10;//num2是全局变量，因为没有声明
}
fun();
console.log(num2);

从执行效率来看全局变量和局部变量

（1）全局变量只有浏览器关闭的时候才会销毁，比较占用资源

（2）局部变量当我们程序执行完毕时候销毁，比较节约内存资源

//作用域链：内部函数访问外部函数的变量，采取的是链式查找的查找的方式来决定取那个值，这种结构我们称为作用域链。
var num = 10;
function fn(){//外部函数
      var num = 20;
    
    function fun(){//内部函数
        console.log(num);
    }
    fun();
}//谁离得近就执行谁
fn();

作用域链，一层一层往外翻的查找

案例1

var num = 10;
fun();

function fun(){
    console.log(num);
    var num = 20;
}
//相当于执行了以下操作
var num;

function fun(){
    var num;
    console.log(num);
    num = 20; 
}
num = 10;
fun();

案例2

f1();
console.log(c);
console.log(b);
console.log(a);

function f1(){
    var a = b = c = 9;
    console.log(a);
    console.log(b);
    console.log(c);
}
//预解析执行以下代码
function f1(){
    var a;
    a = b = c = 9;
    //相当于 var a = 9; b = 9; c = 9;
    console.log(a);
    console.log(b);
    console.log(c);
}
f1();
console.log(c);
console.log(b);
console.log(a);

对象是一组无需的相关属性和方法的集合，所有事物都是对象，例如：字符串、数值、数组、函数等。

var obj = {
    uname: 'yzc',
    age: 18,
    sex: '男',
    sayhi: function(){
        console.log('hi');
    }
}
//里面的属性或者方法我们采用键值对的形式 键 属性名 : 值 属性值
//多个属性或者方法中间用逗号隔开的
//方法冒号后面跟的是一个匿名函数
2.使用对象
//调用对象的属性，我们采取 对象名.属性名
console.log(obj.uname);
//调用属性还有一种方法 对象名['属性名']
console.log(obj['age']);
//调用对象的方法 sayhi 对象名.方法名() 记得加小括号()
obj.sayhi();

//利用构造函数创建对象
//外面需要创建的对象有 相同的属性：名字 年龄 性别 相同的方法：
//构造函数的语法格式
function 构造函数名(){
    this.属性 = 值;
    this.方法 = function(){}
}
new 构造函数名();//调用构造函数的方法
function Star(uname,age,sex){
    this.name = uname;
    this.age = age;
    this.sex = sex;
    this.sing = function(sang){
 	console.log(sang)
}
}
var abc = new Star("yzc",22,'女');//把构造函数写的结果传给abc
console.log(abc.name);
console.log(abc['name']);
abc.sing('qwer');
//1.构造函数名字首字母要大写
//2.构造函数不需要return就可以返回结果
//3.外面调用构造函数 必须使用new
//4.外面只要new Star() 调用函数就创建一个对象
//5.外面的属性和方法前面必须添加this

new关键字执行过程

//new构造函数可以在内存中创建了一个空的对象
//this就会指向刚才创建的空对象
//执行构造函数里面的代码，给这个空对象添加属性和方法
//返回这个对象
function Star(uname,age,sex){
    this.name = uname;
    this.age = age;
    this.sex = sex;
    this.sing = function(sang){
        console.log(sang);
    }
}

for(var k in obj ){
    console.log(k);//k 变量 输出 得到的是 属性名
    console.log(obj[k]);//obj[k] 得到的是属性值
}

时间函数

const date = new Date();//!!!!!必须写这句话才可以使用日期函数
console.log(date.getFullYear());
console.log(date.getMonth() + 1); //getMonth取值为0-11，所以要在getMonth（）后面加1
console.log(date.getDate());//几号
console.log(date.getDay());//周几，周日的话返回为0

const date = new Date();
const year = date.getFullYear();
console.log('今年是' + year +'年');
const date = new Day();
const arr = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
console.log('今天是' + arr[4]);

//格式化日期
const date  = new Date();
console.log(date.getHours());
console.log(date.getMinutes());
console.log(date.getSeconds());
//要求封装一个函数返回当前的时分秒
function getTime() {
    var time = new Date();
    var h = time.getHours();
    h = h < 10 ? '0' + h : h;
    var m = time.getMinutes();
    m = m < 10 ? '0' + m : m;
    var s = time.getSeconds();
    s = s < 10 ? '0' + s : s;
    return h + ':' + m + ':' + s  ; 
}
console.log(getTime());// 11:07:42

//获取body元素
var bodyEle = document.body;
console.log(bodyEle);
console.log(bodyEle);
//获取html元素
//var htmlEle = document.documentElement;
var htmlEle = document.documentElement;
console.log(htmlEle);

事件

    yzc
    

点击按钮来显示当前时间的年月日

    显示系统当前时间
    
某个时间
    
1123
    

innerText 和 innerHTML的区别

    

    

        1223
    
    

表单元素点击事件

    按钮
    ;
    

输入密码，显示密码，再显示回去

    

        ~
        
    
    

通过js来变化css

显示或隐藏文本框里的内容

    

        
        
请输入6~16位密码
    
    
    

排他思想，在一群元素中只使用某一元素

   按钮1
   按钮2
   按钮3
   按钮4
   按钮5
   按钮6
   按钮7
    
    

var div = document.querySelector('div');
//console.log(div.getTime);
console.log(div.getAtrribute('getTime'));
div.setAttribute('data-time',20);
console.log(div.getAtrribute('data-index'));
console.log(div.getAtrribute('data-list-name'));
//h5新增的获取自定义属性的方法，它只能是data开头的
//dataset是一个集合里存放了所有以data开头的自定义属性
console.log(div.dataset);
console.log(div.dataset.index);
console.log(div.dataset['index']);
//如果自定义属性里面有多个-连接的词，我们获取的时候采取驼峰命名
console.log(div.dataset.listName);
console.log(div.dataset['listName']);