javascript基础3

最新推荐文章于 2024-10-30 19:10:39 发布

timoru

最新推荐文章于 2024-10-30 19:10:39 发布

阅读量67

点赞数

文章标签： javascript 开发语言

本文链接：https://blog.csdn.net/timoru/article/details/123467254

版权

本文详细介绍了JavaScript中的基本数据类型（字符串、数字、布尔、null和undefined）、自定义与内置对象的概念，以及变量、运算符和对象的属性与方法。从实例出发，探讨了变量作用域、运算符应用和逻辑表达式的理解。

摘要由CSDN通过智能技术生成

javascript中的数据类型
   值类型:
       字符串--"" 数字类型--整数和小数布尔型--true/false
       null---空对象【object】 undefined--未赋值
引用类型: 对象类型--{属性} 数组--[]/new Array() 函数--function xxx(){}

简单的认识javascript对象
   1.自定义的对象---使用的时候需要自己创建的对象
       创建方式:1.字面量形式创建对象
           2.通过函数形式创建对象
   2.内置对象---javascript语法规范，规定好的对象
       1.高级对象 String Number Boolean Math Date .....
2.DOM对象---文档对象【document对象】
       3.BOM对象---浏览器对象【window对象】

   对象中通常会包含2类元素:1.属性 --- 描述对象的基本特征
               2 方法【函数】----描述对象的基本功能

   对象---就是将现实中的事物，数据化，使用数据的方式描述出来。
       现实--汽车---描述汽车---基本特征：颜色品牌驱动方式座位身长......
                       白色 BMW 4驱 5座 2M ....
                   基本功能：前进后退 ......
   对象中的属性
       属性---键值对【键{属性名称}:值{具体数据}】颜色:白色
           可以出现多个,中间","分隔 [颜色:白色,品牌:BMW]
           属性对应的数据值，如果是字符串/日期使用""包围 [颜色:"白色",品牌:"BMW"]
       访问属性值: 1.对象名称.属性名称汽车对象.颜色----"白色"
           2..对象名称["属性名称"] 汽车对象["品牌"]----"BMW"
   对象中的方法
       方法---函数【具体功能的实现代码集合】
           格式: 方法名称:function(){具体功能的实现代码}
               前进:function(){ 加油向前跑 }
       访问方法: 对象名称.方法名称(参数);
               汽车对象.前进();
   字面量形式创建对象:使用{}包围属性/方法
   例如:
   var 汽车对象={
          颜色:"白色",品牌:"BMW",驱动方式:4,座位:5,身长:2,
          前进:function(){加油向前跑},
          后退:function(){减油向后退}
           };

   如何用字面量形式创建学生对象？
<script>
           function testObject(){
               //字面量形式创建学生对象
               var student={
                   name:"zhangsan",
                   age:7,
                   sex:true,
                   height:1.2,
                   classname:"一年级1班",
                   xuexi:function(){ alert("看书，写字");},
                   yundong:function(){alert("跳绳，运动");}
               };
               //alert(typeof student);
               /*
               访问属性值: 1.对象名称.属性名称
                           2.对象名称["属性名称"]
               */
           //alert(student.name);
           //alert(student["age"]);
           //访问方法: 对象名称.方法名称(参数);
           student.xuexi();
           }
       </script>

javascript中的变量
   变量---保存程序中的运行数据值---容器
   变量的组成:
       1.var
       2.名称
       3.数据类型
       4.作用域【有效范围】
   变量的作用域:1.全局变量---定义在函数之外的变量，当前页面中的任何一个函数都可以使用。
       2.局部变量---定义在函数里面/参数，只能在当前函数中使用。

   全局变量的隐藏---局部变量与全局变量的名称相同
   如果要使用被隐藏的全局变量的值 this.全局变量名称
