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的混合使用。喜欢的同学们请点赞推荐,谢谢!!!

     
  • 相关阅读:
    HOJ 2139 Spiderman's workout(动态规划)
    FZU 2107 Hua Rong Dao(dfs)
    Java 第十一届 蓝桥杯 省模拟赛 计算机存储中有多少字节
    Java 第十一届 蓝桥杯 省模拟赛 计算机存储中有多少字节
    Java 第十一届 蓝桥杯 省模拟赛 计算机存储中有多少字节
    Java 第十一届 蓝桥杯 省模拟赛 合法括号序列
    Java 第十一届 蓝桥杯 省模拟赛 合法括号序列
    Java 第十一届 蓝桥杯 省模拟赛 合法括号序列
    Java 第十一届 蓝桥杯 省模拟赛 无向连通图最少包含多少条边
    Java 第十一届 蓝桥杯 省模拟赛 无向连通图最少包含多少条边
  • 原文地址:https://www.cnblogs.com/limingblogs/p/7670612.html
Copyright © 2011-2022 走看看