javaScript

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <!-- javaScript
     01.ECMAScript:描述了语言的语法以及基本对象！
     02.DOM（文档对象模型）：处理网页内容的方法或者接口！
     03.BOW(浏览器对象模型)：与浏览器进行交互的方法或者接口！

     特点：
     01.无需预编译
     02.运行在客户端
     -->
    <script type="text/javascript">
      document.write("hello  javaScript!");
    </script>
</head>
<body>

</body>
</html>

使用js在浏览器中输出内容

<!DOCTYPE html>
<head lang="en">
    <meta charset="UTF-8">
    <title>引入js外部文件</title>
    <!-- 如果引入的外部js是其他的编码格式  则需要 设置  charset属性
     script标签 不允许  自身闭合
    <script type="text/javascript" src="js/first.js"></script>
    js代码 和  页面内容的执行 是有先后 顺序的！
    -->
    <script type="text/javascript">
        alert('您好！hello!');
    </script>


</head>
<!--body onload="alert('您好！hello!')"-->
<body>
  哈哈！ 验证是先看到哈哈！还是先弹出框......
</body>

</html>

3种方式引入js文件

alert('您好！hello!')

需要的外部文件

<button type="button" onclick="alert('您触发了点击事件')">点击之后弹出提示框</button>
 <input type="text" placeholder="请输入email" onfocus="alert('您触发了获取焦点事件')"
         onblur="alert('您触发了失去焦点事件')">

<!DOCTYPE html>
<head lang="en">
    <meta charset="UTF-8">
    <title>变量的使用</title>
    <script type="text/javascript">
       /* 声明变量*/
        var name='小黑';
        var age=50;
        var address='北京海淀';
        var date=new Date();
        /*输出语句*/
        alert("姓名==》"+name+"\n年龄===》"+age+"\n住址===》"+address);
       /* document属于window对象  是浏览器对象模型  所以换行应该使用<br/>*/
        document.write("姓名==》"+name+"<br/>年龄===》"
                +age+"<br/>住址===》"+address+"<br/>日期===》"+date);
    </script>
</head>
<body>
</body>

01.变量的使用

<!DOCTYPE html>
<head lang="en">
    <meta charset="UTF-8">
    <title>数据类型</title>
    <script type="text/javascript">
        /* 数据类型     typeof  判断数据的类型
        * 01.Undefined类型  只有一个值 就是 undefined
        *    变量没有被定义， 定义了没有被赋予初始值   ======》undefined
        *      var  names;
               alert(typeof names);
          02.Null  表示不存在的对象！和undefined的值 一致
            alert(null==undefined);
          03.Number :表示  整数和浮点数
             alert(typeof 50.0);
             alert(typeof 50);
         04.String: 单引号或者双引号  引起来的文本
             alert(typeof  '');
             alert(typeof  '1');
             alert(typeof  "1");
          05.Boolean  :true  false
            alert(typeof TRUE); //TRUE 当作了一个变量   undefined
           alert(typeof true);
          06.Object:对象  数组和null 都是Object
            var date=new Date();
             alert(typeof  date);
            alert(typeof  null);
        * */
        var  array1=new Array(1,2,3);
        var  array2=new Array("小黑","小白");
        
        var array3=[];
        array3[0]=1;
        array3[1]="11a"; //可以存放不同的数据类型
        array3[2]=111;
        alert(array3[1]);

    </script>
</head>
<body>
</body>

</html>

02.数据类型以及typeof的使用

<!DOCTYPE html>
<head lang="en">
    <meta charset="UTF-8">
    <title>输入，输出以及确认</title>
    <script type="text/javascript">
        /**
         * confirm（信息）  返回 true 或这 false
         * prompt("参数1？","参数2")  参数1：提示用户的信息  参数2：输入框的默认值！  如果没有参数2，相当于空白框
         */
              if(confirm("想走上人生巅峰吗？")){  //点击确定
                 var  answer= prompt("请输入努力的年数？","请输入数字");
                  if(answer<0) alert("请输入大于0的数字");
                  for(var i=0;i<answer;i++){
                      document.write("<h1>您努力了</h1>"+(i+1));
                  }
              }else{
                  alert("你就没法赢取白富美！")
              }
    </script>
</head>
<body>
</body>

</html>

03.输入，输出和确认

