JavaScript入门学习

最新推荐文章于 2024-07-21 10:17:51 发布

Boogie36

最新推荐文章于 2024-07-21 10:17:51 发布

阅读量140

点赞数 5

分类专栏： JS实现简易计算器文章标签： javascript

本文链接：https://blog.csdn.net/m0_53515074/article/details/117689558

版权

JS实现简易计算器专栏收录该内容

1 篇文章 0 订阅

订阅专栏

JS引入方法

(1）head中

将<script>标签写在html文件中的<head>标签中

<!DOCTYPE html>
<html lang="en">
<head>
    <script>
        function my(){
            
        }
    </script>
</head>
<body>
    
</body>
</html>

（2）body中

把<script>标签写在html文件中的<body>标签中

<!DOCTYPE html>
<html lang="en">
<body>
    <script>
        function my(){
            
        }
    </script>
</body>
</html>

（3）外部引入

把JS代码写在后缀名为.js的文件中，然后在html文件中通过<script>标签引入,这hi是常用方式

<!DOCTYPE html>
<html>
<script src="myScript.js"></script>
<body>

</body>
</html>

JS数据类型

数值型：number（凡是数字都是数值型，不区分整数和小数）

字符串：string（凡是引号包裹起来的内容全部都是字符串）

布尔：boolean（true、false）

对象类型：object（特殊取值null）

未定义型：undefined

向变量分配文本值时，使用双引号或者单引号包围

向变量赋值为数值时，不使用引号

JS变量

声明变量 var 变量名称 = 存储数据

变量命名规则

只能由字母、数字、_（下划线）、$（美元符号）组成（$和_不推荐）

对大小写敏感，y和Y是不同的变量。

不能以数字开头。

命名中不能出现-（js会理解成减号进行减法的操作）

不能和关键字冲突。

数值型：var x = 1; var pie = 3.14;
字符串：var str = "我是一个字符串儿";
布尔型：var t = true;

JS运算符

算术运算符：+  -  *  /  %  ++  --
赋值运算符：=  +=  -=  *=  /=  %=
比较运算符：==  ===  !=  !==  >  <  >=  <=
逻辑运算符：&&  ||  !
条件运算符：valueName = (condition)?value1:value2  
           [condition为真时取value1，为假时取value2]

注意：两个数字相加，返回数字相加和；数字和字符串相加，返回字符串。

IF条件语句

<script>
 
      var money = 250;
 
      if (money >= 360) {
          alert("good");
      } else if (money >= 666) {
          alert("ohWa！");
      } else if (money == 250) {
          alert("Emmmm");
      } 

</script>

Switch分支语句

<script>
        
       var money = 250；
       swtich（money）{
             case 666：
                  alert("ohWa!");
                  break;
            case 250:
                  alert("Emmmm");
                  break;
            case 360:
                  alert("good");
                  break;
        }
</script>

循环结构while、do-while、for

while(条件)
{
   执行代码
}

do
{
    执行代码
}while(条件);
注意：do-while至少循环一次

for(循环变量初值；循环条件；变量增值)
{
    执行代码
}

自定义函数

语法：function myfunction( ){ }

<script>
        function myfunction(){
            return 666;
        }
        console.log(myfunction());
</script>

参考用例

一、打印九九乘法表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>九九乘法表</title>
</head>
<body>
    <script>
        for(row=1;row<=9;row++){
           for(col=1;col<=row;col++)
           {
            document.write(col+'*'+row+'='+col*row +'&nbsp;&nbsp;&nbsp');
           
           }
           document.write('<br/>');
        }
    </script>
</body>
</html>

二、实现简易加减乘除计算器

<body>
    <span>
        <input id="x" type="number" name="num" value="" size="20" maxlength="20"/>
        <select id="sel">
            <option value="zhi">请选择</option>
            <option value="×">×</option>
            <option value="/">/</option>
            <option value="+">+</option>
            <option value="-">-</option>
        </select>
        <input id="y" type="number" name="num" size="20" value="" maxlength="20"/>
        <!--<span>=</span>-->
        <label id="z"></label>
        <p style="margin-left: 180px;">
        <input id="but" type="button" value="计算" onclick="cal();"/>
       </p>
    </span>
    <script>
        function cal(){
            var x=parseInt(document.getElementById("x").value);
            var y=parseInt(document.getElementById("y").value);
            var z="";
             var op=document.getElementById('sel').value;
           
            switch(op){
                case "×":
                    z=x*y;
                    break;
                case "/":
                    z=x/y;
                    break;
                case "+":
                    z=x+y;
                    break;
                case "-":
                    z=x-y;
                    break;
                default:
                    z="";
                         
            }
            document.getElementById("z").innerText="="+z;
            
        }
    </script>
</body>