Javaweb开发项目之JS知识(JavaScript)

已于 2022-05-31 14:39:50 修改
阅读量813 收藏 4
点赞数
分类专栏： Java与数据库实训 文章标签： javascript java 前端 html
于 2022-05-31 10:58:29 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45662399/article/details/125058720
版权

目录

一、JS介绍

二、 点击事件案例

三、计算器

原理解释

实现代码

1. 复杂版（需要写四个函数）

2. 改进版代码 ，只用写一个cal函数，把加减乘除符号当变量进行传递

四、数组

一、JS介绍

1、直接嵌入HTML页面。

2、由浏览器解释执行代码，不进行预编译。

JS：解释型语言

Java:  编译型语言

JS不区分单引号和双引号。

若想写JavaScript语言，使用script标签，type=text/javascript，直接写在body标签中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--嵌入在HTML语言之中-->
<script type="text/javascript">
    var v1=3;
    var v2=4;
    console.log(v1+v2);
    var v="hello";
    console.log(v);
//弹出框
    alert(v);
</script>

</body>
</html>

  

二、 点击事件案例

 在输入框中输入文字，点击按钮后弹窗弹出对应内容

  1. 设置一个输入框input便签和一个按钮button标签
  2. 为按钮绑定点击事件
  3. 为输入框设置id值，使其在后续获取输入框的内容
  4. 在script标签中定义JavaScript，开始写js代码
  5. js端对点击事件的函数进行定义，获取到输入框的内容，再进行弹窗展示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<!--输入框-->
<!--通过id来访问到输入框的内容-->
<input type="text" id="inputId"/><br>

<!--按钮，绑定点击事件clickMe-->
<button onclick="clickMe()">点我</button>

<script type="text/javascript">
    function clickMe(){
        //通过id找到input标签
        var input = document.getElementById('inputId');
        //获取到输入框里的输入值
        var str = input.value;
        alert(str);
    }
</script>

</body>
</html>

三、计算器

原理解释

 

要点：

  • 两种设置button的方式都可以，可以直接用button标签设置，也可以用input标签，通过type=button来设置。
  • 定义输入框十需要给每一个输入框设置一个唯一的id值，使其在后续可以获取到文本框的位置和内容。
  • 输入文本框获取到的内容都是字符串型，所以需要用parseInt函数转成int型。
  • 使用getElementId(‘id’)函数找到文本框的位置，再使用value属性获取到文本狂战中的值。
  • 最后的计算结果需要展示在文本框中，因此需要把计算结果赋值给文本框的value属性

实现代码

1. 复杂版（需要写四个函数）

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

<h1>简易计算器</h1>

<table>
    <tr>
        <td>第一个数</td>
        <td>
            <input type="text" id="x">
        </td>
    </tr>

    <tr>
        <td>第二个数</td>
        <td>
            <input type="text" id="y">
        </td>
    </tr>

    <tr>
        <td>
            <button onclick="add()">+</button>
            <button onclick="subb()">-</button>
            <input type="button" value="*" onclick="mul()">
            <input type="button" value="/" onclick="div()">
        </td>
    </tr>

    <tr>
        <td>结果</td>
        <td>
            <input type="text" id="result">
        </td>
    </tr>

</table>


<script type="text/javascript">
<!--    add点击事件-->
    function add(){
        var x=document.getElementById('x').value;
        var y=document.getElementById('y').value;
        //拿到的xy都是字符串，不是数字,使用parseInt函数解析成int型才能进行数字运算
        var z=parseInt(x)+parseInt(y);
        var resultNum = document.getElementById('result');
        resultNum.value=z;
    }

function subb(){
    var x=document.getElementById('x').value;
    var y=document.getElementById('y').value;
    //拿到的xy都是字符串，不是数字,使用parseInt函数解析成int型才能进行数字运算
    var z=parseInt(x)-parseInt(y);
    var resultNum = document.getElementById('result');
    resultNum.value=z;
}

function mul(){
    var x=document.getElementById('x').value;
    var y=document.getElementById('y').value;
    //拿到的xy都是字符串，不是数字,使用parseInt函数解析成int型才能进行数字运算
    var z=parseInt(x)*parseInt(y);
    var resultNum = document.getElementById('result');
    resultNum.value=z;
}

function div(){
    var x=document.getElementById('x').value;
    var y=document.getElementById('y').value;
    //拿到的xy都是字符串，不是数字,使用parseInt函数解析成int型才能进行数字运算
    var z=parseInt(x)/parseInt(y);
    var resultNum = document.getElementById('result');
    resultNum.value=z;
}

</script>

</body>
</html>

2. 改进版代码 ，只用写一个cal函数，把加减乘除符号当变量进行传递

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

