JavaScript简单入门

折戟沉沙灬

于 2018-09-10 21:58:08 发布

阅读量228

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_41963640/article/details/82596907

版权

JavaScript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1、javascript发展历程

Nombas 和 ScriptEase

大概在 1992 年，一家称作 Nombas 的公司开发了一种叫做 C 减减（C-minus-minus，简称 Cmm）的嵌入式脚本语言。Cmm 背后的理念很简单：一个足够强大可以替代宏操作（macro）的脚本语言，同时保持与 C （和 C ++）足够的相似性，以便开发人员能很快学会。这个脚本语言捆绑在一个叫做 CEnvi 的共享软件中，它首次向开发人员展示了这种语言的威力。

Nombas 最终把 Cmm 的名字改成了 ScriptEase，原因是后面的部分（mm）听起来过于消极，同时字母 C “令人害怕”。

现在 ScriptEase 已经成为了 Nombas 产品背后的主要驱动力

Netscape 发明了 JavaScript

当 Netscape Navigator 崭露头角时，Nombas 开发了一个可以嵌入网页中的 CEnvi 的版本。这些早期的试验被称为 Espresso Page（浓咖啡般的页面），它们代表了第一个在万维网上使用的客户端语言。而 Nombas 丝毫没有料到它的理念将会成为万维网的一块重要基石。

当网上冲浪越来越流行时，对于开发客户端脚本的需求也逐渐增大。此时，大部分因特网用户还仅仅通过 28.8 kbit/s 的调制解调器连接到网络，即便这时网页已经不断地变得更大和更复杂。而更加加剧用户痛苦的是，仅仅为了简单的表单有效性验证，就要与服务器进行多次地往返交互。设想一下，用户填完一个表单，点击提交按钮，等待了 30 秒的处理后，看到的却是一条告诉你忘记填写一个必要的字段。

那时正处于技术革新最前沿的 Netscape，开始认真考虑开发一种客户端脚本语言来解决简单的处理问题。

当时工作于 Netscape 的 Brendan Eich，开始着手为即将在 1995 年发行的 Netscape Navigator 2.0 开发一个称之为 LiveScript 的脚本语言，当时的目的是在浏览器和服务器（本来要叫它 LiveWire）端使用它。Netscape 与 Sun 及时完成 LiveScript 实现。

就在 Netscape Navigator 2.0 即将正式发布前，Netscape 将其更名为 JavaScript，目的是为了利用 Java 这个因特网时髦词汇。Netscape 的赌注最终得到回报，JavaScript 从此变成了因特网的必备组件。

三足鼎立

因为 JavaScript 1.0 如此成功，Netscape 在 Netscape Navigator 3.0 中发布了 1.1 版。恰巧那个时候，微软决定进军浏览器，发布了 IE 3.0 并搭载了一个 JavaScript 的克隆版，叫做 JScript（这样命名是为了避免与 Netscape 潜在的许可纠纷）。微软步入 Web 浏览器领域的这重要一步虽然令其声名狼藉，但也成为 JavaScript 语言发展过程中的重要一步。

在微软进入后，有 3 种不同的 JavaScript 版本同时存在：Netscape Navigator 3.0 中的 JavaScript、IE 中的 JScript 以及 CEnvi 中的 ScriptEase。与 C 和其他编程语言不同的是，JavaScript 并没有一个标准来统一其语法或特性，而这 3 种不同的版本恰恰突出了这个问题。随着业界担心的增加，这个语言的标准化显然已经势在必行。

标准化

1997 年，JavaScript 1.1 作为一个草案提交给欧洲计算机制造商协会（ECMA）。第 39 技术委员会（TC39）被委派来“标准化一个通用、跨平台、中立于厂商的脚本语言的语法和语义”(http://www.ecma-international.org/memento/TC39.htm)。由来自 Netscape、Sun、微软、Borland 和其他一些对脚本编程感兴趣的公司的程序员组成的 TC39 锤炼出了 ECMA-262，该标准定义了名为 ECMAScript 的全新脚本语言。

在接下来的几年里，国际标准化组织及国际电工委员会（ISO/IEC）也采纳 ECMAScript 作为标准（ISO/IEC-16262）。从此，Web 浏览器就开始努力（虽然有着不同的程度的成功和失败）将 ECMAScript 作为 JavaScript 实现的基础。

2、安装、配置开发环境

安装：客户端编程不需要安装【服务端开发：需要安装NodeJS环境】
配置：客户端编程不需要配置【服务端开发：需要配置开发环境】
开发环境：客户端编程~浏览器环境【浏览器引擎对象中包含了JS解释器】
服务端编程~NodeJS运行

3、基本语法

3.1、代码位置

代码位置：三个位置
参考样式：标签内嵌style属性、网页内嵌

<div onclick=’javascript:alert(“信息”)’></div>
<div onclick=’alert(“信息”)’></div>

网页内嵌~ JS代码写在一对标签中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #box{
            width: 500px;
            height: 500px;
            background: aqua;
            margin: auto;
            color:white;
            font-size:72px;
            text-align:center;
        }
    </style>
