python 学习_第五模块 javascripts

python 学习_第五模块 javascripts

1 js的基本数据类型

//  1number 数值类型
var a = 3;
var b = 1.23;
var c = -123;
var d = 0;
alert(typeof a); //number
alert(typeof b); //number
alert(typeof c); //number
alert(typeof d); //number

// 2 string 类型
var a = "aaaaa";
alert(typeof a);


// Boolean
var c = 3<=4;
alert(c)  // true
alert(typeof c) // boolean


//undefined
var x;
alert( x) //undefined
alert(typeof x)  //undefined


//空对象
var y = null;
alert(y);   // null
alert(typeof y); //object

2 js的加 减 乘 取余 除

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>运算符</title>
</head>
<body>
    <script type="text/javascript">
        var x = 10;
        var y = 3;
        var sum  = x + y;
        alert(sum) // 13

        // +  -  *  %     /   
        // 加 减 乘  取余  除

        var test1  = x % y;
        alert(test1) //1
    </script>
</body>
</html>

3 js的递增 递减 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>递增递减</title>
</head>
<body>
    <script type="text/javascript">
        var x = 4;
        // x = x + 1;
        // x +=1;
        x++;
        alert (x);// 5

        var c = 10;
        c += 5;
        c -= 2;
        c *= 4;
        c /= 3;
        alert(c);

    </script>
</body>
</html>

4 js的字符串

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>字符串</title>
</head>
<body>
    <script type="text/javascript">
        var  str1 = "one";
        var  str2 = "two";

        var joined = str1 + ' ' + str2 + 'san'
        alert(joined) //one twosan
    </script>
</body>
</html>

5 js的数值与字符串

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>数字和字符串</title>
</head>
<body>
    <script type="text/javascript">
        //1  当数字和字符串相加时, 数字也会转换成字符串
        var a = "123" + 456
        alert(a) // 123456
        alert(typeof a) // string

        // 2 隐式
        var num = 234;
        var myStr = num + '';
        alert(typeof myStr ); // string

        // 3 toString()  数字转字符串
        var myStr2 = num.toString();
        alert(typeof myStr2);  // string

        // 字符串转数值
        var a = "123" 
        var myNum = Number(a);
        alert(typeof myNum) //number

    </script>
</body>
</html>

6 js的数组

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>数组Array</title>
</head>
<body>
    <script type="text/javascript">
        var shopping = ['香蕉','苹果','牛奶','红牛']; 
        // alert(typeof shopping)  //object
        var rand = ['tree','345',[1,2,3]];

        // 访问
        var item1 = rand[0];
        console.log(item1);  // tree

        rand[0] = '榴莲';
        console.log(rand);

        var a = rand[2][2];
        console.log(a);  //3

        // 访问数组的长度 for
        console.log('数组的长度是:' + rand.length);  // 数组的长度是:3
    </script>
</body>
</html>

7 js的条件判断

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>条件判断</title>
</head>
<body>
    <script type="text/javascript">
        var weather = 'rainy';

        if (weather ==='rainy' ) {
            console.log('天气下雨了,在家里呆着');
        }
        else if (weather ==='sunny' ) {
            console.log('天气非常棒,可以出去玩耍')
        } 
        else if (weather ==='snowing' ) {
            console.log('天气下雪了,可以出去滑雪')
        } 
        else {
            console.log('输入的天气有错,重新输入');
        }
    </script>
</body>
</html>

8 js的比较运算符

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>比较运算符</title>
</head>
<body>
    <script type="text/javascript">

        // === !==  ==  !=

        var a = 5;
        var astr = '5';
        var isequal = a === astr;
        console.log(isequal)  // false

       console.log(4 <= 4);
    </script>
</body>
</html>

9 js的逻辑运算符

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>比较运算符</title>
</head>
<body>
    <script type="text/javascript">
        var weaher = 'sunny';
        var temp = 22;
    //  && 逻辑或 并且      || 逻辑或   !true

       // &&
        if (weaher ==='sunny' && temp >30) {
            console.log('在家里吹空调,吃西瓜');
        }
        else if (weaher ==='sunny' && temp <=30){
            console.log('天气不错 可以出去玩')
        }

        // ||
        var mathscore = 77;
        var englishscore = 80;
        if (mathscore >=80 || englishscore >=85) {
            console.log('可以出去玩')
        }
        else
            {   console.log('在家写作业')}

        // false
        var  islogin = false;
        alert(!islogin);

        if (!islogin) {
            console.log('用户已登录')
        }

    </script>
</body>
</html>

