JavaScript简介

JavaScript简介：

JavaScript是运行在浏览器端的脚步语言，Javascript主要解决的是前端与用户交互的问题，包括使用交互与数据交互。Javascript是浏览器解释执行的，前端脚本语言还有JScript(微软，IE独有），ActionScript(Adobe公司，需要插件）等。

前端三大块

• HTML：页面结构
• CSS:页面表现：元素大小、颜色、位置、隐藏或显示、部分动画效果
• JavaScript:页面行为：部分动画效果、页面与用户的交互、页面功能

JavaScript引入：

• 行间事件（主要用于事件）

<input type="button" name="" onclick="alert('ok!');">

• 页面script标签嵌入

<script type="text/javascript">
    alert('ok!');
</script>

• 外部引入

<script type="text/javascript" src="js/index.js"></script>

变量、数据类型及基本语法规范

Javascript是一种弱类型语言，javascript的变量类型由它的值来决定。定义变量需要用关键字’var’

• 例如：

  var iNum=123;
  var sTr='asd';
  

• 同时定义多个变量可以用’,'隔开，共用一个’var’关键字

  var iNum=45,sTr='qwe',sCount='68';
  

变量类型

五种基本数据类型：

• number
  • 数字类型
• **string **
  • 字符串类型
• **boolean **
  • 布尔类型 true或false
• **undefined **
  • undefined类型，变量声明未初始化，它的值就是undefined
• **null **
  • null类型，表示空对象，如果定义的变量将来准备保存对象，可以将变量初始化为null,在页面上获取不到对象，返回的值就是null

复合类型：object

javascript语句与注释

1、javascript语句开始可缩进也可不缩进，缩进是为了方便代码阅读，一条JavaScript语句应该以’;'结尾；

例如：

<script type="text/javascript">
var iNum=123;
var sTr='asd123';
function fnAlert(){
    alert(sTr);
}
fnAlert();
</script>

2、javascript注释

• //单行注释
• /* */** 多行注释**

变量、函数、属性、函数参数命名规范：

1、区分大小写**
2、第一个字符必须是字母、下划线或者美元符号$
**3、其他字符可以是字符、下划线、美元符或数字

函数

函数就是重复执行的代码片

• 函数定义与执行

<script type="text/javascript">
    //函数定义
    function fnAlert(){
        alert('hello!');
    }
    //函数执行
    fnAlert();
</script>

• 变量与函数预解析

  JavaScript解析过程分为两个阶段，先是编译阶段，然后执行阶段，在编译阶段会将function定义的函数提前，并且将var定义的变量声明提前，将他赋值为undefined.

  <script type="text/javascript">
      fnAlert();    //弹出hello!
      alert(iNum);   //弹出undefined
      function fnAlert(){
          alert('hello!');
      }
      var iNum=123;
  </script>
  

• 函数传参javascript的函数中可以传递参数

  <script type="text/javascript">
      function fnAlert(a){
          alert(a);
      }
      fnAlert(12345);
  </script>
  

• 函数‘return’关键字

  • 返回函数中的值或者对象
  • 结束函数的运行

  <script type="text/javascript">
      function fnAdd(iNum01,iNum02){
          var iRs=iNum01+iNum02;
          return iRs;
          alert('hello');
      }
      var iCount=fnAdd(3,4);
      alert(iCount); //弹出7
  </script>
  

条件语句

通过条件来控制程序的走向，就需要用到条件语句**
**条件运算符：

• ==
• ===
• >
• >=
• <
• ** **<=
• ** **!=
• ** &&(而且)**
• ** ||(或者)**
• ** !(否)**

if else
var iNum01=3;
var iNum02=5;
var sTr;
if (iNum01>iNum02){
    sTr='大于';
}
else
{
    sTr='小于';
}
alert(sTr);

多重 if else 语句
var iNow=1;
if(iNow==1)
{
    ...;
}
else if (iNow==2)
{
    ...;
}
else
{
    ...;
}

事件属性：

元素上除了有样式，id等属性外，还有事件属性，常用的事件属性由鼠标点击事件属性（onclick),鼠标移入事件属性（mouseover),鼠标移出事件属性（mouseout)，将函数名称赋值给元素事件属性，可以将事件和函数关联起来。

<div id="a">我是你爸爸</div>
<script type="text/javascript">
    var i=document.getElementById("a");
    i.onclick=f;
    function f(){
        alert('ok!');
    }
</script>

匿名函数

定义的函数可以不给名称，这个叫做匿名函数，可以将匿名函数的定义直接赋值给元素的事件属性来完成事件和函数的关联，这样可以减少函数命名，并且简化代码，函数如果做公共函数，就可以写成匿名函数的形式。

<script type="text/javascript">
    window.onload=function(){    //等到页面加载完后自动执行该函数
        var i=document.getElementById("a");
        i.onclick=function(){
            alert("ok!");
        }
    }
</script>

<div id="a">我是你爸爸</div>