<!DOCTYPE html>
<head lang="en">
    <meta charset="UTF-8">
    <title>类型转换</title>
    <script type="text/javascript">
      var  num1="123.45a",num2="a123.45";
        /*
         * parseInt()：前提字符串第一个位置必须是数字，直到遇到 . 或者 非数字时 返回     得到整数
         * parseFloat():前提字符串第一个位置必须是数字 直到遇到  非数字时 返回            得到浮点数
         */
        document.write(parseInt(num1)+"<br/>");
        document.write(parseInt(num2)+"<br/>");  //NaN  说明不是一个数字
        document.write(parseFloat(num1)+"<br/>");
        document.write("<hr/>");
        /**
         * 强制类型转换
         * Boolean():里面的参数 只要不是false,0,null,undefied,空,NaN,未定义的变量 之外  都会返回true
         * Number(): 是把整个字符串 作为 参数之后进行强制类型转换 ！  要确保参数是 数值类型 或者boolean    true=1  false=0;
         * String()
         */
      document.write(Boolean(true)+"<br/>");
      document.write(Number(num1)+"<br/>");
      document.write(String(typeof (num1))+"<br/>");
        alert(typeof 1);
        alert(typeof (1)); //推荐使用


    </script>
</head>
<body>
</body>

</html>

04.类型转换

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>常用的运算符</title>


 <script type="text/javascript">
     /**
      * 常用的运算符
      */
 document.write("+运算："+(5+5)+"<br/>");
 document.write("-运算："+(5-5)+"<br/>");
 document.write("*运算："+(5*5)+"<br/>");
 document.write("/运算："+(5/5)+"<br/>");
     //  %   取余
     var num=3;
     /*
       ++在变量前  先自身加1  之后参与运算
      ++在变量后  先参与运算   之后自身加1
      */
 document.write("%运算："+(5%3)+"<br/>");
 document.write("++运算："+(num++)+"<br/>");
 document.write("--运算："+(num--)+"<br/>");
 document.write("--运算之后："+(num)+"<br/>");


 </script>

</head>
<body>

</body>
</html>

<!DOCTYPE html>
<head lang="en">
    <meta charset="UTF-8">
    <title>==和===的区别</title>
    <script type="text/javascript">
        /**
         *  == :把两个变量转换成相同的数据类型之后比较值
         *  ===: 判断值 和 数据类型 都相等 才 返回true
         *    alert(1=="1");    true   值相等
            alert(1==="1");     false 类型不同
         *  对象之间使用=== 或==  这是后没有区别，都是比较内存地址
         */
        var date1=new Date();
        var date2=date1;
       alert(date1===date2);

        //条件运算符
        var flag=confirm("请选择？");
        var choose=(flag==true)?"您点击了确定":"您点击了取消";
        alert(choose);

    </script>
</head>
<body>
</body>

</html>

05.==和===的区别

<!DOCTYPE html>
<head lang="en">
    <meta charset="UTF-8">
    <title>switch</title>
    <script type="text/javascript">
        var  num=window.prompt("请问：今天周几？"); //让用户输入整数
        switch (parseInt(num)){  // 因为用户输入的是字符串  要么 case "1"  要么 parseInt(num)
            case 1:
                alert(1);
                break;
                alert(111); // 没有意义  但是不会报错
            case 2:
                alert(2);
                break;
            case 3:
                alert(3);
                break;
            default :
                alert("default");
        }


    </script>
</head>
<body>
</body>

</html>

06.switch

<!DOCTYPE html>
<head lang="en">
    <meta charset="UTF-8">
    <title>break,continue</title>
    <script type="text/javascript">
      for(var i=0;i<=5;i++){  //break
          if(i==5) break;
          document.write(i+"<br/>");
      }
      document.write("<hr/>");
      for(var i=0;i<=5;i++){  //continue
          if(i==3)continue;
          document.write(i+"<br/>");
      }

    </script>
</head>
<body>
</body>

</html>

07.break,continue

<!DOCTYPE html>
<head lang="en">
    <meta charset="UTF-8">
    <title>函数和return</title>
    <script type="text/javascript">
        //函数
    function getSum(num1,num2){
            return (num1+num2);
        }
   //直接调用
     alert(getSum(3,2));

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

08.函数和return

<!DOCTYPE html>
<head lang="en">
    <meta charset="UTF-8">
    <title>for  in 循环</title>
    <script type="text/javascript">
        /**语法
         * for(声明变量 a  in 对象)｛
         *   对象[a] 来取值   类似于 根据key取得 value值
         * ｝
         */
        for(var a  in window){
            document.write(a+"=========>"+window[a]+"<br/>");
        }
    </script>
</head>
<body>
</body>
</html>

09.for in 循环

<!DOCTYPE html>
<head lang="en">
    <meta charset="UTF-8">
    <title>try  catch</title>

    <script type="text/javascript">
        try{
           alter("大家辛苦了！");
        }catch(ex){
            alert(ex.message);
        }
    </script>
</head>
<body>
</body>
</html>

10.try

