JavaScript基础入门教程

2018-08-27 本文已影响4人 java大数据编程

概述

简介

JavaScript是一种轻量级的脚本语言,是可插入HTML页面的编程代码。JavaScript插入HTML页面后，由所有的现代浏览器执行。

组成部分

ECMAScript：整个javascript核心，包含（基本语法、变量、关键字、保留字、数据类型、语句、函数等）
DOM：文档对象模型，包含整个html页面的内容
BOM：浏览器对象模型，包含整个浏览器相关内容

JS组成部分.png

用法

脚本必须位于<script>和</script>标签之间
内部脚本：脚本放置在HTML页面的<body>和<head>部分中

内部脚本1.png

内部脚本2.png

外部脚本：脚本可保存在外部文件中，外部文件通常包含被多个网页使用的代码。外部JS文件的扩展名为.js。如需使用外部文件，在<script>标签的src属性中设置该.js文件。

外部脚本1.png

外部脚本2.png

核心语法

变量

变量可以字母、$和_开头，对大小写敏感
在JavaScript中使用var关键字声明变量：var carname;使用等号赋值：carname=“Volvo”;
声明无值的变量，其值是undefined

数据类型

JavaScript中数据类型有数字（Number）、字符串（String）、布尔（Boolean）、数组（Array）、对象（Object）、空（Null）、未定义（Undefined）。

JavaScript拥有动态类型，相同的变量可用作不同类型。

动态类型.png

JavaScript只有一种数字类型。数字可带小数点，也可不带。

数字类型.png

JavaScript字符串可以是引号中的任意文本，可使用单引号或双引号。

字符串类型1.png

字符串类型2.png

JavaScript布尔（逻辑）只能是两个值：true或false （var x=true; var y =false;）
JavaScript数组下标从零开始

数组类型1.png

数组类型2.png

数组类型3.png

JavaScript对象由花括号分割。在括号内部，对象的属性以名称和值对形式（name:value)定义。属性由逗号分隔。

对象类型1.png

对象类型2.png

Undefined表示变量不含有值；null表示有值，为空。

运算符

<script type="text/javascript">
//运算符
var a = 5;
var b = 15;
var c = b/a;
alert(c);
</script>

运算符1.png

运算符2.png

<script type="text/javascript">
//数字与字符串相加，将成为字符串
var b = 15 + "5";
alert(b); //155
</script>

比较运算

<script type="text/javascript">
var a = 15;
var b = "15";

//判断值是否相等
alert(a == b); //true

//判断值和类型是否相等
alert(a === b); //false
</script>

比较运算.png

条件判断、switch及循环语句

if..else的语法和JAVA相同，不再举例

switch

<script type="text/javascript">
var a = "abc";
switch(a){
case "abc": alert("abc");break;
case "d": alert("d"); break;
}
</script>

JavaScript中也可以使用for、while、do..while循环，跟JAVA一样，不再举例

函数

用function定义函数，函数中的代码，只有在被调用时，才会执行

<head>
 <meta http-equiv="Content-Type" content="text/html; charset=GB18030">
 <title>Insert title here</title>
 <script type="text/javascript">
    function doit(){
        alert('doit');
    }
 </script>
</head>
<body>
 <script type="text/javascript">
    //调用函数
    doit();
 </script>
</body>

<head>
 <script type="text/javascript">
    function doit(){
        alert('doit');
    }
 </script>
</head>
<body>
 <button onclick="doit()">点击我看看</button>
</body>

JavaScript函数很灵活，无需声明类型；参数不一致也可调用；按照名称调用（大小写敏感）

<script type="text/javascript">
    //不用声明形式参数的类型
    function doit(a,b,c){
        alert(a);
        alert(b);
        alert(c);
    }
    //以下方式均可调用这个函数!
    doit();
    doit(15);
    doit(15,16);
    doit("a",'b',true);
    doit("a",'b',true,100);
</script>

事件

JavaScript处理逻辑既可以直接写到事件处理代码中；也可以写到函数中，然后调用。

<script type="text/javascript">
    function doit(){
        alert('鼠标移出了图片');
    }
    function dosomething(){
        alert("页面加载完成了！");
    }
    function selectit(){
        alert("下拉列表框改变了选择项！");
    }
</script>

<body onload="dosomething()">
    <img src="logo.gif" onmouseout="doit()"></img>
    <select onchange="selectit()">
        <option value="0">男</option>
        <option value="1">女</option>
        <option value="2">未知</option>
    </select>
    <input type="text" name="username" 
    onfocus="alert('username获得了焦点')" 
    onblur="alert('username失去了焦点')">
</body>

<head>
 <script type="text/javascript">
    function doit(){
        alert("xxxxx");
    }
    //可以使用这种方法定义onload事件（或其它事件）
    window.onload = doit;
 </script>
</head>
<body>
</body>

对象与类

对象（三大部分）

JavaScript内置的对象，比如：String、Array、Object、Date等
HTML DOM（Document Object Model，文档对象模型）对象
Browser对象（浏览器相关的对象）

注：http://www.w3school.com.cn/js/js_reference.asp ，有比较完整的说明。

字符串对象

<script type="text/javascript">
    var a = "Hello World";
    alert(a.length); //11

    var s = new String("中国，你好");
    alert(s.length); //5

    var s = "世界，你好";
    alert(s.substring(3)); //你好