<h1>简易计算器</h1>

<table>
    <tr>
        <td>第一个数</td>
        <td>
            <input type="text" id="x">
        </td>
    </tr>

    <tr>
        <td>第二个数</td>
        <td>
            <input type="text" id="y">
        </td>
    </tr>

    <tr>
        <td>
            <button onclick="cal('+')">+</button>
            <button onclick="cal('-')">-</button>
            <input type="button" value="*" onclick="cal('*')">
            <input type="button" value="/" onclick="cal('/')">
        </td>
    </tr>

    <tr>
        <td>结果</td>
        <td>
            <input type="text" id="result">
        </td>
    </tr>

</table>


<script type="text/javascript">
<!--    函数的参数传过来时，直接写传来的参数的名字-->
    function cal(operator){
        var x=document.getElementById('x').value;
        var y=document.getElementById('y').value;
        var z;
        switch (operator){
            case '+':
                z=parseInt(x)+parseInt(y);
                break;
            case '-':
                z=parseInt(x)-parseInt(y);
                break;
            case '*':
                z=parseInt(x)*parseInt(y);
                break;
            case '/':
                z=parseInt(x)/parseInt(y);
                break;
            default:
                break;
        }
        var resultNum = document.getElementById('result');
        resultNum.value=z;
    }


</script>

</body>
</html>

四、数组

js中的数组不需要规定长度，也不需要设置类型，使用push和pop存元素和出元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <script type="text/javascript">
<!--        定义时可以不规定类型，不定义长度-->
        var array = new Array();
        console.log(array.length);
        //可以在数组中存放任意类型的值
        var array1= new Array(100,'a',true);
        console.log(array1);

        var a2 = new Array();
        a2.push('zhangsan');
        a2.push(5);
        a2.push(true);
        a2.push(586);
        console.log(a2.length);

        console.log(a2[1]);
        //输出最上面的元素
        console.log(a2.pop());

    </script>

</body>
</html>