10 switch 语句 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>switch语句</title>
</head>
<body>
    <script type="text/javascript">
    var weather = 'rainy';
    switch(weather) {
        case 'summy':
            alert(1);
            break;
        case 'rainy':
            alert(2);
            //  编写 switch语句  小心break  case 穿透
            break;
        case 'snowing':
            alert(3);
            break;
        default:
            alert(4);
            break;
    }        
    </script>
</body>
</html>

11 三元运算符

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>三元运算符</title>
</head>
<body>
    <script type="text/javascript">
    var result = 1 < 2 ?  '真的' : '假的';
    alert(result)  
    </script>
</body>
</html>

12 for循环

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>for 循环</title>
</head>
<body>
    <script type="text/javascript">
        var i;
        var sum = 0;
        for (i =1; i <= 100; i++){
            sum += i;
        }
        console.log(sum); //5050


        var shopping = ['香蕉','苹果','牛奶','红牛'];
        var j;
        for (j = 0; j <shopping.length; j++) {
            var htmlstr = '<h1>' + shopping[j] + '</h1>'
            console.log(htmlstr);
            document.write(htmlstr);
        }


    </script>
</body>
</html>

13 break和continue

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>break和continue</title>
</head>
<body>
    <script type="text/javascript">
        // break
        var x = 0;
        for (;;){
            if (x > 100){
                break
            }
            x++;
        }
       alert(x);          
       
       //continue
        var sum = 0;
        for (var i = 1; i <=10; i++) {
            if (i ===8) {
                continue;
            }
            sum = sum + i;
        }
        alert(sum)

    </script>
</body>
</html>

14 while循环 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>while循环</title>
</head>
<body>
    <script type="text/javascript">
        
        var sum = 0;  //计算的和
        var  n  = 99; //初始的奇数
        while (n > 0) {
            sum += n;
            n -= 2;
        }
        alert(sum);
        
        // do while  先执行一次, 再判断
        var sum = 0;
        var i = 1;
        do {
            sum  = sum + i;
            i ++;
            console.log(sum);
            alert(sum);
        } while (i <=1);

    </script>
</body>
</html>

15 函数

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>函数</title>
</head>
<body>
    <script type="text/javascript">
        function test(isbad ){
            alert(isbad);
            
            if (isbad){
                alert('点个外卖');
            }
            else {
                alert('做饭了')
            }
        }
        var bad = false;
        test(bad);
    </script>
</body>
</html>

16 函数返回值和函数表达式

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>函数返回值和函数表达式</title>
</head>
<body>
    <script type="text/javascript">
        function add(a,b){
            var sum = a+b;
            return sum 
        }
        function sub(a,b){
            return a-b;
        }
        function mult(a,b){
            return a*b;   
        }
        // function div(a,b){
        //     return a/b;
        // }

         // 函数表达式 
        var div = function(a,b) {
            return a/b;
        }


        var  r= add(3,2);
        var  r2= sub(3,2);
        var  r3= mult(3,2);
        var  r4= div(3,2);

        console.log(r);
        console.log(r2);
        console.log(r3);
        console.log(r4);

    </script>
</body>
</html>

17 函数作用域

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>函数作用域</title>
</head>
<body>
    <script type="text/javascript">
        var a = 1;
        function add(){
            var b = 3;
            console.log(a);
        }
        add();
        // console.log(b);
    </script>
</body>
</html>

2

first.js

(function(){
    var name = 'ysl';
    var hello = function (){
        alert('hello ' + name);
    }
    window.first = hello;
})();

second.js

(function(){
    var name = 'jack';
    var hello = function(){
        alert('hello ' + name);
    }
    window.second = hello;
})();
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>函数作用域</title>
</head>
<body>
    <script type="text/javascript"  src="js/first.js"></script>
    <script type="text/javascript"  src="js/second.js"></script>
    <script type="text/javascript">
        console.log(window);
        first();
        second();
    </script>
</body>
</html>

18 对象

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>object</title>
</head>
<body>
    <script type="text/javascript">
        var person = {
            name: 'ysl',
            age: 18,
            sex:'',
            fav : function(a) {
                alert('爱好姑凉')
                return '姑凉' + a + ''
            }
        }
        console.log(person);
        console.log(person.name);
        console.log(person.fav(18));
    </script>
</body>
</html>

19  js内置函数

<!DOCTYPE html>
<html>
<head>
    <title>js常用的内置对象</title>