</script>

数组对象

<script type="text/javascript">
    //定义一个数组
    var array1 = [1,2,3,4];
    
    //这也是定义一个数组
    var array2 = new Array();
    
    alert(array1.length); //4
    alert(array1[3]); //4
    alert(array1[4]); //undefine
    
    array1[4] = 18;
    array1[6] = 19;
    
    alert(array1[4]); // 18
    alert(array1[5]); //undefine
    alert(array1[6]); //19
</script>

自定义对象

<script type="text/javascript">
    //定义随意一个对象
    ////也可以写成var o = new Object();
    var o = {}; 
    //给对象增加属性
    o.name = "张三";
    o.sex = "男";
    o.age = 18;
    //给对象增加方法（函数）
    o.doit = function(){
        alert("doit被调用了！");
    }
    //获取对象的属性
    alert(o.age);
    //调用对象的方法
    o.doit();
</script>

类

JavaScript没有class关键字，JavaScript用function关键字来定义类！类就是函数，函数就是类。

<script type="text/javascript">
    //定义了一个名为Person的类，它也是一个函数
    function Person(){
        alert("Person函数被调用了！");
    }
    Person(); //把Person当函数调用
</script>

<script type="text/javascript">
    //定义了一个名为Person的类，它也是一个函数
    function Person(){
        alert("Person函数被调用了！");
    }

    //把Person当成类来用，在这种用法下，Person可称为构造函数
    var p = new Person(); 
</script>

DOM

文档对象模型

把HTML文档中的各种元素（标签）看成一个个对象，document是这些对象的根，用javascript可以操纵这些对象。

文档对象模型.png

Document文档对象

浏览器加载整个HTML文档形成Document对象，Document对象可访问和操作HTML文档中的所有元素。

获取元素

获取元素.png

<script type="text/javascript">
    function doit(){
        var links = document.getElementsByTagName("a");
        for(var i=0; i<links.length; i++){
            var link = links[i];
            alert(link.href);
        }
    }
</script>
</head>
<body onload="doit()">
    <a href=“http://www.itjmd.com”>金铭鼎</a>
    <a href="http://www.sina.com">新浪</a>
</body>

<script type="text/javascript">
    function doit(){
        //这就得到了那个下拉选择框对象
        var s = document.getElementById("selectme");

        //那么这个对象有哪些属性及哪些方法呢？请查阅文档，并测试
        alert(s.length); //4
        alert(s.value); //?
    }
</script>
<body onload="doit()">
    <select id="selectme" onchange="doit()">
        <option value="1">男</option>
        <option value="2">女</option>
        <option value="3">未知</option>
        <option value="4">未说明</option>
    </select>
</body>

创建元素

创建元素.png

常用属性

常用属性.png

Element元素对象

Element对象表示HTML文档中的元素(HTML称为标签)。元素可包含属性、其他元素或文本。也就是说HTML标签可以包含属性、其他子标签或文本。

常用方法.png

名词解释.png

BOM

Window对象

window对象代表当前的浏览器窗口
在JavaScript中定义的函数和变量，都是属于window对象的属性

<script type="text/javascript">
    var abc = "something";
    function hello(){
        alert("hello");
    }
    hello();
    window.hello();
    alert(window.abc);
</script>

利用window对象，在窗口之间进行交互

<script type="text/javascript">
    function openwin(){
        window.open("newwindow.html");
    }
    function hello(){
        alert("hello");
    }
</script>
<body>
    <input type="text" id="returnField"></input>
    <button onclick="openwin()">打开新窗口</button>
</body>

<script type="text/javascript">
    function closewin(){
        alert("即将关闭本窗口");
        //访问打开这个窗口的那个窗口对象
        window.opener.document.getElementById("returnField").value = "随便一个值";
        //访问打开这个窗口的那个窗口对象中的函数
        window.opener.hello();
        
        window.close(); //关闭本窗口
    }
</script>
<body>
    <button onclick="closewin()">关闭本窗口</button>
</body>

window对象方法

window对象方法1.png

window对象方法2.png

window对象方法3.png

Location对象

Location对象包含有关当前URL的信息。

Location对象属性.png

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>location对象</title>
        <script>
            function tiao() {
                window.location.href = "https://www.baidu.com";
            }
        </script>
    </head>
    <body>
        <a href="#" onclick="tiao()">百度一下</a>
    </body>
</html>

History对象

History对象：包含用户（在浏览器窗口中）访问过的URL。

History对象方法.png

<script type="text/javascript">
    function gotoback(){
        window.history.back();
    }
</script>
<body>
    本页是javascript_27.html <br/>
    <a href="javascript_27_01.html">下一页</a>
    <a href="javascript:gotoback()">上一页</a>
</body>

<script type="text/javascript">
    function gotoback(){
        window.history.back();
    }
</script>
<body>
    本页是javascript_27_01.html <br/>
    <a href="javascript_27_02.html">下一页</a>
    <a href="javascript:gotoback()">上一页</a>
</body>

<script type="text/javascript">
    function gotoback(){
        window.history.back();
    }
</script>
<body>
    本页是javascript_27_02.html <br/>
    <a href="javascript:gotoback()">上一页</a>
</body>