JavaScript 基础1

来源:互联网 发布:淘宝的数字证书在哪里 编辑:程序博客网 时间:2024/04/27 22:10

1.JavaScript 认识

上个世纪的1995年,当时的网景公司正凭借其Navigator浏览器成为Web时代开启时最著名的第一代互联网公司。

由于网景公司希望能在静态HTML页面上添加一些动态效果,于是叫Brendan Eich这哥们在两周之内设计出了JavaScript语言。你没看错,这哥们只用了10天时间。

为什么起名叫JavaScript?原因是当时Java语言非常红火,所以网景公司希望借Java的名气来推广,但事实上JavaScript除了语法上有点像Java,其他部分基本上没啥关系。

2.使用

  JavaScritp的基本元素是语句。一条语句代表着一条命令。通常以分号(;)结尾。  实际上分号用不用都行,只是为了增加阅读性。  <!DOCTYPE html>  <html>  <head>      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">      <title>标题</title>      </head>  <body>            <script type="text/javascript">              document.writeln("hello world");        </script>  </body>  </html>  document.writeln("hello"); 仅仅是在文档中添加了一些文字,并没有什么明显的效果,  我们这么演示其实是告诉大家,js的作用就是这样通过代码去控制界面的呈现效果。

3.数据类型

  我们学习编程语言大多数都是概述 → 数据类型 → 语法 → 类  JavaScript也是一样的,定义变量要使用到var关键字,在定义的同时可以为其初始化赋值。
  • 局部变量:定义在函数中的变量称为局部变量,只能在该函数范围内使用。
  • 全局变量:直接在script元素中定义的变量称为全局变量,可在任意地方使用。

      <!DOCTYPE html>  <html>  <head>      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">      <title>标题</title>  </head>  <body>          <script type="text/javascript">          <!-- 定义字符串  -->          var str = "abc";          <!-- 定义数值  -->          var num = 1;          <!-- 定义布尔  -->          var status = false;      </script>   </body>  </html>
  • 注意:
    JavaScript是一种弱类型的语言,所谓弱类型,指的是他不需要明确的声明变量的类型,可以随意的赋值自己想声明类型的变量,还可以根据场景在类型间自由转换。

  • 字符类型:string类型就是java中的字符串,var str = "abc";

  • 布尔类型:boolean类型由两个值,true和false。
  • 数值类型:整数和浮点数都用number类型便是。

      var num = 5;  var pi = 3.14;  var color = 0x123456;

4.定义函数

  定义函数其实就是我们需要用到的一些API封装起来,这样的话我们就不用每次使用都重新写一遍,只需要调用函数即可。  例:定义有参函数,无参函数,有返回值函数  <!DOCTYPE html>  <html>      <head>      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">      <title>标题</title>  </head>  <body>          <script type="text/javascript">           <!-- 定义无参函数 -->            function hello(){                document.writeln("hello");            }            hello();            <!-- 定义有参函数 -->            function add(num1,num2){                document.writeln(num1+num2);            }            var num1 = 2;            var num2 = 3;            add(num1,num2);            <!-- 定义有返回值函数 -->            function getSum(num1,num2){                return (num1+num2);            }            document.writeln(getSum(num1,num2));      </script>      <hr/>      <script type="text/javascript">            hello();      </script>  </body>  </html>

5.创建对象

  • 创建对象:通过new Object的方式来创建对象。

      <body>          <script type="text/javascript">             var persion = new Object();          persion.name = "xioaming";          persion.age = 12;          document.writeln(persion.name);                 document.writeln(persion.age);              </script>  </body>
  • 对象字面量:用这个可以直接定义对象及其属性。

      <body>          <script type="text/javascript">          var persion = {              name : "xiaoli",              age : 1          };          document.writeln(persion.name);                 document.writeln(persion.age);              </script>  </body>  <!-- 注意:      属性的名称和值时间用冒号分隔(:)      多个属性之间用逗号分隔(,)      大括号之后必须用分号结尾(;) -->
  • 对象函数:使用上面的方式可以为对象添加变量,也可以为对象添加函数。

      <body>          <script type="text/javascript">          var persion = {              name : "xiaoli",              age : 1,              getSum : function(){                  return 1+2;              }          };          document.writeln(persion.name);                 document.writeln(persion.age);                  document.writeln(persion.getSum());             </script>  </body>  <!-- 注意:方法内部使用对象属性时,要使用this关键字 -->

