10python基础进阶之javascript

一、javascript基础初级
1、三种JavaScript引入页面的方式
1、内嵌式

    2、外链式
        html文件中:
            <script src="script.js" type="text/javascript"></script>
        js文件中:
            alert("外链式!");

    3、行内式(js的行内式写法依附于事件)
        <button onclick="alert('行内式');">按钮</button>


2、js的注释
    //单行注释
    /*
        多行注释
        多行注释
        多行注释
    */
   
3、定义变量
    var 变量名 = 数据;
    var 变量名1 = 数据1,变量名2=数据2, ....;

    var a = 10;
    var b = 20, c = 30;


    变量命名规范:
    1、由字母、数字、下划线和美元符号$组成,不能由数字开头
    2、区分大小写, 即odiv和Odiv是了两个不同的变量
    3、避开关键字

4、函数的定义和调用:
    函数定义的格式:
        function 函数名(){
            函数体
        }

    函数调用的格式:
        函数名()


    函数的参数和返回值:
        function mySum(a, b){
            return a + b;
        }
        var ret = mySum(10, "20");
        alert(ret);

5、变量作用域
    注意:定义变量一般都用var关键字
        var a = 10;  //全局变量,在函数外部定义的变量,可以在函数内外部使用
//      alert(a);
        function func() {
//            alert(a);
            var a = 20;
            alert(b); //局部变量,没在函数内部定义的变量,默认只能在函数内部使用
        }
        func();
        alert(b);  //函数内部定义的变量,不能再外部直接使用


6、条件判断语句
    单条件判断语句:
    if(条件){
        条件成立时候执行的代码
    }else{
        条件不成立时候执行的代码
    }


    多条件判断语句:
    if(条件1){
        条件1成立时候执行的代码
    }else if(条件2){
        条件2成立时候执行的代码
    }else if(条件3){
        条件3成立时候执行的代码
    }else if(条件4){
        条件4成立时候执行的代码
    }else{
        条件不成立时候执行的代码
    }

7、运算符:
    //        var a = 10;
    //        if(a==="10"){
    //            alert("ok");
    //        }

            // == 判断值是否相等,不判断数据类型
            // ===  三等号(全等号) 判断值是否相等,并且会判断数据类型, 数据类型相同,才算相等

            var b = 1;
    //        alert(b>=90 && b<=100);
    //        alert(b<90 || b>100);
            alert(!true);

8、js中获取元素的方法
    
    /*js 可以对页面中的数据在前端进行操作,操作数据之前需要先获取元素:
    * document.getElementById("odiv");  表示获取id是odiv的这个元素
    * */
    var odiv = document.getElementById("odiv");   /*这样就表示选择到id是odiv的这个标签*/


9、js控制元素文本和css样式
    /*
        选择到标签之后,通过 .innerHTML来修改标签中的html
    */
    odiv.innerHTML = "javascript";

    /*
        选择到标签之后,通过 .style.css样式属性名 来修改标签的样式属性
    */
    odiv.style.width = "300px";    //修改元素宽度为300px
    odiv.style.fontSize = "20px";   //修改元素字体大小为20px


10、js的入口函数
    如果书写的js代码放在<head></head>标签中,
    考虑到由于页面标签还没读取到,导致找不到标签的问题,
    我们会用window.onload来作为入口函数,
    表示等到页面加载完毕,才来执行function中大括号里的代码:

    window.onload = function(){
        var odiv = document.getElementById("odiv");

        odiv.innerHTML = "javascript";
    }

    总结:
    window.onload是页面所有元素加载完成的事件,
    可以对它设置函数从而等页面加载完后,再执行这个函数里面的代码

二、javascript基础高级

1、js中for循环

    循环语句是用来重复执行某段代码的
    需求:实现循环弹出3次OK

    (了解)while循环
        var i = 0;
        while(i<3){
            alert("ok"+i);
            i++;
        }

    (了解)do...while循环
        var i = 0;
        do{
            alert("ok"+i);
            i++;
        }while(i>3)
        注:do...while语句即使条件不成立,大括号的语句也至少会执行1遍

    (最常用)for循环
        for(var i=0; i<3; i++){
            alert("ok"+i);
        }