</head>
<body>
    <script type="text/javascript">
        var colors = new Array();
        // var colors = [];
        var colors2 = [];
        document.write('1111');

        //  js 提供构造函数
        var  colors = new Array();
        var colors2 = [];
        if (Array.isArray(colors)) {
            colors[0] = 'red';
            colors[1] = 'blue';
            colors[2] = 'yellow';
            var a = colors.toString();
            console.log(a);
            console.log(typeof a);
            console.log(colors);
        }
    </script>
</body>
</html>

20  数组的方法

1 map filter forEach

<!DOCTYPE html>
<html>
<head>
    <title>map filter forEach</title>
</head>
<body>
    <script type="text/javascript">
        // filter 方法
        var numbers = [1,2,10,7,5,11,44];
        var filterResult = numbers.filter(function(item,index,array){
            console.log(item);
            console.log(index);
            console.log(array);

            return item > 10;
        });
        console.log(filterResult);

        // map()  方法
        var mapresult = numbers.map(function(item,index,array){
                return item *2;
        })
        console.log(mapresult);

        for (var i = 0; i < mapresult.length; i++){
            console.log(mapresult[i]);
        }

        // forEach
        mapresult.forEach(function(item,index){
            console.log(item);
        })

    </script>
</body>
</html>

2) 数组常用的方法

<!DOCTYPE html>
<html>
<head>
    <title>数组常用的方法</title>
</head>
<body>
    <script type="text/javascript">
        var arr = [1,2,3];
        var a = arr.toString(); // 变成string  1,2,3
        var b = arr.toLocaleString(); //1,2,3
        console.log(a);
        console.log(b);    


        var person1 = {
            toLocaleString: function(){
                return 'mjj';
            },
            toString:function(){
                return '么挤挤';
            }
        }

        var person2 = {
            toLocaleString: function(){
                return '隔壁老王';
            },
            toString:function(){
                return '隔壁老李';
            }
        }        

        var people = [person1,person2];
        console.log(people);
        console.log(people.toString());       //么挤挤,隔壁老李
        console.log(people.toLocaleString()); //mjj,隔壁老王



    </script>
</body>
</html>

3)数组常用的方法

<!DOCTYPE html>
<html>
<head>
    <title>数组常用的方法</title>
</head>
<body>
    <script type="text/javascript">
        // 分割字符串
        var colors = ['red','blue','green'];
        var a = colors.join('|');
        console.log(a); //red|blue|green



        // 栈 lifo  push()   pop()  队列方法
        // push 相当于 Python的append
        var newlength = colors.push('purple');
        console.log(newlength); //4
        console.log(colors); // (4) ["red", "blue", "green", "purple"]

        // pop() 从数组末尾删除最后一项
        var lastItem  = colors.pop();
        console.log(lastItem); //purple
        console.log(colors); // (3) ["red", "blue", "green"]




          //  队列fifo 先进先出  unshift()  shift()
          newlength = colors.unshift('yellow');
          console.log(newlength);  //4
          console.log(colors); //(4) ["yellow", "red", "blue", "green"]

          var firstItem = colors.shift();
          console.log(newlength);  //4
          console.log(colors);     //  (3) ["red", "blue", "green"]


          // 数组倒序
          var values = [0,3,2,16,15,10];
          function compare1(a,b){
              return a -b;
          };

          function compare2(a,b){
              return b -a ;
          };
          values.sort(compare1); //升序
          console.log(values);  //[0, 2, 3, 10, 15, 16]

          values.sort(compare2);//降序
        console.log(values); //[16, 15, 10, 3, 2, 0]

    </script>
</body>
</html>

4 )数组常用的方法

<!DOCTYPE html>
<html>
<head>
    <title>数组常用的方法</title>
</head>
<body>
    <script type="text/javascript">
        // 操作方法 concat()  slice() splice()
        // 1 concat 数组合并
        var colors = ['red','blue'];
        // var newColors = colors.concat('green');
        newColors = colors.concat({name:'zhangsan'});
        console.log(newColors);

        // 2 slice()
        var colors = ['red','blue','yellow'];
        newcolors = colors.slice(1,2); // ["blue"]
        console.log(newcolors);

        //  3 splice()   删除 插入 替换
        // 3.1 删除
        var names = ['张三','李四','mjj','alex'];
        // names.splice(0,2);
        // console.log(names); //["mjj", "alex"]

        // 3.2  插入
        // names.splice(1,0,'熊大大','jack');
        // console.log(names); //["张三", "熊大大", "jack", "李四", "mjj", "alex"]

        //3.3 替换
        names.splice(1,1,'xiongdada');
        console.log(names); //["张三", "xiongdada", "mjj", "alex"]

        // 4 位置方法   indexOf()   lastIndexOf()
        var names = ['张三','mjj','王五','mjj','赵六'];
        alert(names.indexOf('mjj')); //1
        alert(names.lastIndexOf('mjj')); //3
        alert(names.indexOf('mjj',2)); //3
        alert(names.lastIndexOf('mjj',2)); //1
        alert(names.lastIndexOf('mjjxxxx',2)); //如果查不到结果 返回-1

    </script>
