• JavaScript学习----1.基础篇


    1.JavaScript简介:

    JavaScript是一种基于对象和时间驱动的,并具有安全性能的脚本语言。可以用来向HTML页面中添加交互行为;解释性语言,边执行边解释。总而言之:JavaScript能跨平台,跨浏览器驱动网页,与用户交互。

    2.JavaScript的基础编程:

    2.1JavaScript的四种输出方式:

     1 <html lang="en">
     2 <head>
     3     <meta charset="UTF-8">
     4     <title>
     5         javascript的四种输出方式:
     6     </title>
     7     <script>
     8         //1.弹窗输出(浏览器事件):
     9         alert("Hello world!");
    10 
    11         //2.控制台输出(文档对象事件):
    12         console.log("Hello!");
    13 
    14         //3.输出到网页上(HTML语言)
    15         document.write("啦啦啦~");
    16 
    17         //4.输出到控制台,错误示例 id2没定义
    18         //document.getElementById("id2").innerHTML='1';
    19     </script>
    20 </head>
    21 <body>
    22 
    23 <div id="id2"></div>
    24 
    25 <h1 id="id1">
    26     哈哈哈!
    27 </h1>
    28 
    29 <script>
    30     document.getElementById("id2").innerHTML='第四种获得方式';
    31 </script>
    32 
    33 </body>
    34 </html>

    2.2数据类型:

    Number:JavaScript不区分整数型和浮点型,统一用number表示;

          (NaN:不是数,当无法计算结果时用NaN表示);

          (Infinity:表示无限大);

    String:单引号或者双引号括起来的任意文本;

    Boolean:true  /  false;

     1 <html lang="en">
     2 <head>
     3     <meta charset="UTF-8">
     4     <title>数据类型</title>
     5 
     6     <script>
     7         var a=1;
     8         var b=0.2;
     9         var c=true;
    10         var d="hello";
    11         var array=new Array();
    12         document.write("<h1>"+typeof(a)+"</h1>"+"</br>");
    13         document.write(typeof(b)+"</br>");
    14         document.write(typeof(c)+"</br>");
    15         document.write(typeof(d)+"</br>");
    16         document.write(typeof(array)+"</br>");
    17 
    18     </script>
    19 </head>
    20 <body>
    21 
    22 
    23 </body>
    24 </html>

     String对象:charAt (int),空格不作为计数的内容。

     1 <head>
     2     <meta charset="UTF-8">
     3     <title>Title</title>
     4     <script>
     5         var str="hello world!";
     6         document.write(str.charAt(6)+"不计数空格");
     7         document.write("<br>");
     8         document.write(str.indexOf("w")+"从0开始");
     9         document.write("<br>");
    10         document.write(str.length);
    11         document.write("<br>");
    12         document.write(str.substring(2,8));
    13         document.write("<br>");
    14         document.write(str.split(" "));
    15     </script>
    16 </head>
    17 <body>
    18 </body>
    19 </html>

    数组的测试:

     1 <html lang="en">
     2 <head>
     3     <meta charset="UTF-8">
     4     <title>Title</title>
     5 
     6     <script>
     7         var array=new Array(5);
     8         array[0]="苹果";
     9         array[1]=1;
    10         array[2]=2.1;
    11         array[3]=true;
    12         array[4]=4;
    13 
    14         console.log(array[0]);
    15 
    16     </script>
    17 
    18 </head>
    19 <body>
    20 
    21 </body>
    22 </html>

    函数的编写:parseInt(" str")-->字符转化成数字;

    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
        <script>
    
            function study(){
                for(var i=0;i<3;i++){
                    document.write(i+"<br>");
                }
            }
    
            function study2(num){
                for(var i=0;i<num;i++){
                    document.write(i+"<br>");
                }
            }
    
            // parseInt("a"),将字符串转化为数字
            function  study3(a,b){
                aa=parseInt(a);
                bb=parseInt(b);
                return aa+bb;
            }
            var a=prompt("请输入加数1","1");
            var b=prompt("请输入加数2","2");
            c=study3(a,b);
            document.write("所加结果为:"+c+"<br>");
        </script>
    
    </head>
    <body>
    
    <input type="button" onclick="study2(prompt('请输入循环次数'))" value="点击我出现循环效果">
    </body>
    </html>

    加载事件测试:

    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
        <script>
    
            function  f(){
                document.write("成功进入该页面!");
            }
        </script>
    
    </head>
    <body onload="f()">
    
    </body>
    </html>

    一个操作数组的综合示例:

     1 <head>
     2     <meta charset="UTF-8">
     3     <title>Title</title>
     4     <!--//1.创建一个string对象-->
     5     <!--//2.通过split分割为数组-->
     6     <!--//3.修改数组元素的值-->
     7     <!--//4.打印查看-->
     8     <script>
     9         //1.定义一个字符串
    10         var str="苹果,香蕉,草莓,西瓜,樱桃";
    11         //2,字符串转成数组
    12         var array=str.split(",");
    13         document.write(array[0]+"<br>");
    14         document.write(array[1]+"<br>");
    15         document.write(array[2]+"<br>");
    16         document.write(array[3]+"<br>");
    17         document.write(array[4]+"<br>");
    18         //3.修改数组元素
    19         array[0]="苹果的霸霸";
    20         document.write(array[0]+"<br>");
    21         //4.排序
    22         var a="1,5,3,6,8,0";
    23         var array=a.split(",");
    24         document.write(array);
    25         array.sort();
    26         document.write("<br>");
    27         document.write(array[5]+"<br>");
    28         console.log(array);
    29         //5.数组后面追加元素
    30         array.push(5);
    31         document.write(array[6]);
    32     </script>
    33 
    34 
    35 </head>
    36 <body>
    37 
    38 </body>
    39 </html>
  • 相关阅读:
    一步一步本地化部署mapbox-gl
    快速排序
    合并排序
    冒泡排序
    选择排序
    插入排序
    mapbox-gl象形文字字体glyph生成
    前端html
    Mysql练习
    Mysql语句
  • 原文地址:https://www.cnblogs.com/xbfchder/p/11078509.html
Copyright © 2020-2023  润新知