JavaScript入门介绍 1 2021/02/27

一、JavaScript简介一

1.1 javascript 简介

  • JavaScript是Web页面中的一种脚本编程语言,可用于Web系统的客户端和服务器端编程
  • 前身叫做LiveScript,是Netscape公司开发的脚本语言。在Sun公司推出Java语言后, Netscape公司和Sun公司于1995年一起重新设计了LiveScript,并将其更名为JavaScript。

1.2 JavaScript 嵌入

  1. 在 Html 中嵌入 Html

    • 在HTML中通过**<script>… </ script>**引入JavaScript代码

    • 当浏览器读取到**<script>**标记时,解释执行其中的脚本。

  2. script的两个属性

    • type=“text/javascript”
    • src=“url”

1.3 JavaScript 编程基础 & 流程控制语句

  1. **常量:**数值型(整数、浮点数)、字符串和布尔型

  2. 变量

    1. 使用变量 **“var”**声明变量。
    2. JavaScript是弱类型语言,莫名其妙可能就从 int 变成了 string,这里给出下面的类型转换函数
      1. **Number(mix)函数,可以将任意类型的参数mix转换为数值类型。**其规则为:
        • 如果是布尔值,true和false分别被转换为1和0
        • 如果是数字值,返回本身。
        • 如果是null,返回0
        • 如果是undefined,返回NaN
        • 如果是字符串,遵循以下规则:
          a.如果字符串中只包含数字,则将其转换为十进制(忽略前导0)
          b.如果字符串中包含有效的浮点格式,将其转换为浮点数值(忽略前导0)
          c.如果是空字符串,将其转换为0
          d.如果字符串中包含非以上格式,则将其转换为NaN
        • 如果是对象,则调用对象的valueOf()方法,然后依据前面的规则转换返回的值。如果转换的结果是NaN,则调用对象的toString()方法,再次依照前面的规则转换返回的字符串值。
      2. parseFloat(string)函数,将字符串转换为浮点数类型的数值。
        • 它的规则与parseInt基本相同,但也有点区别:字符串中第一个小数点符号是有效的,
        • 另外parseFloat会忽略所有前导0,如果字符串包含一个可解析为整数的数,则返回整数值而不是浮点数值。
      3. toString(radix)方法
        • 除undefined和null之外的所有类型的值都具有toString()方法,其作用是返回对象的字符串表示。
      4. parseInt(string, radix)函数,将字符串转换为整数类型的数值。它也有一定的规则:
        • 忽略字符串前面的空格,直至找到第一个非空字符
        • 如果第一个字符不是数字符号或者负号,返回NaN
        • 如果第一个字符是数字,则继续解析直至字符串解析完毕或者遇到一个非数字符号为止
        • 如果上步解析的结果以0开头,则将其当作八进制来解析;如果以x开头,则将其当作十六进制来解析
        • 如果指定radix参数,则以radix为基数进行解析
      5. Boolean(mix)函数,将任何类型的值转换为布尔值。
  3. 运算符

    • 算术运算符:+、-、*、/、%(取余数)、++、–

    • 关系运算符:<、<=、>、>=、= =、!=

    • 逻辑运算符:&&、||、!

    • 字符串运算符:+(连接) 这个在java中也是有的

    • 赋值运算符:=

    • 条件运算符:condition?true_result:false_result

  4. 流程控制语句

    1. 顺序结构
    2. 分支结构
      • if — else —
      • switch
    3. 循环结构
      • for
      • while
      • do while

1.4 JavaScript 对话框

这里我们介绍三个最常用的对话框

  1. alert:警告对话框

  2. confirm:确认对话框,返回一个bool值

  3. prompt:输入对话框

示例:

​ 询问用户是否学习过Java语言,如果学习过,输入考试分数,对分数进行评价;如果没有学习过,提示需要先学习Java才能继续。

代码:

<!--Java-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaTest</title>
</head>
<script type="text/javascript">
    var learned = confirm("have you ever learned java?");
    if (learned) {
        var score = prompt("what's you score?");
        score = Number(score);
        var res = "";
        switch (score / 10) {
            case 10:
                res = "all right!"; break;
            case 9:
                res = "A";  break;
            case 8:
                res = "B";  break;
            case 7:
                res = "C"; break;
            case 6:
                res = "D";  break;
            default:
                res = "E";
        }
        alert("The res:" + res + "!");
    } else {
        alert("sorry, without the data we can't conclude!");
    }
</script>
<body>

</body>
</html>

1.5 JavaScript 对象

java的对象分为内置对象,自定义对象,和浏览器对象,下面我们介绍一下javaScript的内置对象

  • 在JavaScript中,可通过new运算符来创建对象,即**变量名= new 对象名() **
  • 将新创建的对象赋予一个变量后,就可以通过这个变量访问对象的属性和方法

下面我们介绍几个常见的对象

  • Date对象:该对象主要提供获取和设置日期和时间的方法。例如,getFullYear() 、getMonth() 、getDate () 、getDay ()

  • String对象:该对象提供了对字符串进行处理的属性和方法。例如:length()、toLowerCase()、toUpperCase()、substr()

  • Array对象:在JavaScript中,使用内置对象Array创建数组对象。格式为:var arrayname=new Array(arraysize)

注意这个对象的声明依旧是 使用 var,只不过new 后面跟了类型

下面我们给出一个JavaScript内置对象的示例