好喜欢吃红柚子
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaWeb开发入门第一篇必备知识讲解
09-02
JavaWeb开发是构建基于互联网的应用程序的技术，它允许开发者创建交互式、动态的网页内容。在本文中，我们将深入探讨JavaWeb开发入门所需的基本概念、发展历史以及动态和静态WEB的区别。 首先，我们要理解Web开发的...
JavaWeb——JavaScript
m0_63544124的博客
05-05 494
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--外部脚本--> <script src="../js/demo.js"></script> ...
【JAVAWEB】javaweb6之js
2301_79585673的博客
09-21 191
【JAVAWEB】javaweb6之js
JavaWeb——前端之JS&Vue
qq_44689664的博客
12-29 960
HTML、JavaScript、Vue框架基础知识
【Java Web学习笔记】3 - JavaScript入门
qq_41891655的博客
12-03 1058
1.JavaScript是一种解释型的脚本语言，C、C+ +等语言先编译后执行，而JavaScript是 在程序运行过程中逐行进行解释， 2.JavaScript是一种基于对象的脚本语言，可以创建对象，也能使用现有的对象(有对象)。 3.JavaScript是弱类型的，对变量的数据类型不做严格的要求，变量的数据类型在运行过程可以变化。
【Java】JS简介
山赶着山，山山漫漫结成关
05-24 1319
JavaScript（简称JS）是一门强大而灵活的编程语言，用于Web开发、移动应用和服务器端开发。作为一门前端技术，JavaScript是构建互联网上几乎所有动态内容的核心。本文将深入探讨JavaScript的基本概念，以及它如何成为Web开发的重要组成部分。JavaScript是一门强大的编程语言，无论您是初学者还是有经验的开发者，都可以通过学习和掌握它来构建令人印象深刻的Web应用程序。本文只是介绍了JavaScript的基础知识，您可以继续深入学习，探索其更高级的概念和应用。
JavaWeb之js
weixin_47543906的博客
11-30 991
JavaScript 是一门跨平台、面向对象的脚本语言，运行在浏览器端。 JavaScript（简称：JS） 在 1995 年由 Brendan Eich 发明，并于 1997 年成为一部 ECMA 标准。 JavaScript作用 表单数据校验 页面元素标签动态增删改查操作等
JavaWeb之JavaScript基础
Maddoxzhi的博客
11-15 396
Object形式的自定义对象var 变量名 = new Object();//对象实例（空对象）变量名.属性值 = 值;//定义一个属性变量名.函数名 = function(){} //定义一个函数对象的访问：变量名.属性 / 函数名(){};alert("这是一个对象的函数");}obj.funObj(123,"你猜我是谁");{}花括号形式的自定义对象var 变量名 = {};//空对象定义属性和方法var 变量名 = {
Java Script
qq_39527814的博客
07-25 454
概述 JavaScript是目前web开发中不可缺少的脚本语言，js不需要编译即可运行，运行在客户端，需要通过浏览器来解析执行JavaScript代码。 JS组成部分： 组成部分 作用 ECMA Script 构成了JS核心的语法基础 BOM Browser Object Model 浏览器对象模型，用来操作浏览器上的对象 Dom Document Object 文档对象模型，用来操作网页中的元素 特点 1.交互性（它可以做的就是信息的动态交互） 2.安全性
javascript基本内容和标签
Sonnenblume_f的博客
08-24 2055
js概念: javascript是互联网上最流行的，可以嵌套到html代码中的，一种基于对象和事件驱动的，并具有安全性能的脚本语言。 具有1）向html页面中增加交互行为； 2）脚本语言，语法和java类似； 3）解释性语言，边执行边解释; 4）跨平台，每个浏览器都具有js解释器; 作用：增删HTML和css中的代码,能够动态校验数据 组成：ECMAScript（核心） BOM 浏览...
JavaWeb开发技术（笔记篇）
12-03
【JavaWeb开发技术】是关于使用Java语言进行Web应用程序开发的知识体系。Web开发分为静态Web和动态Web。静态Web主要包含HTML、CSS和JavaScript，它们构成网页的基本元素，但不支持动态内容更新和数据库交互。动态Web...
JavaWeb开发技术-MVC设计模式.pptx
07-06
**JavaWeb开发技术-MVC...总的来说，MVC设计模式是JavaWeb开发中的重要工具，它帮助开发者组织代码，提高代码质量，使项目更容易维护和扩展。通过理解并熟练运用MVC模式，开发者可以更高效地构建健壮的Web应用程序。
JavaWeb开发笔记
02-18
JavaWeb开发是Java编程领域的一个重要组成部分，它主要涉及在Web...SpringMVC作为现代JavaWeb开发的主流框架之一，极大地简化了开发流程，提高了开发效率。掌握这些知识点对于成为一名专业的JavaWeb开发者至关重要。
javaweb开发案例.doc
09-30
在JavaWeb开发领域，这个案例是一个典型的超市商品管理系统设计，它涵盖了多个关键的知识点，包括系统架构、前端技术以及数据库管理。以下是这些知识点的详细说明： 1. **系统模块划分**： 系统被划分为四个主要...
Javaweb JS入门
最新发布
2203_75456285的博客
01-31 525
属性：window.alert/confirm/setInterval/setTimeout。注意：是调用js中的函数，不能自己自命名函数名,否则容易报错。方法：charAt indexOf substring trim。删除：splice(从哪里开始删除，删除几个)2.forEach遍历。遍历：1.类似于传统的java数组遍历。注：每次调用方法都得字符串名.方法。事件触发时js执行的代码。四、数据类型和运算符。
JavaWeb--JavaScript
Eumenides_Suki的博客
02-23 3682
目标JavaScript 是一门跨平台、面向对象的脚本语言，而Java语言也是跨平台的、面向对象的语言，只不过Java是编译语言，是需要编译成字节码文件才能运行的；JavaScript是脚本语言，不需要编译，由浏览器直接解析并执行。JavaScript 是用来控制网页行为的，它能使网页可交互；那么它可以做什么呢？如改变页面内容、修改指定元素的属性值、对表单进行校验等，下面是这些功能的效果展示：改变页面内容当我点击上面左图的 按钮，按钮上面的文本就改为上面右图内容，这就是js 改变页面内容的功能。修改指定元
JavaWeb --- JavaScript
热门推荐
乌云的博客
03-03 1万+
JavaScript语言诞生主要是完成页面的数据验证。因此它运行在客户端，需要运行浏览器来解析执行JavaScript代码。JS是Netcape网景公司的产品，最早取名为LiveScript；为了吸引更多java程序员。更名为 JavaScript
JavaWeb开发 —— JavaScript（JS）
hdakj22的博客
04-11 1万+
介绍JavaScript、 引入方式、基础语法、函数、对象以及时间监听
JavaScript
qq_60225495的博客
12-07 933
JavaScript 今日目标 掌握 JavaScript 的基础语法 掌握 JavaScript 的常用对象（Array、String） 能根据需求灵活运用定时器及通过 js 代码进行页面跳转 能通过DOM 对象对标签进行常规操作 掌握常用的事件 能独立完成表单校验案例 1，JavaScript简介 JavaScript 是一门跨平台、面向对象的脚本语言，而Java语言也是跨平台的、面向对象的语言，只不过Java是编译语言，是需要编译成字节码文件才能运行的；JavaScript是脚本语言，不需要编

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值