您的位置:首页 > Web前端 > JavaScript

javascript基础语法及使用

2017-10-15 12:37 211 查看
  前几年自学过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的混合使用。喜欢的同学们请点赞推荐,谢谢!!!
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: