首页 > 代码库 > Unit04： JavaScript 概述 、 JavaScript 基础语法 、 流程控制

Unit04： JavaScript 概述 、 JavaScript 基础语法 、 流程控制

2024-09-03 14:36:11   210人阅读

　　　　Unit04： JavaScript 概述 、 JavaScript 基础语法 、 流程控制　　　　

my.js

function f3() {
    alert("唐胜伟");
}

demo1.html  演示点击按钮，弹出提示框

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 2.嵌入式:在script标签里写js.
    该标签可以写在网页任意位置,但通常写在head里. -->
<script>
    //js的注释是这样的
    /*也可以是这样的*/
    
    //js函数的规则:
    //1.js的函数都是公有的
    //2.js的函数不用声明返回值类型
    //3.js的函数可以声明参数
    function f2() {
        //js中不区分单引号和双引号
        alert("范传奇");
    }
</script>
<!-- 3.文件调用式:在单独的js文件中写JS.
    将文件引入就相当于将文件内的代码复制到此处.
    注意:script不能既引入js又写js. -->
<script src="my.js"></script>
</head>
<body>
    <!-- 
        事件:就是用户的操作/动作,也是js被
        调用的时机.如:单击事件、双击事件.
     -->
    <!-- 1.事件定义式:在定义事件时直接写js. -->
    <input type="button" value="按钮1"
        onclick="alert(‘苍老师‘);"/>
    <input type="button" value="按钮2"
        onclick="f2();"/>
    <input type="button" value="按钮3"
        onclick="f3();"/>
</body>
</html>

demo2.html  js的数据类型及转换

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
    //1.此处写的函数是在页面加载后,
    //用户点击按钮时才调用的.
    //2.若此处不写函数,直接写js代码,
    //则该代码在页面加载时直接调用,
    //其调用的时机比body还早.
    //alert(1);
    console.log("控制台打印");
    
    //1.声明变量
    var x;
    console.log(x);
    var y = 2;
    console.log(y);
    
    //2.数据类型
    var s = "Hello";
    var n = 3.14;
    var b = true;
    
    //3.隐式转换
    console.log(s+n);
    console.log(s+b);
    console.log(n+b);
    console.log(b+b);
    
    //4.强制转换
    console.log(parseInt("2.5"));
    console.log(parseInt(3.6));
    console.log(parseInt("abc"));
    console.log(typeof(s));
    console.log(typeof(n));
    console.log(isNaN(s));
    console.log(isNaN(n));
    console.log(isNaN(b));
    
    //5.特殊情况
    console.log(parseInt(""));
    console.log(parseInt(true));
    console.log(isNaN(""));
    console.log(isNaN(true));
    
    
    
</script>
</head>
<body>
    <p>js的语法和Java极为相似!</p>
</body>
</html>

demo3.html　使用js实现计算平方小例子

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
    function pf() {
        console.log(1);
        //获取文本框
        var input = document.getElementById("num");
        console.log(input);
        //获取文本框内的值
        var n = input.value;
        console.log(n);
        //获取span
        var span = document.getElementById("result");
        //判断该值是不是数字
        if(isNaN(n)) {
            //不是数字,span里给予提示
            span.innerHTML = "请输入数字";
        } else {
            //是数字,计算其平方,结果写入span
            span.innerHTML = n*n;
        }
    }
</script>
</head>
<body>
    <input type="text" id="num"/>
    <input type="button" value="平方"
        onclick="pf();"/>
    = <span id="result"></span>
</body>
</html>

 

Unit04： JavaScript 概述 、 JavaScript 基础语法 、 流程控制


联系
我们