JavaScript简单入门

编程语言 2018-09-14 22:50:47 阅读次数: 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>

猜你喜欢

转载自blog.csdn.net/qq_41963640/article/details/82596907
今日推荐
《美国对全球网络空间安全与发展的威胁和破坏》报告发布
火速冲上 GitHub 热榜 —— 开源编程语言、框架哪有这么可爱？
北京人形机器人创新中心发布全球首个纯电驱拟人奔跑的全尺寸人形机器人“天工”
LFOSSA 源来如此公开课 | 掌握云原生未来：CNCF 认证全面攻略与备考秘籍
周排行
让自己的头脑极度开放
CentOS 6.5(x64) 和Redhat6.5操作系误删libc
高可用注册中心
【日记】12.28/【题解】AtCoder AGC041
XML（5）_XML 约束_DTD
Java集合Map（四）
树梅派安装桌面环境教程
pipenv 的 使用和安装
小程序白屏问题和内存研究
C语言简单选择排序
每日归档
更多
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)
2024-04-28(0)
2024-04-27(56)
2024-04-26(39)
2024-04-25(22)
2024-04-24(36)
2024-04-23(26)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022