JS(一)

1.js引入方式

两种方式
内部和外部
注释

//单行注释
/*多行注释*/

JS(一)_第1张图片

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<input type="button" value="按钮" onclick="alert('按钮点击了')">
body>
<script>
    //单行注释
    /*多行注释*/
    //控制台输出
    console.log("内部js代码执行成功!");
script>
<script src="my.js">script>
html>

2.方法

三种定义方式

    function f4(x,y) {
        return x*y;
    }
    let result = f4(5,9);
    console.log(result);
    //第二种定义方法的方式
    let f5=function (name,age) {
        console.log(name+":"+age);
    }
    f5("李四",30);
    //第三种定义方法的方式
    let f6=new Function("name","age","console.log(name+':'+age)");
    f6("王五",20);

小例

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>

<input type="button" value="按钮" onclick="f1()">
body>
<script>
    //1.无参无返回值方法
    function f1() {
        console.log("f1");
    }
    //调用方法
    f1();
    //2.有参五返回值方法
    function f2(name,age) {
        console.log(name+":"+age);
    }
    f2("张三",50);
    //3.无参有返回值
    function f3() {
        return "这是返回值";
    }
    let info=f3();
    console.log(info);
    //4.有参有返回值
    function f4(x,y) {
        return x*y;
    }
    let result = f4(5,9);
    console.log(result);
    //第二种定义方法的方式
    let f5=function (name,age) {
        console.log(name+":"+age);
    }
    f5("李四",30);
    //第三种定义方法的方式
    let f6=new Function("name","age","console.log(name+':'+age)");
    f6("王五",20);
script>
html>

3.页面相关方法

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<div>这是divdiv>
<input type="text">
<input type="button" value="按钮" onclick="f()">
body>
<script>
    function f() {
        let d = document.querySelector("div");
        let i = document.querySelector("input");
        //把文本框的值取出赋值给div
        d.innerText=i.value;
    }
script>
html>

4.平方练习

当变量进行-*/时会自动将变量转成数值 如果两个变量是字符串加法运算是字符串拼接
parseFloat 将字符串转成整数或小数

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<input type="text">
<input type="button" value="" onclick="f()">
<div>结果:div>
body>
<script>
    function f() {
        let d = document.querySelector("div");
        let i = document.querySelector("input");
        //判断用户输入的内容是否是数值
        if(isNaN(i.value)){
            d.innerText="输入错误";
            return;
        }
        //把文本框里面的内容相乘得到平方的值 NaN*NaN
        // d.innerText = "结果:"+ i.value*i.value;
        //当变量进行-*/时会自动将变量转成数值 如果两个变量是字符串加法运算是字符串拼接
        //让文本框的值*1 就是将文本框里面的字符串自动转成数值
        // d.innerText = "结果:"+(i.value*1+i.value*1);
        //parseFloat 将字符串转成整数或小数
        d.innerText="结果:"+(parseFloat(i.value)+parseFloat(i.value));
    }
script>
html>

5.计算器练习

写法1

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<input type="text" name="" id="i1">
<input type="text" name="" id="i2">
<input type="button" value="" onclick="f1()">
<input type="button" value="" onclick="f2()">
<input type="button" value="" onclick="f3()">
<input type="button" value="" onclick="f4()">
<div>结果:div>
body>
<script>
    let i1 = document.querySelector("#i1");
    let i2 = document.querySelector("#i2");
    let d = document.querySelector("div");
    function f1() {
        if(isNaN(i1.value)||isNaN(i2.value)){
            d.innerText="输入错误";
            return;
        }
        d.innerText="结果:"+(i1.value*1+i2.value*1);
    }
    function f2() {
        if(isNaN(i1.value)||isNaN(i2.value)){
            d.innerText="输入错误";
            return;
        }
        d.innerText="结果:"+(i1.value-i2.value);
    }
    function f3() {
        if(isNaN(i1.value)||isNaN(i2.value)){
            d.innerText="输入错误";
            return;
        }
        d.innerText="结果:"+(i1.value*i2.value);
    }
    function f4() {
        if(isNaN(i1.value)||isNaN(i2.value)){
            d.innerText="输入错误";
            return;
        }
        d.innerText="结果:"+(i1.value/i2.value);
    }

script>
html>

写法2

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<input type="text" name="" id="i1">
<input type="text" name="" id="i2">
<input type="button" value="" onclick="f(1)">
<input type="button" value="" onclick="f(2)">
<input type="button" value="" onclick="f(3)">
<input type="button" value="" onclick="f(4)">
<div>结果:div>
body>
<script>
    let i1 = document.querySelector("#i1");
    let i2 = document.querySelector("#i2");
    let d = document.querySelector("div");
    function f(x) {
        if(isNaN(i1.value)||isNaN(i2.value)){
            d.innerText="输入错误";
            return;
        }
        switch (x) {
            case 1:{
                d.innerText="结果:"+(i1.value*1+i2.value*1);
            }
            break;
            case 2:{
                d.innerText="结果:"+(i1.value-i2.value);
            }
            break;
            case 3:{
                d.innerText="结果:"+(i1.value*i2.value);
            }
            break;
            case 4:{
                d.innerText="结果:"+(i1.value/i2.value);
            }
            break;
        }
    }
script>
html>

6.猜数字

在这里插入图片描述

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Titletitle>
head>
<body>
<input type="text" placeholder="请输入1-100之间的整数">
<input type="button" value="猜一猜" name="" id="" onclick="f()">
<div>div>
body>
<script>
    let x=parseInt(Math.random()*100)+1;
    let i = document.querySelector("input");
    let d = document.querySelector("div");
    console.log(x);
    let count=0;
    function f(){
        count++;
        if(i.value>x){
            d.innerText="猜大了";
        }else if(i.value<x){
            d.innerText="猜小了";
        }else{
            d.innerText="恭喜你第"+count+"次猜对了";
        }
        i.value="";//清空文本框
    }
script>
html>

你可能感兴趣的:(Web,javascript,前端,html)