</head>
<body>
    <div id="box">

    </div>
</body>
<script>
    // 获取网页中的id为box的标签
    var _box = document.getElementById("box");
    _box.onclick = function () {
        _box.innerText = "nihao!";
    }
</script>
</html>

外部脚本~ JS代码写在一个js文件中，通过script标签引入到HTML网页

<!-- 引入一个外部的js文件：路径~相对路径：切记不要使用绝对路径 -->
<script src="demo02.js"></script>

3.2、各种对话框

javascript的三种对话框是通过调用window对象的三个方法alert()，confirm()和prompt()来获得，可以利用这些对话框来完成js的输入和输出，实现与用户能进行交互的js代码。

对话框	语法	描述
alert()	alert(“文本”)。	alert是警告框，只有一个按钮“确定”无返回值，警告框经常用于确保用户可以得到某些信息。当警告框出现后，用户需要点击确定按钮才能继续进行操作。
confirm()	confirm(“文本”)	confirm是确认框，两个按钮，确定或者取消，返回true或false。确认框用于使用户可以验证或者接受某些信息。当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。
prompt()	prompt(“文本”,”默认值”)	prompt是提示框，返回输入的消息，或者其默认值提示框经常用于提示用户在进入页面前输入某个值。当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。

警告框：

<!DOCTYPE html>
<html lang="en">
<head>
    <title>编写html页面</title>
    <meta charset="UTF-8">
</head>
<body>
    <script> //JavaScript脚本标注
        alert("警告！非法浏览网站...");//在页面上弹出警告框
    </script>
</body>
</html>

这里写图片描述

确认对话框：

<html>
<head>
    <title>编写html页面</title>
    <meta charset="UTF-8">
</head>
<body>
    <script language="javascript"> //js脚本标注
        var con;
        con = confirm("你是否还记得我?"); //在页面上弹出对话框
        if(con == true){
            alert("记得，只是在人群中多看了你一眼！");
        }else {
            alert("你谁呀!");
        }
    </script>
</body>
</html>

这里写图片描述

提示框

<html>
<head>
    <title>编写html页面</title>
    <meta charset="UTF-8">
<script language="javascript"> //js脚本标注
var str;
/*
在页面上弹出提示对话框，
将用户输入的结果赋给变量str
*/
str = prompt("你还好吗?"); 

alert(str); //输出用户输入的信息
</script>
</head>
</html>

这里写图片描述

确认	取消：返回null

3.3、基本数据类型

JavaScript中有五种基本数据类型（也叫做简单数据类型）分别为：undefined、null、bolean、number、string

类型	描述
Undefined	Undefined类型只有一个值，即特殊的undefined。在使用var声明变量但未对其加以初始化时，这个变量的值就是undefined
null	Null类型是第二个只有一个值的数据类型，这个特殊的值是null。从逻辑角度来看，null值表示一个空对象指针，而这也正是使用typeof操作符检测null时会返回object的原因。
Boolean	true和false。
Number	用来表示整数和浮点数值，还有一种特殊的数值，即NaN（非数值 Not a Number）。这个数值用于表示一个本来要返回数值的操作数未返回数值的情况（这样就不会抛出错误了）。例如，在其他编程语言中，任何数值除以0都会导致错误，从而停止代码执行。但在JavaScript中，任何数值除以0会返回NaN，因此不会影响其他代码的执行。NaN本身有两个非同寻常的特点。首先，任何涉及NaN的操作（例如NaN/10）都会返回NaN，这个特点在多步计算中有可能导致问题。其次，NaN与任何值都不相等，包括NaN本身。
String	String类型用于表示由零或多个16位Unicode字符组成的字符序列，即字符串。字符串可以由单引号(‘)或双引号(“)表示。

3.4、各种运算符

算术运算符：+、-、*、/、%…
赋值运算符： =、+=、-=…
比较运算符：> 、< 、==（值相等）、===（全等，值和类型都相等）…
逻辑运算符：&&（与）、||（或）、！（非）
其他运算符。。。

3.5、变量声明

