美文网首页
JavaScript基础入门教程

JavaScript基础入门教程

作者: java大数据编程 | 来源:发表于2018-08-27 11:52 被阅读4次

概述

简介

  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>

相关文章

网友评论

      本文标题：JavaScript基础入门教程

      本文链接：https://www.haomeiwen.com/subject/qcmziftx.html

      延伸阅读

      深度阅读

      • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

      栏目导航

      热点阅读

      关于我们|服务条款|联系我们|JavaScript基础入门教程|投稿指南|网站地图|RSS订阅|排版工具|手机版

      提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

      Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

      备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

      本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

      所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！