例如:
<script>
           //变量的作用域:
           //1.全局变量---定义在函数之外的变量，可以在任何一个函数都可以使用。
           //2.局部变量---定义在函数里面/参数，只能在当前函数中使用。
           var name="我是全局变量"; //全局变量
           function test1(){
               //alert("test1函数中使用name变量---"+name);
               //test2();

               //var myname="我是局部变量"; //局部变量
               //alert("test1函数中使用myname变量---"+myname);
               //test2();

               //test11("参数-局部变量");
               //test2();

               //全局变量的隐藏---局部变量与全局变量的名称相同
               var name="zhangsan";
               //alert("test1函数中使用name变量---"+name); //zhangsan
               //如果要使用被隐藏的全局变量的值 this.全局变量名称
               alert("test1函数中使用name变量---"+this.name); //我是全局变量
           }
           //函数的参数--是局部变量
           function test11(testname){
               alert("test11函数中使用testname变量---"+testname);
           }
           function test2(){
               //alert("test2函数中使用name变量---"+name);
               //alert("test2函数中使用myname变量---"+myname);
               alert("test2函数中使用testname变量---"+testname);
           }
       </script>

javascript中的运算符号
   1.算术运算符【+ - * / % ++ -- 】
   2.比较运算符【> < >= <= == != === 】
   3.逻辑运算符【逻辑或 || 逻辑与 && 逻辑非！】
   4.typeof 判断类型 null--
   5.三元运算符 (判断)？数据1 : 数据2
<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title></title>
       <script>
           function testsunshu(){
               //+ - * / % ++ --
               var num1=10;
               var num2=3;
               /*
               alert(num1+num2);
               alert(num1-num2);
               alert(num1*num2);
               alert(num1/num2);
               alert(num1%num2);
               */
           //++ 自增自动加1
               //变量 ++ 【先用，后加】
               //alert(num1++); //10
               //alert(num1); //11
               //++ 变量【先加，后用】
               //alert(++num1); //11
               //alert(num1); // 11

               //-- 自减自动减1
               //变量 -- 【先用，后减】
               //alert(num1--); //10
               //alert(num1); // 9
               //-- 变量【先减，后用】
               alert(--num1); // 9
               alert(num1); // 9
           }
           function testbijiao(){
           //> < >= <= == != ===
           //比较运算符的结果一定是boolean 【true/false】
           var num1=10;
           var num2=3;
           /*
           alert(num1>num2); //true
           alert(num1<num2); //false
           alert(num1>=num2); //true
           alert(num1<=num2); //false
           alert(num1==num2); //false
           alert(num1!=num2); //true
           */
       // === 在进行比较的时候，要比较数据值和数据类型
           var test1=10; //number
           var test2="10"; //string
           //alert(test1==test2); //true
           alert(test1===test2); //false
           }

           function testluoji(){
               //逻辑或 || 逻辑与 && 逻辑非 !
               //参与逻辑运算的数据和运算结果都是boolean
               var num1=10;
               var num2=3;
               //逻辑或 ||
               //true || false --- true
               //true || true --- true
               //false || true -- true
               //false|| false --false
               //alert((num1>num2) || (num2>num1)); //true
               //逻辑与 &&
               //true && false --- false
               //true && true --- true
               //false && true -- false
               //false && false --false
               //alert((num1>num2) && (num2>num1)); //false
               //逻辑非 !
               alert(!((num1>num2) && (num2>num1))); //true
           }

           function testtypeof(){
               var test1=null; //object
               var test2; //undefined
               var arr1=["zhangsan",100]; //object
               function fun1(){} //function
               alert(typeof fun1);
           }

           function testsanyuan(){
           //5.三元运算符 (判断)？数据1 : 数据2 [2选1]
           //先执行(判断)---true--选择数据1 作为运算结果
           //               false--选择数据2 作为运算结果
           var age=20;
           var test1=(age>18) ? "成年人" : "未成年人";
           alert(test1);
           }
       </script>
   </head>
   <body>
       <input type="button" value="测试算数运算符" οnclick="testsunshu();" />
       <input type="button" value="测试比较运算符" οnclick="testbijiao();" />
       <input type="button" value="测试逻辑运算符" οnclick="testluoji();" />
       <input type="button" value="测试typeof运算符" οnclick="testtypeof();" />
       <input type="button" value="测试三元运算符" οnclick="testsanyuan();" />
   </body>
</html>