6.使用对象

  • 读取和修改对象属性值:一种是直接对象.属性名称,一种是对象["属性名称"]

      <body>          <script type="text/javascript">          var persion = {              name : "xiaoli",              age : 1,              getSum : function(){                  return 1+2;              }          };          persion.name= "haha";          persion["name"] = "hehe";          document.writeln(persion.name);                 document.writeln(persion["name"]);              </script>  </body>
  • 枚举对象属性:使用for …in 语句。

    <body>    <script type="text/javascript">      var persion = {          name : "xiaoli",          age : 1,          getSum : function(){              return 1+2;          }      };      persion.name= "haha";      persion["name"] = "hehe";      document.writeln(persion.name);             document.writeln(persion["name"]);      for(var prop in persion){               document.writeln("name="+prop+",value="+persion[prop]+"<br>");                                 }  </script></body><!-- 注意:对象.[变量名]  中括号里面的变量名不需要加双引号 -->
  • 增删对象的属性和方法

    注意:
    判断对象中是否存在某属性用:
    var hasName = “name” in persion;

      <body>          <script type="text/javascript">          var persion = {              name : "xiaoli",           };          <!--增加属性和函数-->          persion.age = 12;          persion.getSum = function(){              return 1+2;          };          for(var prop in persion){              document.writeln("name="+prop+",value="+persion[prop]+"<br>");          }          <!-- 删除属性和函数-->          delete persion.name;          delete persion["age"];          delete persion.getSum;          for(var prop in persion){                  document.writeln("name="+prop+",value="+persion[prop]+"<br>");          }      </script>  </body>

7.运算符

运算符 说明 ++、– 前置或后置自增或自减 +、-、*、/、% 加、减、乘、除、求余 <、<=、>、>= 小于、小于等于、大于、大于等于 ==、!= 相等、不相等 ===、!== 等同、不等同 &&、II 逻辑与、逻辑或 = 赋值 + 字符串连接 ?: 三元运算符
注意:    a:== 和 != 比较若类型不同,先偿试转换类型,再作值比较,最后返回值比较结果 。    b:而 === 和 !== 只有在相同类型下,才会比较其值。

8.显示类型转换

  • 数值转换为字符串:可以使用toString方法
    var str = (123).toString();
方法 说明 返回 toString() 以十进制形式表示数值 字符串 toString(2)
toString(8)
toString(16)
以二、八、十六进制表示数值 字符串 toFixedn() 以小数点后有n为数字的形式表示实数 字符串 toExponential(n) 以指数表示法表示数值,
尾数的小数点前后分别有1位数字和n位数字 字符串 toPrecision(n) 用n个有效数字表示数值 字符串

- 将字符串转换为数值:使用Number函数。

  var num = Number("123");
函数 说明 Number(str)
parseFloat(str) 生成一个整数或实数值 parseInt(str) 生成一个整数值

9.使用数组

  • 注意:

    a:创建数组的时候不需要声明数组中元素的个数,JS数组会自动调整大小以便容纳所有的元素。b:不必声明数组所含数据的类型,JS中的素组可以混合包含各种类型的数据。
  • 使用New创建数组

      <body>          <script type="text/javascript">          var array = new Array();          array[0] = "a";          array[1] = 12;          array[2] = false;      </script>  </body>
  • 使用数组字面量

      <body>          <script type="text/javascript">          var array = ["a",12,false];      </script>  </body>
  • 枚举数组内容

      <body>          <script type="text/javascript">          var array = new Array();          array[0] = "a";          array[1] = 12;          array[2] = false;          for(var i = 0;i<array.length;i++){              document.writeln("array["+i+"]="+array[i])          }      </script>  </body>
  • 内置的数组方法:这些方法是js对Array对象封装好的直接调用就可以了。

方法 说明 返回 concat() 将数组和参数所致数组的内容合并成一个新数组 数组 jion() 将所有数组的元素连接成一个字符串 字符串 pop() 将数组当做栈使用,删除并返回最后一个元素 对象 push() 将数组当做栈使用,将制定的数据添加到数组中 void reverse() 就地反转数组元素的次序 数组 shift() 类似pop,但是操作的是第一个元素 对象 skuce(,) 返回一个子数组 数组 sort() 对数组进行排序 数组 unshift() 类似朴树,但是新元素插到数组的开头位置 void

10.异常处理

  JS中用trry....catch语句处理错误。  <body>          <script type="text/javascript">          try{              var array;              document.writeln("num="+array[4]);          }catch(e){              document.writeln("Error:"+e);          }finally{              document.writeln("请检查你的代码");          }      </script>  </body>

11.比较undefined和null值

  JS中有两个特殊的值:undefined和null,在视图读取未赋值的变量或对象没有属性时就是undefined值。  <body>      <script type="text/javascript">           var array = [1,2,3];           var persion = {               name:"xiaoming",           };           document.writeln("age=" + persion.age);           document.writeln("num=" + array[4]);      </script>  </body>

输出结果:age=undefined num=undefined


  null与undefined略有不同,undefined是在未定义的情况下得到的值。  null是用于表示已经赋值了一个值但是该值不是一个有效的object、string、number或boolean。  如果想检查某个属性是否为null或undefined,时需要用!非运算符就可以。  Undefined类型只有一个值,即undefined。当声明的变量还未被初始化时,变量的默认值为undefined。  Null类型也只有一个值,即null。null用来表示尚未存在的对象,常用来表示函数企图返回一个不存在的对象。

Web笔记首页目录

原创粉丝点击