</body>
</html>

21 map方法应用

<!DOCTYPE html>
<html>
<head>
    <title>map方法应用</title>
</head>
<body>
    <script type="text/javascript">
        var oldArray = [
            {
                name:'张三',
                age: 17
            },
            {
                name:'mjj',
                age: 29
            },
            {
                name:'李四',
                age: 30
            }
        ]
        var newNames = oldArray.map(function(item,index){
            return item.name
            })
        var newAges = oldArray.map(function(item,index){
            return item.age
            })
        console.log(newNames);
        console.log(newAges);
 

    </script>
</body>
</html>

22 字符串常用方法

<!DOCTYPE html>
<html>
<head>
    <title>字符串的常用方法</title>
</head>
<body>
    <script type="text/javascript">
        var str = 'hello world';
        console.log(str.length);    // 11
        console.log(str.charAt(1)); //e 
        console.log(str.charCodeAt(1)) //101 获取指定的字符对应的编码
        console.log(str.concat(' mjj',' jack')); //拼接字符串  通常情况不适用它来做拼接,使用 +来做多个字符的拼接
 
         console.log(str.slice(2)); // llo world
        console.log(str.substring(2)); // llo world
        console.log(str.substr(2)); //  llo world

        console.log(str.slice(2,4));  // ll
        console.log(str.substring(2,4)); // ll


        var str = 'hello world';
        console.log(str.indexOf('o')); //4
        console.log(str.lastIndexOf('o')); //7
        console.log(str.indexOf('o',6)); //7
        console.log(str.lastIndexOf('o',6)); //4

        // trim()清除当前 字符串的前后后格
        var str = '       hello world       ';
        console.log(str.trim()); //hello world
        console.log(str);          //        hello world      
        var str = 'Hello Mjj';
        console.log("------",str.toLowerCase()); //hello mjj
    </script>
</body>
</html>

23 字符串查找

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查找当前字符e在字符串中的所有位置</title>
</head>
<body>
    <script type="text/javascript">
        // 查找e 在str中的所有的位置
        var str = 'He unfolded the map and set it on the floor.';
        var arr = [];
        var pos = str.indexOf('e'); //1
        console.log(pos);
        while(pos > -1){
            // 找到当前e字符对应的位置
            arr.push(pos);
            pos = str.indexOf('e',pos+1);
        }
        console.log(arr);
    </script>
    
</body>
</html>

24 date

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>date日期对象</title>
</head>
<body>
    <script type="text/javascript">

        /*
        // 1.四种方式创建
        var now = new Date();
        console.log(now);  //Tue Jul 23 2019 11:48:08 GMT+0800 (中国标准时间)
        var xmas = new Date('December 25,1995 13:30:00');
        console.log(xmas); //Mon Dec 25 1995 13:30:00 GMT+0800 (中国标准时间)
        var xmas = new Date(1995,11,25);
        console.log(xmas); //Mon Dec 25 1995 00:00:00 GMT+0800 (中国标准时间)
        var xmas = new Date(1995,11,25,14,30,0);
        console.log(xmas); //Mon Dec 25 1995 14:30:00 GMT+0800 (中国标准时间)
        */
        var now = new Date();
        // 常用方法
        console.log(now.getDate()); //获取月份的第几天 (1~31)
        console.log(now.getMonth()); //获取月份 (0~11)
        console.log(now.getFullYear()); //获取年份
        console.log(now.getDay()); //获取一星期中的第几天(0 ~ 6)
        console.log(now.getHours()); //获取小时(0~23);
        console.log(now.getMinutes()); //获取分钟(0~59);
        console.log(now.getSeconds()); //获取秒(0~59);

        // 日期格式化方法
        console.log(now.toDateString()); //星期几  月 日  年
        console.log(now.toTimeString()); //时 分 秒 时区

        // 常用
        console.log(now.toLocaleDateString()); // 
        console.log(now.toLocaleTimeString()); //
        console.log(now.toLocaleString());


        console.log(now.toUTCString());


    </script>
    
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>返回用数字时钟格式的时间</title>
</head>
<body>
    <script type="text/javascript">
        // 6:27:35 P.M.
        // 6:30:01 P.M.
        // 6:04:01 A.M.
        // :0    4
        //  :   30
        
        function nowNumTime(){
            var now = new Date();
            var hour  = now.getHours(); //0 ~ 23.   //19
            var minute = now.getMinutes();
            var second = now.getSeconds();
            // 18 > 12  ? 18-12  : 8
            var temp = '' + (hour > 12 ?  hour - 12 : hour);
            if(hour === 0){
                temp = '12';
            }
            temp  = temp +(minute < 10 ?  ':0': ":")+ minute;
            temp  = temp +(second < 10 ?  ':0': ":")+ second;
            temp = temp + (hour >= 12 ?  ' P.M.': " A.M.");
            return temp;
        }
        var nownum = nowNumTime();
        console.log(nownum);
    </script>
    