<!--Java-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaTest</title>
</head>
<script type="text/javascript">
    var date = new Date();
    var curDay = date.getDay();     <!--获取当前星期-->


    alert("Day" + date.getDay());           <!--获取当前星期-->
    alert("Year" + date.getFullYear());      <!--获取当前年份-->
    alert("Month" + date.getMonth());
    alert("Date" + date.getDate());
    alert("Hours" + date.getHours());         <!--获取当前时间-->

</script>
<body>

</body>
</html>

下面我们给出具体官方的自定义对象方法的介绍:

  • Date对象

  • 其他对象就是Date对象的旁边,这里就不给了。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TviLtMZY-1614774645823)(E:\markdownTypora\typora_intall\文档\image-20210227184515180.png)]

1.6 事件驱动

  1. 事件驱动的定义

    用户操作事件(操作鼠标或按键的动作)或系统操作事件(如载入页面等)引起一连串程序动作的执行方式,称为事件驱动。

  2. 事件处理的定义

    为了响应某个事件而进行的处理过程,称为事件处理。

  3. 事件处理程序的定义

    对事件进行处理的过程或函数,称为事件处理程序。

JavaScript使用事件的两种方法----HTML标记或使用JavaScript语句

  • 许多HTML标记允许加上以事件名为名的属性,
    • 如在按钮标记中加上onclick事件属性,并为该属性给出值。
    • 例如,设计一个表单,放入两个按钮,单击它们时将显示内容。
  • 使用事件的另一种方法是使用JavaScript语句:对象.事件=函数名。

下面我们给出一个示例:

要求用户输入圆 的半径,计算并输出圆的面积

主要是使用了第一种的方法。

<!--Java-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaTest</title>
</head>
<script type="text/javascript">
    function calArea() {
        var radius = prompt("请输入圆的半径,进行计算");
        radius = Number(radius);
        if (radius < 0) {
            alert("数据范围错误");
        } else {
            alert("S=" + (3.14 * radius * radius));
        }
    }
</script>
<body>
<input type="button" name="btn" value="点击开始进行圆的面积" onclick="calArea()" />
</body>
</html>

完成数据的累加和计算

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>累加和计算</title>
</head>
<script>
    function sum() {
        var n = prompt("请输入一个正整数n,计算1~n累加和");
        if (n < 1) {     <!--数据输入有误-->
            var myContinue = confirm("数据输入有误,是否继续输入正确数据");
            if (myContinue) {
                sum();      <!--继续递归调用-->
            }
        } else {
            <!--必须要强制类型转换-->
            n = Number(n);
            var res = (n + 1) * n / 2;
            alert("1+2+...+" + n + "结果=" + res);
        }
    }
</script>
<body>
<input type="button" name="btn1" value="开始计算累加和" onclick="sum()" />
</body>
</html>

二、JavaScript简介二

已标记关键词 清除标记
相关推荐
<div class="lemma-summary"> <div class="para">JavaScript(简称“JS”) 是一种具有函数优先的轻量级,解释型或即时编译型的高级<a href="https://baike.baidu.com/item/%E7%BC%96%E7%A8%8B%E8%AF%AD%E8%A8%80/9845131" target="_blank" rel="noopener" data-lemmaid="9845131">编程语言</a>。虽然它是作为开发<a href="https://baike.baidu.com/item/Web/150564" target="_blank" rel="noopener" data-lemmaid="150564">Web</a>页面的脚本语言而出名的,但是它也被用到了很多非浏览器环境中,JavaScript 基于原型编程、多范式的动态脚本语言,并且支持面向对象、命令式和声明式(如<a href="https://baike.baidu.com/item/%E5%87%BD%E6%95%B0/301912" target="_blank" rel="noopener" data-lemmaid="301912">函数</a>式编程)风格。<sup class="sup--normal" data-sup="1" data-ctrmap=":1,"> [1]</sup><a class="sup-anchor" name="ref_[1]_16168"></a> </div> <div class="para">JavaScript1995年由<a href="https://baike.baidu.com/item/Netscape/2778944" target="_blank" rel="noopener" data-lemmaid="2778944">Netscape</a>公司的Brendan Eich,在网景导航者浏览器上首次设计实现而成。因为Netscape与<a href="https://baike.baidu.com/item/Sun/69463" target="_blank" rel="noopener" data-lemmaid="69463">Sun</a>合作,Netscape管理层希望它外观看起来像Java,因此取名为JavaScript。但实际上它的语法风格与<a href="https://baike.baidu.com/item/Self/4959923" target="_blank" rel="noopener" data-lemmaid="4959923">Self</a>及<a href="https://baike.baidu.com/item/Scheme/8379129" target="_blank" rel="noopener" data-lemmaid="8379129">Scheme</a>较为接近。<sup class="sup--normal" data-sup="2" data-ctrmap=":2,"> [2]</sup><a class="sup-anchor" name="ref_[2]_16168"></a> </div> <div class="para">JavaScript的标准是<a href="https://baike.baidu.com/item/ECMAScript%20/1889420" target="_blank" rel="noopener" data-lemmaid="1889420">ECMAScript </a>。截至 2012 年,所有浏览器都完整的支持ECMAScript 5.1,旧版本的浏览器至少支持ECMAScript 3 标准。2015年6月17日,ECMA国际组织发布了ECMAScript的第六版,该版本正式名称为 ECMAScript 2015,但通常被称为ECMAScript 6 或者ES6。<sup class="sup--normal" data-sup="1" data-ctrmap=":1,"> [1]</sup><a class="sup-anchor" name="ref_[1]_16168"></a> </div> </div>
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页