JavaScript入门介绍2021/02/27

JavaScript入门介绍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，这里给出下面的类型转换函数
    
    Number(mix)函数，可以将任意类型的参数mix转换为数值类型。其规则为：
    
    如果是布尔值，true和false分别被转换为1和0
    
    如果是数字值，返回本身。
    
    如果是null，返回0
    
    如果是undefined，返回NaN
    
    如果是字符串，遵循以下规则：
    a.如果字符串中只包含数字，则将其转换为十进制（忽略前导0）
    b.如果字符串中包含有效的浮点格式，将其转换为浮点数值（忽略前导0）
    c.如果是空字符串，将其转换为0
    d.如果字符串中包含非以上格式，则将其转换为NaN
    
    如果是对象，则调用对象的valueOf()方法，然后依据前面的规则转换返回的值。如果转换的结果是NaN，则调用对象的toString()方法，再次依照前面的规则转换返回的字符串值。
    
    parseFloat(string)函数，将字符串转换为浮点数类型的数值。
    
    它的规则与parseInt基本相同，但也有点区别：字符串中第一个小数点符号是有效的，
    
    另外parseFloat会忽略所有前导0，如果字符串包含一个可解析为整数的数，则返回整数值而不是浮点数值。
    
    toString(radix)方法
    
    除undefined和null之外的所有类型的值都具有toString()方法，其作用是返回对象的字符串表示。
    
    parseInt(string, radix)函数，将字符串转换为整数类型的数值。它也有一定的规则：
    
    忽略字符串前面的空格，直至找到第一个非空字符
    
    如果第一个字符不是数字符号或者负号，返回NaN
    
    如果第一个字符是数字，则继续解析直至字符串解析完毕或者遇到一个非数字符号为止
    
    如果上步解析的结果以0开头，则将其当作八进制来解析；如果以x开头，则将其当作十六进制来解析
    
    如果指定radix参数，则以radix为基数进行解析
    
    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才能继续。

代码：
```

<!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内置对象的示例
```

<!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对象的旁边，这里就不给了。
1.6 事件驱动
1. 事件驱动的定义
  
  用户操作事件（操作鼠标或按键的动作）或系统操作事件（如载入页面等）引起一连串程序动作的执行方式，称为事件驱动。
2. 事件处理的定义
  
  为了响应某个事件而进行的处理过程，称为事件处理。
3. 事件处理程序的定义
  
  对事件进行处理的过程或函数，称为事件处理程序。
JavaScript使用事件的两种方法----HTML标记或使用JavaScript语句
- 许多HTML标记允许加上以事件名为名的属性，
  - 如在按钮标记中加上onclick事件属性，并为该属性给出值。
  - 例如，设计一个表单，放入两个按钮，单击它们时将显示内容。
- 使用事件的另一种方法是使用JavaScript语句：对象.事件=函数名。
下面我们给出一个示例：

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

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

<!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简介二
相关阅读:
JVM基础（一）—— 运行时内存结构
 SQL if 和 case when查询示例
 SQL分组聚合查询
 My music
DataX增量同步到ADB ADS时报错
 shell find的用法
 pycharm安装
 在两个库中查找出差异明细
 docker下安装centos
升级RDS8.0遇到的问题
原文地址：https://www.cnblogs.com/lucky-light/p/14456875.html

JavaScript入门介绍2021/02/27

一、JavaScript简介一

1.1 javascript 简介

1.2 JavaScript 嵌入

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

1.4 JavaScript 对话框

1.5 JavaScript 对象

1.6 事件驱动