JavaScript是一种基于对象的编程语言，基于对象指的是所有的对象已经由浏览器提供好了，用户直接使用就可以了。

另外，JS是嵌入在HTML语法之中的编程语言。

PS:虽然是基于对象的语言，但是在编写代码的过程中，尽量按照面向对面的要求书写代码。

输出语法：

document.write():向页面输出HTML代码。虽然JavaScript定义在HTML页面中，但是它却可以控制HTML代码的输出。document.write()函数输出的HTML代码不能控制元素的顺序，所以在开发之中不会使用此函数输出HTML代码。

在开发中往往使用console.log()来进行代码输出，来进行页面调试。

变量：

Js定义变量，是根据赋予的内容来决定变量类型。

例如，可以像下面那样声明并初始化数组：

var result = new Array();//声明数组: 
result[0]=”hello”;
result[1]=100;
result=false;

PS:本操作没有严格之处，最大的好处是没有长度限制，动态数组。(当然也可以静态初始化，new数组时直接初始化）当然在开发中一般不会使用new关键字声明数组。实际在定义js变量的时候也可以不使用var进行定义，这样的是全局变量，当然一般并不使用。

函数：

function 函数名称(参数){//不需要返回值类型，如果需要返回，直接return,参数也可以不写var

}

PS:在学习java的时候，方法有几个形参，调用的时候实参个数必须相同，可是JavaScript没有这种限制，

如add(10)依旧调用函数add(x,y):

function add(x,y){
  return x+y;
  }
alert(add(10))//调用

所以为了用户的操作，JavaScript提供了一个功能，函数名称.arguments：表示取得函数的参数的内容，返回的是一个数组。可以使用length判断长度。

function add(x,y){
   switch(add.arguments.length){
       case 0:return 0;
       case 1:return x;
       case 2:return x+y;
}
alert(add(10))//调用

PS:但是在实际工作中，还是强烈建议语法严格，函数里面定义几个参数，调用时就传几个参数， 尽量不出现以上情形。(规范)

事件处理：

在页面上任何的操作都可能称为事件源，而对于每一个事件都可以进行自定义的处理方式。  例如，页面加载，鼠标移动等等都可以称它为事件源。所有的事件在JavaScript里面都是以”onXXX”的形式命名。

举例如下两个事件(这两个事件只能够在”<body>”元素里面进行处理)：

页面加载事件： onload

页面的卸载事件：onunload

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
<script type="text/javascript">
   function loadHandle(){
   alert("页面加载");
   }
   function closeHandle(){
   alert("再见");
   }
</script>
</head>
<body onload="loadHandle();" onunload="closeHandle();">
</body>
</html>

发现浏览器打开页面时出现”页面加载”，关闭页面时显示”再见”

范例在表格中当鼠标移入新的一行时，改变当前行的颜色：

原理：JS是一个基于对象的编程语言，每一个HTML元素都是一个对象 ，也就是说每一个元素，例如”<tr>”、”<td>”都属于一个JS对象。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
<script type="text/javascript">
   function changeColor(obj,color){
   //修改当前行元素
     obj.bgColor=color;//由外部决定颜色。
   }
</script>
</head>
<body>
   <table border="1" bgColor="red">
       <tr onmousemove="changeColor(this,'white');"><td>demo1</td></tr>
       <tr onmousemove="changeColor(this,'white');"><td>demo2</td></tr> 
       <tr onmousemove="changeColor(this,'white');"><td>demo3</td></tr>
   </table>
</body>
</html>

总结：javascript取得的所有html元素都是对象。（基于对面编程语言）Java属于面向对象的编程语言，面向对象过程之中，需要由用户自己定义类，产生对象，但是JavaScript是一种基于对象的编程语言，即：所有的对象都已经由浏览器自动为用户提供好了，用户直接使用即可，最典型的对象：每一个HTML元素都是一个对象 。（如：<html><head><body>）所有HTML定义的时候要想轻松的取得指定元素，必须加上有ID属性，作为唯一标记 。

JavaScript事件之动态绑定事件（开发中使用最多）

但是需要注意，所有的事件除了采用以上“onXXX”的方式之外也可以动态设置，这种形式在开发之中是使用最多的。那么可以使用 addEventListener(事件类型，处理函数名称，触发时机) 进行动态设置。

PS:触发时机都会设置为false,表示在事件的触发过程进行处理。

范例：观察动态设置

之前这么写：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
<script type="text/javascript">
   function handler(){
    alert('hello');
   }
</script>
</head>
<body onload="handler();">
</body>
</html>

动态绑定事件：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
<script type="text/javascript">
   function handler(){
     alert('hello');
   }
   //以下表示是在页面加载的时候进行加载事件的处理
   window.onload=function(){//匿名函数
      handler()
   }
</script>
</head>
<body>
</body>
</html>

所有的动态设置的事件都可以在onload里面进行动态的配置。但是如果要配置，那么必须能够取得一个明确的元素对象。可以使用docuent.getElementById(元素Id)的操作方式取得元素对象。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
<script type="text/javascript">
    function handler(){
     alert("hello");
    }
   //以下表示是在页面加载的时候进行加载事件的处理
   window.onload=function(){//匿名函数
   var imgElement = document.getElementById("myimg");//取得mying元素的对象，每一个元素都是对象
   imgElement.addEventListener("click", handler, false);
   }
</script>
</head>
<body>
     <!-- id是整个js的操作核心所在，必须存在 -->
     <img id="myimg" src="my.jpg" height="50%">
</body>
</html>

这种动态设置操作事件的最大好处在于，HTML代码不会和JavaScript代码混合在一起。

PS：innerHTML方法：在此元素内增加指定内容，而且内容可以是HTML代码。

setTimeout方法练习：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
   <div id="info">hello</div>
  <script type="text/javascript">
  function setClock(){
  var date = new Date();
  var info = document.getElementById("info");
  info.innerHTML="<h1>当前时间"+date+"</h1>";
  setTimeout(setClock,1000); //每一秒更新一次 
    }
  setClock();
</script>
</body>
</html>

实例：轮播图

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
  <span id="info">
     <img id="img" src="data:images/a.jpg" height="250px" width="250px">
  </span>
  <script type="text/javascript">
     var imgName = new Array("a.jpg","b.jpg","c.jpg")
     var foot = 0;//操作的脚标
     function lunbo(){
      var img = document.getElementById("img");
      img.src="data:images/"+imgName[foot++];
      if(foot>=imgName.length){
      foot=0;
      }
      setTimeout(lunbo, 1000);//每一秒更新一次
     }
     lunbo();
  </script>
</body>
</html>

JavaScript基础总结三部曲之一的更多相关文章

  1. 第五模块：WEB开发基础 第2章·JavaScript基础

    01-JavaScript的历史发展过程 02-js的引入方式和输出 03-命名规范和变量的声明定义 04-五种基本数据类型 05-运算符 06-字符串处理 07-数据类型转换 08-流程控制语句if ...

  2. JavaScript基础

    JavaScript基础 JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处 ...

  3. 一步步学习javascript基础篇（0）:开篇索引

    索引: 一步步学习javascript基础篇(1):基本概念 一步步学习javascript基础篇(2):作用域和作用域链 一步步学习javascript基础篇(3):Object.Function等 ...

  4. 前端之JavaScript基础

    前端之JavaScript基础 本节内容 JS概述 JS基础语法 JS循环控制 ECMA对象 BOM对象 DOM对象 1. JS概述 1.1. javascript历史 1992年Nombas开发出C ...

  5. 一步步学习javascript基础篇（3）：Object、Function等引用类型

    我们在<一步步学习javascript基础篇(1):基本概念>中简单的介绍了五种基本数据类型Undefined.Null.Boolean.Number和String.今天我们主要介绍下复杂 ...

  6. Javascript基础回顾 之(三) 面向对象

    本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...

  7. Javascript基础回顾 之(二) 作用域

    本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...

  8. Javascript基础回顾 之(一) 类型

    本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...

  9. JavaScript 基础回顾——对象

    JavaScript是基于对象的解释性语言,全部数据都是对象.在 JavaScript 中并没有 class 的概念,但是可以通过对象和类的模拟来实现面向对象编程. 1.对象 在JavaScript中 ...

随机推荐

  1. php代码审计基础笔记

    出处: 九零SEC连接:http://forum.90sec.org/forum.php?mod=viewthread&tid=8059 --------------------------- ...

  2. 内核Makefile编写

    对于大部分内核模块或设备驱动的开发者和使用者来说,最常接触到的就是各层目录下基于kbuild架构的kbuild Makefile文件.主要部分有:1.目标定义,目标定义就是用来定义哪些内容要做为模块编 ...

  3. PHP Static Self 的区别

    <?php class Human{ public static function whoami() { echo "来自父类的whoami"; } public stati ...

  4. 连连看的设计与实现——四人小组项目（NABCD）

    小组名称:天天向上 成员:王森.张政,张金生,栾骄阳 题目:连连看游戏 NABCD N(需求) 游戏最大的乐趣在于玩法,我们要想在众多的连连看游戏当中脱颖而出,就需要增加更多富有乐趣.吸引用户的玩法. ...

  5. 暑假训练round2 D: 好序列（Manacher）

    Problem 1061: 好序列 Time Limits:  1000 MS   Memory Limits:  65536 KB 64-bit interger IO format:  %lld  ...

  6. c/c++内存调试

    Leaktracer,Valgrind,ElectricFence 内存泄漏分类 以发生的方式来分类,内存泄漏可以分为4类: 常发性 发生内存泄漏的代码会被多次执行到,每次被执行的时候都会导致一块内存 ...

  7. Apache Spark源码走读之13 -- hiveql on spark实现详解

    欢迎转载,转载请注明出处,徽沪一郎 概要 在新近发布的spark 1.0中新加了sql的模块,更为引人注意的是对hive中的hiveql也提供了良好的支持,作为一个源码分析控,了解一下spark是如何 ...

  8. html 实体转换为字符：转换 UEditor 编辑器 ( 在 ThinkPHP 3.2.2 中 ) 保存的数据

    在 ThinkPHP 3.2.2 中使用 UEditor 编辑器保存文章内容时,数据库中保存的数据都被转义成实体,例如:&lt;p&gt;&lt;strong&gt;& ...

  9. 为Ubuntu Server安装gnome图形桌面环境

    Ubuntu Server版默认都没有图形桌面(GUI),但是可以安装,以下共有两种安装方法. 一.安装全部Gnome桌面环境 Ubuntu系列桌面实际上有几种桌面应用程序,包括Ubuntu-desk ...

  10. [转]GPS纠偏算法，适用于google,高德体系的地图

    此文是转的,算法没验证过,只是记录一下. GPS纠偏算法,适用于google,高德体系的地图,精确度还比较高.我试了一下比高德本身的纠偏还精确点. /** * gps纠偏算法,适用于google,高德 ...