</body>
</html>

25 字符串和数值相互转换

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字符串和数值相互转换</title>
</head>
<body>
    <script type="text/javascript">
        var str = '13131.9090013';
        // 字符串转数值类型
        console.log(parseInt(str)); //13131
        console.log(parseFloat(str)); //13131.9090013
        console.log(typeof parseFloat(str)); //number
        var a  = Number(str); 
        console.log(isNaN(a)); //NaN   false

        var  num = 1313.179;
        // 强制类型转换
        console.log(num.toString()); //string
        console.log(typeof num.toString()); //1313.179
        console.log(String(num)); //1313.179

        // 隐式转换
        console.log('' + num); //1313.179
        console.log(''.concat(num)); //1313.179
        console.log(Number(num.toFixed(2))); //1313.18

    </script>
</body>
</html>

26 Globle对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Globle对象</title>
</head>
<body>
    <script type="text/javascript">
        // URI
        var uri = 'http://www.apeland.cn/web index.html?name=zhangsan';
        // encodeURIComponent()编码 使用最多的方法
        console.log(encodeURI(uri)); 
        console.log(encodeURIComponent(uri));
        
        // 解码 decodeURIComponent()
        // decodeURI(encodeuri);
        // decodeURIComponent(encodeuri);

    </script>
    
</body>
</html>

27 Math对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Math对象</title>
</head>
<body>
    <script type="text/javascript">
        // Math
        // var a = 3;

        // 方法  min() max()
        var max = Math.max(3,34,56,21);
        var min = Math.min(3,34,56,21);

        var arr = [1,2,32,23,45,21];
        var max = Math.max.apply(null,arr);
        var min = Math.min.apply(null,arr);

        // var max=  Math.max(arr[0],arr[1],arr[2]);
        console.log(max);
        console.log(min);


        // ceil()  floor() round()
        var num = 24.8;
        console.log(Math.ceil(num)); //天花板函数 向上取整
        console.log(Math.floor(num)); //地板函数 向下取整
        console.log(Math.round(num)); //标准的四舍五入


        // 随机数 random()     0 <= random<1
        console.log(Math.random());

        // 1.获取min到max之间的整数

        // 2.获取随机颜色  rgb(0~255,0~255,0~255);

        // 3.随机验证码   四位  数字+ 字母 (大写)



    </script>
</body>
</html>

28 练习

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>练习</title>
</head>
<body>
    <script type="text/javascript">
        
        // 1.获取min到max之间的整数 (1~100)
        function random(max,min){
            return Math.floor(Math.random() * (max-min) + min);
        }

        // 2.获取随机颜色  rgb(0~255,0~255,0~255);
        function randomColor(){

            // var result
            var r = random(0,256),g = random(0,256),b = random(0,256);
            // 模板字符串 ``
            var result = `rgb(${r},${g},${b})`;
            return result;
        }
        var rc = randomColor();
        console.log(rc);
        document.body.style.backgroundColor = rc;


        // 3.随机验证码   四位  数字+ 字母 (大写) 65Yz
        function creatCode(){
            // 设置默认的空的字符串  
            var  code = '';
            // 设置长度 
            var codeLength = 4;
            var randomCode = [0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R', 'S','T','U','V','W','X','Y','Z'];
            for(var i  = 0; i < codeLength; i++){
                // 设置随机范围 0~36
                var index = random(0,36);
                code +=  randomCode[index];
            }
            return code;
        }
        var rndcode = creatCode();
        console.log(rndcode);
        document.write(`<h1>${rndcode}</h1`)

    </script>
    
</body>
</html>
原文地址:https://www.cnblogs.com/augustyang/p/11206997.html