JavaScript学习小结(一)——JavaScript入门基础

JavaScript是一种用于Web开发的脚本语言，主要用于增强网页的交互性和动态性。本篇文章将为初学者介绍JavaScript的入门基础。

语法结构

JavaScript代码通常嵌入在HTML文件中，可以使用<script>标签来定义JS代码块。JavaScript的语法结构包括变量与赋值操作、数据类型、运算符、条件语句、循环语句等。

变量与赋值操作

在JavaScript中定义变量使用var关键字，例如：

var x=10;
alert(x);

以上代码定义一个名为x的变量，并将其赋值为10。alert(x)语句用于在网页上显示x的值。在JavaScript中，分号表示语句的结束。

数据类型

JavaScript支持的数据类型包括数字、字符串、布尔型、数组、对象等。例如：

var x=123.45;              // 数字
var y="Hello World!";      // 字符串
var z=true;                // 布尔型
var arr=[1,2,3,"four"];    // 数组
var obj={name:"Tom",age:18};// 对象

运算符

JavaScript支持的运算符包括算术运算符、比较运算符、逻辑运算符等。例如：

var a=10,b=5;
var result=a+b;          // 算术运算符
if(a>b){                 // 比较运算符
   alert("a>b");
}
if(a>5&&b<=10){          // 逻辑运算符
   alert("a>5且b<=10");
}

条件语句

JavaScript中的条件语句用于根据条件是否成立来执行不同的代码块，例如：

var num=10;
if(num>0){
    alert("num是正数");
}
else if(num<0){
    alert("num是负数");
}
else{
    alert("num是零");
}

循环语句

JavaScript中的循环语句允许程序重复执行同一段代码。常见的有for循环和while循环，例如：

for(var i=0;i<5;i++){
    alert(i);
}
var j=0;
while(j<5){
    alert(j);
    j++;
}

示例说明

以下是两个简单的JavaScript示例，供初学者参考：

示例1：计算器

以下代码实现了一个简单的加法计算器：

<!DOCTYPE html>
<html>
<head>
    <script>
        function calc(){
            var num1=parseFloat(document.getElementById("num1").value);
            var num2=parseFloat(document.getElementById("num2").value);
            var result=num1+num2;
            document.getElementById("result").value=result;
        }
    </script>
</head>
<body>
    <label for="num1">数字1：</label>
    <input type="text" id="num1"><br>
    <label for="num2">数字2：</label>
    <input type="text" id="num2"><br>
    <input type="button" value="计算" onclick="calc()"><br>
    <label for="result">结果：</label>
    <input type="text" id="result">
</body>
</html>

该代码使用了HTML和JavaScript，实现了一个简单的加法计算器，并将结果显示在网页中。用户输入数字后，点击“计算”按钮即可得到结果。

示例2：猜数游戏

以下代码实现了一个简单的猜数游戏：

<!DOCTYPE html>
<html>
<head>
    <script>
        var num=parseInt(Math.random()*100+1);
        function guess(){
            var guessNum=parseInt(document.getElementById("guessNum").value);
            if(guessNum>num){
                alert("猜大了");
            }
            else if(guessNum<num){
                alert("猜小了");
            }
            else{
                alert("恭喜你猜对了！");
            }
        }
    </script>
</head>
<body>
    <label for="guessNum">请输入一个1~100之间的整数：</label>
    <input type="text" id="guessNum"><br>
    <input type="button" value="确定" onclick="guess()">
</body>
</html>

该代码使用了HTML和JavaScript，实现了一个简单的猜数游戏。程序会随机生成一个1~100之间的整数，用户输入自己猜的数字后，程序会判断这个数字是太大、太小还是恰好等于随机数，并给出相应的提示。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：JavaScript学习小结(一)——JavaScript入门基础 - Python技术站