初学js随堂笔记1-优快云博客

本文链接：https://blog.youkuaiyun.com/feige012/article/details/113703690

这篇博客介绍了如何利用JavaScript和HTML创建一个简单的点餐系统。通过点击按钮选择菜品，总价会自动更新，同时可以选择撤销操作。文章详细展示了JavaScript的基本语法，包括变量、数据类型、条件判断和循环，并通过实际应用帮助读者理解这些概念。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

初学node.js

node.js是什么

简单的说 Node.js 就是运行在服务端的 JavaScript。
所以,要学node.js就要从js入手,js和node.js暂时在我看来语法是一样的

初学js语法

js是动态类型
他不像c,java一样开始就给int,String表上,他感觉更像python,但是他还是可以标记var,或者val的,简单例子
c语言

int a=1
int b=2
int c=a+b
printf("%d",&c)

var a=1
var b=2
var c=a+b
console.log(c)

不过有意思的是如果你这样写,依然能出结果,感觉就和Python挺像的

a=1
b=2
c=a+b
console.log(c)

js的基本数据类型

学习一门语言当然要从他的数据类型开始
var carname=new String; 字符串
var x= new Number; 数字
var y= new Boolean; 布尔形
var cars= new Array; 数组也可以写成 var cars=[]
var person= new Object; 任意类型
当然还有字典,字典的写法就如同python,一个key对应一个value
var person={
firstname : “John”,
lastname : “Doe”,
id : 5566
};
当然调用也很简单

console.log(person["firstname"])

输出

John

循环与判断

if

if就和c语言一样

var x="1"
if(x===1){
    console.log("true")
}else{
	console.log("false")
}

输出 false
要注意,如果是x==1
那么输出就是true

for循环

for (var i=0;i<5;i++)
{ 
    console.log(i)
}

输出

那么暂时基本js的语法学完后,要知道怎么使用,使用在哪,我们知道js是使用在web上的,
那么我们做一个简单的点餐系统来学习,
效果图
在这里插入图片描述

话不多说直接代码。这是一个简单的html文件。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    table, th, td
    {
        border: 1px solid black;
    }
    table
    {
        width:90%;
    }
    .center{
        margin-top: 20px;
        text-align: center;
        font-size: 20px;
    }
</style>
<script>
    moneyAll=0
    string=[];
    string.push("您选择了")
 function become(){
     money=document.getElementById("money")
     choose=document.getElementById("choose")
     money.innerText=moneyAll.toString()
     choose.innerText=string
 }
 function click1(){
     moneyAll+=10;
     string.push("菜品1")
     become()
 }
    function click2(){
        moneyAll+=20;
        string.push("菜品2")
        become()
    }
    function click3(){
        moneyAll+=30;
        string.push("菜品3")
        become()
    }
    function click4(){
        moneyAll+=40;
        string.push("菜品4")
        become()
    }
    function click5(){
        moneyAll+=50;
        string.push("菜品5")
        become()
    }
    function click6(){
        moneyAll+=60;
        string.push("菜品6")
        become()
    }
    function click7(){
        moneyAll+=70;
        string.push("菜品7")
        become()
    }
    function click8(){
        moneyAll+=80;
        string.push("菜品8")
        become()
    }
    function click9(){
        moneyAll+=90;
        string.push("菜品9")
        become()
    }
    function delete1(){
        x=string.pop();
        x=String(x)
        x=x.charAt(x.length-1)
        // document.write(x)
        moneyAll-=Number(x)*10
        become()
    }
</script>
<body>
    <table class="center">
        <tr>
           <td>
               菜品1 10元
               <button type="button" onclick="click1()"> 选择1</button>
           </td>

            <td>
                菜品2 20元
                <button type="button" onclick="click2()"> 选择2</button>
            </td>

            <td>
                菜品3 30元
                <button type="button" onclick="click3()"> 选择3</button>
            </td>
        </tr>
        <tr>
            <td>
                菜品4 40元
                <button type="button" onclick="click4()"> 选择4</button>
            </td>

            <td>
                菜品5 50元
                <button type="button" onclick="click5()"> 选择5</button>
            </td>

            <td>
                菜品6 60元
                <button type="button" onclick="click6()"> 选择6</button>
            </td>
        </tr>
        <tr>
            <td>
                菜品7 70元
                <button type="button" onclick="click7()"> 选择7</button>
            </td>

            <td>
                菜品8 80元
                <button type="button" onclick="click8()"> 选择8</button>
            </td>

            <td>
                菜品9 90元
                <button type="button" onclick="click9()"> 选择9</button>
            </td>
        </tr>
    </table>
    <button type="button" onclick="delete1()">撤销</button>
    <p id="choose"> 您选择了 </p>

    <p id="money" class="center">
        0
    </p>
</body>
</html>

这里两边的
<script></script>
中间就是我们的js代码,而这里就是简单的一个数组,添加就push一下,删除就pop出去一个。