03.JavaScript

2019-06-14 本文已影响0人 xinyaZ

JavaScript特性

脚本语言。JavaScript是一种解释型的脚本语言,在程序的运行过程中逐行进行解释。

基于对象。JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。

简单。JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求,是基于Java基本语句和控制的脚本语言。

动态性。JavaScript是一种采用事件驱动的脚本语言,它不需要经过Web服务器就可以对用户的输入做出响应。

跨平台性。JavaScript脚本语言不依赖于操作系统,仅需要浏览器的支持。

JavaScript语法

1. 变量

在JavaScript中通过var关键字来声明一个变量，在使用的过程中可以赋任意值。严格区分大小写。

<script type="text/javascript">
    //1.变量声明
    //JS是一门弱类型的语言，声明变量只需要使用一个var关键字即可
    var a;
    //2.变量赋值
    //JS还是一门动态类型的语言，在使用变量的过程中可以赋任意值
    a=123;
    a="hello";
    a='world';
    a=true;
    //3.变量严格区分大写小写
    var num = 666;
    alert(Num);
</script>

2. 函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

函数声明

在JavaScript中通过function关键字来声明一个函数，在声明函数数不需要指定返回值类型和参数的类型

声明函数有以下两种方式：
```
//方式一：
function fun(){
    //函数体
}  
//方式二：
var fun2 = function(var1,var2){
    //函数体
    return a * b;
}
```
函数调用

调用JavaScript函数时系统不检查传入参数的个数和类型。
```
var result = fun2(1,"hello","JS");
alert(result);
```

3. 对象

JavaScript 对象是拥有属性和方法的数据。在 JavaScript中，几乎所有的事物都是对象。

对象的创建

//第一种，使用new Object()创建
var obj = new Object();
//第二种，使用{}创建
var obj = {};

为对象添加属性

//第一种，通过 对象.属性名 = “属性值” 添加
obj.name = "zhangsan";
obj.age = 12;
obj.sum = function(a,b){
return a+b;
}
//第二种，使用{}创建对象时，直接向对象中添加属性
var obj = {"name" : "zhangsan","age" : 21,
           "sum" : function(a,b){ return a+b;}
};

函数也是对象

在JavaScript中，函数也作为一种数据类型存在，而且是引用数据类型，函数名就是指向其内存空间地址的引用。

var a = function() {
 alert("A");
};
var b = a;
a.fname = "tom";
alert(b.fname); //结果为tom
alert(b);//alert a 的整体内容：function(){...}
b();//A

函数执行

函数名 + ( )

<p id="demo">段落</p>
<script>
 function myFunction(a,b){
     return a*b;
 };
 //将p内容“段落”修改为“20”
 document.getElementById("demo").innerHTML=myFunction(2, 10);
</script>

4. this关键字

在JavaScript函数中，this关键字指向的是调用当前函数的对象。

var obj01 = {
      name : "obj01 name",
      getName : showName
  };
  var obj02 = {
      name : "obj02 name",
      getName : showName
  };
  function showName() {
      alert(this.name);
  }
  obj01.getName();//结果为 obj01 name
  obj02.getName();//结果为 obj02 name

Javascript输出

JavaScript 可以通过不同的方式来输出数据：

window.alert()

使用 window.alert() 弹出警告框。

<script>
    window.alert(5 + 6);
</script>

document.write()

使用 document.write() 方法将内容写到 HTML 文档中。

如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。

<p>我的第一个段落。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction() {
    document.write(Date());
}
</script>

innerHTML

使用 innerHTML 写入到 HTML 元素。

使用 document.getElementById(id) 来访问 HTML 元素。并 innerHTML 来获取或插入元素内容：

<p id="demo">我的第一个段落</p>
<script>
    document.getElementById("demo").innerHTML = "段落已修改。";
</script>
//document.getElementById("demo") 是使用 id 属性来查找 HTML 元素的 JavaScript 代码 。
//innerHTML = "段落已修改。" 是用于修改元素的 HTML 内容(innerHTML)的 JavaScript 代码。

