zoukankan      html  css  js  c++  java
  • javascript基础语法及使用

      前几年自学过JavaScript,由于从事安卓开发,就放弃了对js的学习,今天又捡起来重新学习了下,希望对大家有所帮助。

      首先介绍下什么是JavaScript. JavaScript 是互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。JavaScript是脚本语言:

      1》JavaScript 是一种轻量级的编程语言。

      2》JavaScript 是可插入 HTML 页面的编程代码。

      3》JavaScript 插入 HTML 页面后,可由所有的现代浏览器执行。

      4》JavaScript 很容易学习。

     一.定义变量

      var x=5 ; y=6 ; z=x+y

      在代数中,我们使用字母(比如 x)来保存值(比如 5).通过上面的表达式 z=x+y,我们能够计算出 z 的值为 11。在 JavaScript 中,这些字母被称为变量。

      定义字符串同理:var carname="Volvo";

     二.定义对象

      对象也是一个变量,但对象可以包含多个值(多个变量)。

      var car = {type:"Fiat", model:500, color:"white"};

      实例:

      <p id="demo"></p>

      <script>

        var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};
        document.getElementById("demo").innerHTML =
        person.firstName + " 现在 " + person.age + " 岁.";
      </script>

      运行结果:John 现在 50 岁.

      当然,定义 JavaScript 对象可以跨越多行,空格跟换行不是必须的:

      var person = {
             firstName:"John",
             lastName:"Doe",
             age:50,
             eyeColor:"blue"
      };

     三.javaScript作用域

      在 JavaScript 中, 对象和函数同样也是变量。

      在 JavaScript 中, 作用域为可访问变量,对象,函数的集合。

      JavaScript 函数作用域: 作用域在函数内修改。

      如:

      var carName = " Volvo";

      // 此处可调用 carName 变量

      function myFunction() {

          // 函数内可调用 carName 变量 

      }

     四.javaScript数据类型

      字符串(String)、数字(Number)、布尔(Boolean)、数组(Array)、对象(Object)、空(Null)、未定义(Undefined)。

      JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型:

      var x;               // x 为 undefined
      var x = 5;           // 现在 x 为数字
      var x = "John";      // 现在 x 为字符串

      布尔(逻辑)只能有两个值:true 或 false。

      var x=true;
      var y=false;

      数组,下面的代码创建名为 cars 的数组:

      var cars=new Array();
      cars[0]="Saab";
      cars[1]="Volvo";
      cars[2]="BMW"; 或者 var cars=new Array("Saab","Volvo","BMW");

      js中,Undefined 这个值表示变量不含有值。

      可以通过将变量的值设置为 null 来清空变量。

      cars=null;
      person=null;

      当您声明新变量时,可以使用关键词 "new" 来声明其类型:

      var carname=new String;
      var x=      new Number;
      var y=      new Boolean;
      var cars=   new Array;
      var person= new Object;

      五.javaScript中的switch if else for等控制语句同java

      六.函数
     
      函数定义
      函数就是包裹在花括号中的代码块,前面使用了关键词 function:
      function functionname()
      {
        执行代码
      }

      当您声明函数时,请把参数作为变量来声明:

      function myFunction(var1,var2)
      {
        执行代码
      }
      例子
      <p>点击这个按钮,来调用带参数的函数。</p>
      <button onclick="myFunction('hello','js')">点击这里</button>
      <script>
        function myFunction(name,job){ alert("Welcome " + name + ", the " + job); }
       </script>

      有时,我们会希望函数将值返回调用它的地方。

      通过使用 return 语句就可以实现。

      在使用 return 语句时,函数会停止执行,并返回指定的值。

      function myFunction()
      {
          var x=5;
          return x;
      }

      实例:

       function myFunction(a,b) { return a*b; }

         document.getElementById("demo").innerHTML=myFunction(4,3); 

      七.javaScript局部变量,全局变量

       在 JavaScript 函数内部声明的变量(使用 var)是局部变量,所以只能在函数内部访问它。(该变量的作用域是局部的)。

       您可以在不同的函数中使用名称相同的局部变量,因为只有声明过该变量的函数才能识别出该变量。

         只要函数运行完毕,本地变量就会被删除。

       在函数外声明的变量是全局变量,网页上的所有脚本和函数都能访问它。

         JavaScript 变量的生命期从它们被声明的时间开始。

         局部变量会在函数运行以后被删除。

         全局变量会在页面关闭后被删除。

       注意:

       如果您把值赋给尚未声明的变量,该变量将被自动作为全局变量声明。

       这条语句:

       carname="Volvo";

       将声明一个全局变量 carname,即使它在函数内执行。

      八.javaScript运算符同java

      九.javaScript typeof操作符

       你可以使用 typeof 操作符来检测变量的数据类型。

       typeof "John"                // 返回 string 
       typeof 3.14                  // 返回 number
       typeof false                 // 返回 boolean
       typeof [1,2,3,4]             // 返回 object
       typeof {name:'John', age:34} // 返回 object

       在 JavaScript 中 null 表示 "什么都没有"。

       null是一个只有一个值的特殊类型。表示一个空对象引用。用 typeof 检测 null 返回是object。

          在 JavaScript 中, undefined 是一个没有设置值的变量。

          typeof 一个没有值的变量会返回 undefined

       null 和 undefined 的值相等,但类型不等:

       typeof undefined             // undefined
       typeof null                  // object
       null === undefined           // false
       null == undefined            // true
     

      十.javaScript类型转换

       JavaScript 变量可以转换为新变量或其他数据类型:

      • 通过使用 JavaScript 函数
      • 通过 JavaScript 自身自动转换

       全局方法 String() 可以将数字转换为字符串。

       该方法可用于任何类型的数字,字母,变量,表达式:

       String(x)         // 将变量 x 转换为字符串并返回
       String(123)       // 将数字 123 转换为字符串并返回

       String(false)        // 返回 "false"
       String(true)         // 返回 "true"

       全局方法 Number() 可以将字符串转换为数字。

       字符串包含数字(如 "3.14") 转换为数字 (如 3.14).

       空字符串转换为 0。

       Number("3.14")    // 返回 3.14

       Number(false)     // 返回 0
       Number(true)      // 返回 1

       当 JavaScript 尝试操作一个 "错误" 的数据类型时,会自动转换为 "正确" 的数据类型。

       5 + null    // 返回 5         null 转换为 0
       "5" + null  // 返回"5null"   null 转换为 "null"

       当你尝试输出一个对象或一个变量时 JavaScript 会自动调用变量的 toString() 方法:

       document.getElementById("demo").innerHTML = myVar;

       // if myVar = {name:"Fjohn"}  // toString 转换为 "[object Object]"
       // if myVar = [1,2,3,4]       // toString 转换为 "1,2,3,4"
       // if myVar = new Date()      // toString 转换为 "Fri Jul 18 2014 09:08:55 GMT+0200"

       数字和布尔值也经常相互转换:

       // if myVar = 123             // toString 转换为 "123"
       // if myVar = true            // toString 转换为 "true"
     
      十一.json的使用
     

       通常我们从服务器中读取 JSON 数据,并在网页中显示数据。

       简单起见,我们网页中直接设置 JSON 字符串 

       首先,创建 JavaScript 字符串,字符串为 JSON 格式的数据:

       实例:

       var text = '{ "sites" : [' + '{ "name":"Runoob" , "url":"www.runoob.com" },' + '{ "name":"Google" , "url":"www.google.com" },' + '{ "name":"Taobao" , "url":"www.taobao.com" } ]}';

       obj = JSON.parse(text); document.getElementById("demo").innerHTML = obj.sites[1].name + " " + obj.sites[1].url;

       运行结果:Google www.google.com

       最后介绍下void

       我们经常会使用到 javascript:void(0) 这样的代码,那么在 JavaScript 中 javascript:void(0) 代表的是什么意思呢?

       javascript:void(0) 中最关键的是 void 关键字, void 是 JavaScript 中非常重要的关键字,该操作符指定要计算一个表达式但是不返回值。

       实例:

       <a href="javascript:void(0)">单击此处什么也不会发生</a>

       js基础的用法大概就这些,后续会介绍下html的基本使用和js的混合使用。喜欢的同学们请点赞推荐,谢谢!!!

     
  • 相关阅读:
    C#,调用Process解压文件
    使用Jquery的treeview
    利用VS2010的项目生成事件属性进行生成文件的复制与打包
    简单理解laravel框架中的服务容器,服务提供者以及怎样调用服务
    详解PHP实现定时任务的五种方法
    php 回调函数和匿名函数
    mongodb的连接和开启安全验证
    关于版本号:alpha、beta、rc、stable
    php7 mongodb 扩展windows 安装
    终端提交代码到码云
  • 原文地址:https://www.cnblogs.com/limingblogs/p/7670612.html
Copyright © 2011-2022 走看看