<!DOCTYPE html>
<head lang="en">
    <meta charset="UTF-8">
    <title>常用的事件</title>

    <script type="text/javascript">
        /*表单提交的时候 触发的事件*/
        function check(){
            if(confirm("您确定提交表单吗？")){
                return true;
            }else{
                return false;
            }
        }
        /*获取焦点触发的事件*/
        function onf(value){
            value="";
            alert("获取焦点，值变为空")
        }

        /*失去焦点触发的事件*/
        function onb(value){
             if(value==""){
                 alert("用户名不能为空！");
             }
        }
        //记住密码
        function res(){
            alert('您选择了记住密码');
        }
    </script>
</head>
<body>
   <form  onsubmit="return check()">
       <label>用户名：<input type="text" name="userName" placeholder="请输入用户名" onfocus="onf(this.value)"
                onblur="onb(this.value)">
       </label><br/>
       <label>密码：<input type="password" name="password" placeholder="请输入密码"> </label><br/>
       <input  type="checkbox" name="re" onclick="res()">记住密码<br/>
       <button type="submit"/>提交</button>
       <a href="#" onmouseover="alert('触发了onmouseover')" onmouseout="alert('触发了onmouseout')"  >验证</a>
   </form>
</body>
</html>

11.常用的事件

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>初始javaScript</title>
    <script type="text/javascript">
        /*
        javaScript: 运行在客户端！
             减轻服务器的压力！
             提升用户的体验！

         *   变量可以不声明，直接赋值并使用！但是不推荐使用！
         *
         *   数据类型：
         *   undefined ：变量没有赋予初始值
         *   null：表示一个空值，与undefined的值相等
         *   number：包含整数和浮点数
         *   boolean：true或者false
         *   string：一组放在单引号和双引号中的文本！
         *
         *   null,数组和对象都是object类型
         */
        document.write("<h1>使用typeof来判断变量或者值是什么数据类型</h1>")
        var a, b = 10, c = "小黑";
        var d = null;
        var arr = new Array();
        var arr2 = ["1", "2"];
        var date = new Date();


        document.write("a==>" + typeof(a)+"<br/>");
        document.write("b==>" + typeof(b)+"<br/>");
        document.write("c==>" + typeof(c)+"<br/>");
        document.write("d==>" + typeof(d)+"<br/>");
        document.write("arr==>" + typeof(arr)+"<br/>");
        document.write("arr2==>" + typeof(arr2)+"<br/>");
        document.write("date==>" + typeof(date)+"<br/>");

        document.write((undefined==null)+"<br/>");
        document.write((undefined===null)+"<br/>");
        /*===:类型和值都相等 返回true*/

        var  num1=5;
        var num2="5";
        document.write((num1==num2)+"<br/>");
        document.write((num1===num2)+"<br/>");


        /*定义了一个数组
        *  var  a=new Array(5);
        *  var b=new Array(1,2,3,4,5);
        *   var c = ["1", "2"];
        * */
        var arr3 = "1,2,3,4";
        /*将字符串转化成数组*/
       var list= arr3.split(",");
        document.write("数组之前的长度："+list.length+"<br/>");
        list.push("5");
        document.write("数组之后的长度："+list.length+"<br/>");

        var str=list.join("--");
        document.write("分割前==》"+arr3+"<br/>");
        document.write("下标为2的元素值==》"+list[4]+"<br/>");
        document.write("分割后=="+str+"<br/>");
    </script>
</head>
<body>
</body>
</html>

 <script type="text/javascript">
          /*var num1=prompt("请输入第一个数字：");
          var num2=prompt("请输入第一个数字：");
          document.write("num1+num2="+(parseInt(num1)+parseInt(num2)));
           var  num="a123";
           alert(parseInt(num));
          */
          
          //查询出现a或者A的字符串的个数
        var  list=["abc","dbc","fcd","zsa","Anc","bnm"];
        var  count=0;
        for(var i in list){
            if(list[i].indexOf("a")!=-1||list[i].indexOf("A")!=-1){
                count++;
            }
        }
       document.write("出现a或者A的字符串共有："+count);
    </script>

<script type="text/javascript">
       /*
        无参的函数
       var methods = function () {
            document.write("<h1>好好学习！不搞对象！</h1>")
        }*/


        //带参的函数
        function methods(count) {
            for (var i = 0; i < count; i++) {
                document.write("<h1>好好学习！不搞对象！</h1>")
            }
        }
    </script>
</head>
<body>
<input type="button" value="调用无参的函数" onclick="methods(prompt('请输入打印的次数'))">
</body>

posted @ 2017-06-29 14:17 想太多先森阅读(125) 评论(0) 编辑收藏举报

刷新页面返回顶部

@想太多先森

javaScript

公告