2、数组
    数组的作用:保存多个数据

    定义的格式:
        var arr = new Array(10, 20, 30, "abc", true);  //如果参数只是一个数字,则表示的是数组的长度
    或者:
        var arr = [10, 20, 30, "abc", true];

    
    通过 数组名[下标] 获取对应的数据  例如: arr[1] 的值为10
    数组名.length   得到数组的元素的个数  例如: arr.length 的值为5


    arr[1] = 100;  //修改下标为1的元素的值为100
    alert(arr);  //修改后arr为[10, 100, 30, "abc", true]


3、数组的操作
    var arr = [10, 20, 30, "abc", true];

    增:
        arr.push(50); // 数组.push(数据)  往数组最后追加一个数据
        alert(arr);
    删:
        var ret = arr.pop();  //数组名.pop()把数组最后一个数据删除,并且返回这个被删除的数据
        alert(arr); 10,20,30,"abc",true,50
        alert(ret); //true


    数组名.splice(要操作的第一个元素的下标,删除多少个元素,要增加的元素)

        问题:
            1、在下标为1的位置插入888这个数据
            2、删除下标为2的数据
            3、把20,30,abc换成 7,8,9,10

        arr.splice(1, 0, 888);  //在下标为1的位置插入888这个数据,10,888,20,30,abc,true (arr.splice(指定下标, 0, 数据)可以在指定位置增加元素)
        arr.splice(2,1);  // 删除下标为2的数据,10,20,abc,true (arr.splice(指定下标, 1)可以删除指定位置的元素)
        arr.splice(1,3,7,8,9,10); // 10,7,8,9,10,true


    // 获取元素在数组中的下标 ,可以用来判断元素在这个数组中
    数组名.indexOf(元素);   数组名.arr.indexOf(元素)
        var i = arr.indexOf(30);   //获取元素在数组中第一次出现时候的下标
        alert(i); //2
        注:如果数组中没有这个元素,则.indexOf()方法返回-1

    数组的遍历:
        var arr = [10, 20, 30, "abc", true];

        for(var i=0;i<arr.length;i++){    //i是每个元素的下标
            alert(arr[i]);
        }


4、字符串拼接
    var name = "python";
    var age = 28;
    var job = "AI";
    alert(name + "的年龄是"+ age +",工作是" + job);


    var str1 = "30";
    var num1 = 20;
    var num2 = 50;
    alert(str1+num1+num2); //302050
    alert(num1+num2+str1); //7030



    var str1 = "30.9";
    var num1 = 20;
    alert(parseInt(str1) + num1); //50     parseInt() 转化成整数(去掉小数点和后面的小数位)
    alert(parseFloat(str1)+num1); //50.9  


    // 判断元素是不是包含某个子串 
    var str1 = "hello world";
    alert(str1.indexOf("e"));  //2  获取字符e在字符串中第一次出现的下标,如果没有出现过返回-1




5、定时器
    作用: js提供了定时器,可以用来做页面的动画效果

    1、单次定时器
        setTimeout(参数1,参数2)
        参数1是函数,参数2是毫秒数,表示多少毫秒之后执行参数1函数里面的代码,只执行1次
        1秒等于1000毫秒

        例如:
        function my_alert() {
            alert("ok!");
        }
        setTimeout(my_alert, 2000);  表示多少秒之后执行boom函数里面的代码,只执行1次

        也可以直接这么写:
        setTimeout(function(){
            alert("ok!");
        }, 2000);

    2、多次定时器
        setInterval(参数1,参数2)
        参数1是函数,参数2是毫秒数,表示每隔多少秒执行参数1函数里面的代码,不停地执行

        function my_alert() {
            alert("ok!");
        }
        setInterval(my_alert, 2000);  表示每隔多少秒执行boom函数里面的代码,不停地执行

        也可以直接这么写:
        setInterval(function(){
            alert("ok!");
        }, 2000);

    3、清除定时器
        //指定清除(关闭)oTimer这个循环定时器,oTimer里面的代码就会停止执行
        cleatInterval(指定定时器)
        
        例如: 
        var oTimer = null;
        oTimer = setInterval(my_alert, 2000);  
        cleatInterval(oTimer)
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值