JavaScript01—概述、语法、流程控制

最新推荐文章于 2024-11-05 22:07:06 发布

阿鑫君_ty

最新推荐文章于 2024-11-05 22:07:06 发布

阅读量465

点赞数

分类专栏： javaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_34807258/article/details/74219457

版权

javaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

概述

javaScript是嵌入HTML页面中，由浏览器解释执行代码的脚本语言
事件定义式：在事件定义时直接写js
嵌入式:使用<script>标签
文件调用式：页面引用.js文件

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>js</title>
    <script type="text/javascript">
        function method() {
            alert("hello2");
        }
    </script>
    <script type="text/javascript" src="alertMethod.js"></script>
</head>
<body>
    <input type="button" value="事件定义式" onclick="alert('hello1');">
    <input type="button" value="嵌入式" onclick="method();">
    <input type="button" value="文件调用式" onclick="method3();">
</body>
</html>

alertMethod.js
脚本文件中不需要脚本的开始和结束声明

function method3() {
    alert("hello3");
}

基础语法

变量：使用var声明变量，未初始化的对象自动赋值：undefined。变量没有类型，统一使用var声明，变量引用的数据是有类型的
数据类型
null：空；undefined：未定义；
Number：数字；String：字符串；Boolean：布尔；Function：函数；Array：数组
window：浏览器对象；document：文档对象
Object：自定义对象
数据类型的隐形转换
数字+字符串：数字转换成字符串
数字+布尔值：true转换成1，false转换成0
字符串+布尔值：布尔值转换成字符串true或false
布尔值+布尔值：布尔值转换成0或1
数据类型转换函数
toString所有数据类型均可转换成String类型
parseInt强制转换为int，否则返回NaN(not a number) parseInt(5.9)返回5
typeof查询当前类型
isNaN检查是否不是数字(is not a number)，不是数字返回true，是数字返回false

实例：计算数值的平方

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>计算平方</title>
<script type="text/javascript">
function calc(){
    //在控制台，打印一个日志，用作测试
    console.log("开始计算平方");

    //取出文本输入框中的内容
    var txtNumber = document.getElementById("txtNumber").value;
    console.log( txtNumber );
    console.log( typeof txtNumber );

    //判断输入的内容是否是一个数值
    if( isNaN(txtNumber) ){ //如果不是一个数值
        alert("请输入一个数值");
    } else {                    //否则是一个数值
        //输出结果
        var num = parseFloat( txtNumber );
        var result = num * num;
        alert( "结果是：" + result );
    }

}
</script>
</head>
<body>
    请输入一个数值：
    <input type="text" id="txtNumber" size="5"/>
    <input type="button" value="计算平方" 
                    onclick="calc();" />
</body>
</html>

运算符
/除法：java中5/2结果是2，js中5/2结果是2.5
三目运算：表达式？表达式1：表达式2

实例：猜0~100之间的一个随机整数

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>猜数字</title>
<script type="text/javascript">

//定义一个全局的变量：生成一个随机整数
//该变量，是直接存放在浏览器中，在所有函数中都可访问该变量
var result = parseInt( Math.random()*100 );//控制小数点后位数

function guess(){
    console.log( "要猜的结果是：" + result );

    var txtNumber = 
      document.getElementById("txtNumber").value;

    //检查输入的文本，是否是数值
    if( isNaN(txtNumber) ){//如果不是一个数值
        alert("请输入数值！");
    } else {
        //判断大小，并提示
        var input = parseInt(txtNumber);
        if( input>result ){
            alert("输入的大了，输入个小点的！");
        } else if( input<result ){
            alert("输入的小了，输入个大点的！");
        } else {
            alert("猜对了！亲！");
        }
    }

}

</script>
</head>
<body>
    <h1>猜数字</h1>
    猜0~100之间的一个随机整数：
    <input type="text" id="txtNumber" size="2" />
    <input type="button" value="我猜!" 
                            onclick="guess();"/>
</body>
</html>

流程控制

0,null,”“,undifned,NaN对应的布尔值均为false
一切表示空的值都是false

实例：计算整数的阶乘

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>求阶乘</title>
<script type="text/javascript">
function calc(){
    var txtNumber = 
      document.getElementById("txtNumber").value;

    if( isNaN(txtNumber) ){
        alert("请输入一个整数");
        return;
    }

    var input = parseInt( txtNumber );
    var result = 1;
    for( var i=1; i<=input; i++ ){
        result *= i;
    }

    alert( input + "的阶乘是：" + result );
}
</script>
</head>
<body>
    <h1>求阶乘</h1>
    请输入一个整数：
    <input type="text" id="txtNumber" size="2" />
    <input type="button" value="求阶乘"
                    onclick="calc();" />
</body>
</html>