JS是弱类型的语言，变量的操作使用和python一样
声明变量即可赋值使用
name = “jerry”; （不推荐）
JS推荐，任意变量，先通过var关键字声明，然后赋值使用
var name = “tom”;

3.6、js用途

问题：网页中的JS是用来作什么的？
实现网页特效、数据验证、数据交互等操作
核心：JS操作HTML标签[标签/属性/样式/内容]
JS中获取标签对象

根据标签的id属性获取一个标签对象
document.getElementById(“id的值”)

3.7、选择结构

JS中，提供了两种选择结构
判断结构：if-else结构【可以进行范围判断，使用比较运算符】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选择结构</title>
    <style>

    </style>
</head>
<body>
<div class="box">
    <table border="1">
        <tr>
            <td>编号</td>
            <td>商品</td>
            <td>价格</td>
        </tr>
        <tr>
            <td>1</td>
            <td>辣椒</td>
            <td>￥4元</td>
        </tr>
        <tr>
            <td>2</td>
            <td>鸡蛋</td>
            <td>￥3.5元</td>
        </tr>
    </table>
</div>
<input type="text" id="id-number" placeholder="请输入商品编号："><br>
<input type="text" id="jin-number" placeholder="请输入斤数：">
<button id="sub">提交</button>
<div id="subtotal">等待结果</div>
<script>
    var _id = document.getElementById("id-number");
    var _jin = document.getElementById("jin-number");
    var _st = document.getElementById("subtotal");
    var _btn = document.getElementById("sub");

    //添加事件
    _btn.onclick = function () {
        //判断
        if (_id.value == 1){
            _st.innerText = "金额：" + 4 * _jin.value;
        }else if (_id.value == 2){
            _st.innerText = "金额：" + 3.5 * _jin.value;
        }else{
            console.log(_id);
            _st.innerText = "没有这个商品！"
        }
    }
</script>
</body>
</html>

这里写图片描述
选择结构：switch-case结构【直接进行全等判断】

 switch (_id.value){
            case "1":
                _st.innerText = "金额：" + 4 * _jin.value;
                break;
            case "2":
                _st.innerText = "金额：" + 3.5 * _jin.value;
                break;
            default:
                console.log(_id.value);
                _st.innerText = "没有这个商品！"
        }

3.8、循环结构

for循环
while循环【先判断再循环】
do-while【先循环一次，再判断】

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>99乘法表</title>
    <style>
        span{
            display: inline-block;
            width: 50px;
            border: 1px solid darkorange;
            margin-right: 10px;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>

<script>
    // for (var i = 1; i < 10; i++) {
    //
    //     for (var j = i; j < 10; j++) {
    //         document.write("<span>"+i+"x"+j+"=" + i*j +"</span>");
    //     }
    //     document.write("<br/>")
    // }

    /*****    while循环         *********************************************/
    // var i = 1;
    // while(i < 10){
    //     var j = 1;
    //     while (j <= i) {
    //         document.write("<span>"+i+"x"+j+"=" + i*j +"</span>");
    //         j++;
    //     }
    //     i++;
    //     document.write("<br/>")
    // }

    // var i = 1;
    // while(i < 10){
    //     var j = i;
    //     while (j < 10) {
    //         document.write("<span>"+i+"x"+j+"=" + i*j +"</span>");
    //         j++;
    //     }
    //     i++;
    //     document.write("<br/>")
    // }

    /******  do-while              ****************************************/
    var i = 1;
    do{
        var j = i;
        do{
            document.write("<span>"+i+"x"+j+"=" + i*j +"</span>");
            j++;
        }while(j < 10);
        document.write("<br/>");
        i++;
    }while(i < 10);
</script>
</body>
</html>

这里写图片描述

3.9、数组操作

数组一旦创建，就是固定的长度~如果要实现真实删除一个数据：创建一个新数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组的增删改查</title>
    <script>

    </script>
</head>
<body>

<script>
    /*
    数组：一般保存一组数据的数据结构
    一般情况下，使用方括号表示；
    属于Array类型|数组类型
     */
    var _names = Array(); //声明了一个空数组（不常用）
    var _users = [];//声明了一个空数组（常用）

    console.log(typeof(_names));
    console.log(typeof(_users));

    console.log(_names);
    console.log(_users);

    //数组中的数据个数|数组长度
    console.log(_names.length);

    //数组末尾追加数据
    _names.push("tom");
    console.log(_names);

    //在数组开头增加数据
    _names.unshift("shuke");
    console.log(_names);

    //删除末尾数据
    // _names.pop();
    // console.log(_names);

    //删除开头数据
    _names.shift();
    console.log(_names);
    console.log(_names.length);

</script>
</body>
</html>