console.log()

使用 console.log() 写入到浏览器的控制台。

<script>
    a = 5;
    b = 6;
    c = a + b;
    console.log(c);
</script>

JavaScript事件驱动

事件

用户事件：用户操作，例如单击、鼠标移入、鼠标移出等。

系统事件：由系统触发的事件，例如文档加载完成。

事件可以用于处理表单验证，用户输入，用户行为及浏览器动作:

页面加载时触发事件

页面关闭时触发事件

用户点击按钮执行动作

验证用户输入内容的合法性

自定义事件响应函数

从文档对象模型中获取控件对象[借助DOM API实现]
声明一个事件响应函数
将事件响应函数的引用赋值给控件对象的事件属性

例如：window.onload = function(){}

事件执行过程

声明一个函数：不执行
将函数绑定到指定元素的事件上：函数也不执行

触发元素的事件：函数执行

window 对象：代表当前游览器窗口；

onload事件：将整个文档加载后触发；

<script type="text/javascript">
  //借助window.onload事件,在这个页面加载完成后执行程序代码
  window.onload = function(){
      //1.声明一个函数
      function dL(){
          alert("我爆炸了……");
      }
      //2.获取事件对象
      var btnEle = document.getElementById("btnId");
      //3.将函数绑定到元素的单击事件上
      btnEle.onclick = dL;
    //注意：赋给element的单击事件的是函数整体，不是函数的执行结果
  };
</script>
<body>
   //4.当触发btnId的单击事件时函数才执行
  <button id="btnId">SayHello</button>
</body>

取消控件默认行为

默认行为

[1]超链接跳转页面

[2]submit按钮提交表单

取消方式：return false

<head>
<script type="text/javascript">
    window.onload = function(){
        //获取提交按钮并给它绑定单击事件
        var subEle = document.getElementById("sub");
        subEle.onclick = function(){
            //获取文本框对象
            var inputEle = document.getElementById("username");
            //获取用户输入的用户名
            var inputValue = inputEle.value;
            //判断用户输入的值是否为空
            if(inputValue == ""){
                alert("用户名不能为空！");
                //取消默认行为
                return false;
            }
        };
        //给超链接绑定单击事件
        document.getElementById("aEle").onclick = function(){
            //取消超链接的默认行为
            return false;
        };
        
    };
</script>
</head>
<body>
    <form action="dom查询.html">
        用户名：<input type="text" name="username" id="username"><br><br>
        <input type="submit" id="sub">
    </form>
    <a href="dom查询.html" id="aEle">去dom查询页面</a>
</body>

JavaScript嵌入方式

游览器加载顺序：按从上到下的顺序加载，遇到script标签先执行脚本程序，执行完成后再继续加载

写在标签的事件属性中，结构与行为相耦合，不建议使用
```
<button id="btnId" onclick="alert('Hello JS')">SayHello</button>
```

写在script标签中，script标签放到head标签中

<script type="text/javascript">
 var btnEle = document.getElementById("btn");
 btnEle.onclick = function() {
     alert("hello");
 };
</script>
</head>
<body>
 <button id="btn">点我</button>
</body>

无法获取body标签中的节点，使用window.onload=function(){}，在页面加载完成后执行程序代码。

<script type="text/javascript">
    window.onload = function(){
         //获取按钮对象
         var btnEle = document.getElementById("btnId");
         //给按钮对象绑定单击事件
         btnEle.onclick = function(){
             alert("Hello");
         };
    };
</script>

写在script标签中，script标签放到body标签后面，可以获取节点，但是不符合我们的习惯

<script type="text/javascript">
    //获取按钮对象
    var btnEle = document.getElementById("btnId");
    //给按钮对象绑定单击事件
    btnEle.onclick = function(){
         alert("Hello");
    };
</script>

引入外部js文件，script标签放到head标签中

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