javaWeb学习第三天-------JavaScript入门

最新推荐文章于 2023-12-10 14:25:22 发布

怕鬼的哪吒

最新推荐文章于 2023-12-10 14:25:22 发布

阅读量390

点赞数

分类专栏： javaWeb 文章标签： javaWeb

本文链接：https://blog.csdn.net/weixin_39383702/article/details/103428863

版权

javaWeb 专栏收录该内容

33 篇文章 2 订阅

订阅专栏

一、JavaScript介绍

JavaScript：前端的强大的脚本语言

二、JavaScript和javaWeb常用语言比较

Java：编译型语法，有可移植性，跨平台特性
JavaScript：语法与java类似,主要是做前端页面的上的逻辑处理,和做一些动效
主要操作：1)可以操作标签 2) 追加样式 3)前端的验证
html: 超文本标记语言==>预定义的一些标签 ==>编写网页的骨干

三、JavaScript的语言特点
JavaScript特点：

1.不需要编译,由浏览器直接解析
2.不能单独运行,需要依赖于html
3.代码浏览器是从上到下进行解析

四、JavaScript的三大组成部分

1.ECSAscript ==>用于表示js中的基础语法
2.BOM 浏览器对象==>也就是对窗口进行操作
3.DOM 文本对象(节点对象) ==>也就是操作html的标签

五、JavaScript的引入方式

1.直接引入(需要写在html里) <script>中间些js代码</script>

2.外部引入引入的语法 <script src="js/index.js"></script>
注意: a.外部的js文件不需要写<script></script> b.html页面想使用外部的js文件,必须先引入,引入一般是放在头部

在这里插入图片描述
六、JavaScript的命名方式和注释

1.//单行注释
2.多行 
3.变量还有方法的命名遵循java的以下规范：
不要使用关键字 2. 驼峰命名 3.通俗易懂英文命名

七、JavaScript的调试：dug 调试:
步骤：（以谷歌游览器为例）

1.谷歌浏览器里检查代码
2.找到Sources
3.设置断点一步一步的调试

八、JavaScript的常用类型：

变量的修饰符是 var ==>具体的类型是由其值决定的
Boolean布尔值
number 数值类型
string 字符串类型
undefined 未定义类型
null 空值类型
其中：undefined 是由null 派生出来的 undefined ==null
返回的是true，虽然是true,但是undefined和null表达的意义不一样

九、JavaScript和java的常用类型比较：
在这里插入图片描述

注意：java 中Class 都表示引用数据类型 ==>js不需要编译,只要是引用数据类型就是对象（object） var str= new String("我是字符串");

十、JavaScript的运算符：

1、算术运算符：+ 、 - 、* 、 / 、 % 、 -(一元取反) 、 ++ 、 --
2、等同全同运算符：== 、 ===、 !== 、 !===
3、比较运算符：< 、 > 、 <= 、 >=
4、字符串运算符：< 、 > 、 <= 、 >= 、 = 、 +
5、逻辑运算符：&& 、 ||、 !、
6、赋值运算符：=、 +=、 *=、 -=、 /=

注意点：== 只比较数值 === 比较数值也比较数据类型

在这里插入图片描述

十一、JavaScript的方法

java方法的语法: 访问修饰符返回值类型方法名(参数列表){方法体}
JavaScript方法的语法 function 方法名(参数列表){执行方法体}

<script>
    function f(num) {

    }
</script>

注意点:

1.使用function关键字来进行修饰
2.方法的不能加var
3.方法可以有返回值
4.方法没有重载之说，任何数值与NaN相加都返回NaN

十一、JavaScript中常用事件：（后面附带案例）

onsubmit ==> true 可以提交否则不可以提交
onclick：点击事件
onload ：也就是html加载完成之后所触发的事件
onblur ：失去焦点
onfocus: 获取焦点

其中：window.οnlοad=function () {} 等同于 onload
JavaScript中的数组：
十二、JavaScript数组的两种初始方式:
var nums =["您好",44,70.8,true];里面的数组数据类型随意
2.var nums = new Array("ddd",29,true); 里面的数组数据类型随意

十三、JavaScript中四种获取节点的方式

1.document.getElementById("tv_id"); 通过id来获取
2document.getElementsByTagName("input"); 根据标签名来获取，返回的是数组
3document.getElementsByName("sex"); 根据name来获取返回的是数组
4.document.getElementsByClassName("tv_class"); 根据class来获取返回的是数组

十四、JavaScript中常用地方法与操作：

1.0.根据id获取input的文本值 document.getElementById(“tv_uname”).value;（value获取的到的值是字符串类型）前端验证的注意事项如下：
1.1.οnsubmit="return check()"多用在表单form里面返回true表示可以提交，返回false表示不能提交这个表单（一定记住要加入return）
1.2.input vaule 默认值是""
1.3.document.getElementById(“tv_uname”) 括号里一定要有引号 value 不是方法
1.4.setInterval(“第一个参数是所要触发的事件”,“时间，毫秒为单位”)
1.5.clearInterval(id); 清除定时器操作(一定指明id，id是指定时器的，指明要清除的定时器)
1.6.setTimeout(“第一个参数是所要触发的事件”,“时间，毫秒为单位”) 间隔多少秒只执行一次 clearTimeout(id) 清除定时器
1.7.style=“display: none” 隐藏控件
1.8.tv_uname_span.innerHTML="" 这个属性就是向标签添加内容
1.8.tv_id.innerHTML ==>获取其节点里的内容

练习一：计时器的实现
要求：使用setInterval（）实现计数1—6效果
实现效果
在这里插入图片描述
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>计时器</title>
</head>
<body>
<script>
    var id;
    var count = 1;//全局变量计数器
    window.onload = function () {//当页面加载完成时执行这个方法
        id = setInterval("f()", 1000);//定时函数，每当1000毫秒到来，执行一次绑定的函数f()
    }

    function f() {
        alert(count);
        if (count == 6) {//当计数器达到6时清理定时器
            clearInterval(id);
        }
        count++;

    }
</script>
</body>
</html>

练习2：轮播图实现
要求：给定图片数量实现图片自动无限轮播
实现效果：

在这里插入图片描述
实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
</head>
<body>
<img src="image/1.jpg" width="100%"  id="tv_img" height="500px">
<script>
    window.onload = function () {
        // 隔多长时间换图
        setInterval("changeImg()",500);
    }
    var  count =1;
    function changeImg() {
        // 获取这个标签
        var   tv_img =   document.getElementById("tv_img");
        tv_img.src="image/"+count+".jpg";
        // 判断是否是最后一张图片
        if(count==3){
            count=1;
            return;
        }
        count++;
    }
</script>

</body>
</html>

练习3：表格隔行变色和实现多选按钮的全选，反选，全部选
实现效果：
在这里插入图片描述
实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        td {
            text-align: center;
        }
#xun{
    text-align: center;
}
    </style>
</head>
<body>
<div id="xun">
    <input type="button" value="全不选" onclick="qunaxuan()">
    <input type="button" value="全选" onclick="buxaun()">
    <input type="button" value="反选" onclick="fanxuan()">
</div>

<table border="1" cellspacing="0" cellpadding="0" width="300px" align="center">
    <tr>
        <td ><input type="checkbox" name="chec"class="che"></td>
        <td>456</td>
        <td>123</td>
        <td>456</td>
    </tr>
    <tr>
        <td ><input type="checkbox" name="chec" class="che"></td>
        <td>456</td>
        <td>789</td>
        <td>987</td>
    </tr>
    <tr>
        <td ><input type="checkbox" name="chec" class="che"></td>
        <td>456</td>
        <td>789</td>
        <td>987</td>
    </tr>
    <tr>
        <td ><input type="checkbox" name="chec" class="che"></td>
        <td>456</td>
        <td>789</td>
        <td>987</td>
    </tr>
</table>
<script>
    var color = ["red", "#cccc", "sandybrown", "salmon"];//table隔行变色
    var tr = document.getElementsByTagName("tr");//返回的是标签数组
    for (var i = 0; i < tr.length; i++) {//遍历标签数组
        /*if (i%2!=0){
            tr[i].style.backgroundColor="red";
        }*/
        tr[i].style.background = color[i];
    }

    function buxaun() {//不选
        var che = document.getElementsByClassName("che");
        for (var i = 0; i < che.length; i++) {
            che[i].checked = true;
        }
    }
    function qunaxuan() {//全选
        var che = document.getElementsByClassName("che");
        for (var i = 0; i < che.length; i++) {
            che[i].checked = false;
        }
    }
    function fanxuan() {//反选
        var che = document.getElementsByClassName("che");
        for (var i = 0; i < che.length; i++) {
            che[i].checked =!che[i].checked;//通过设置checked属性
        }
    }
</script>
</body>
</html>

练习四：使用settimeout()实现指定时间显示图片，在一定时间内再把图片隐藏起来
实现效果：
在这里插入图片描述
实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body{
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>
<img src="image/1.jpg" id="v_img" style="display: none" width="200px" height="200px"></img><!--使用display: none先隐藏image标签-->
<img src="image/2.jpg" width="400px" height="400px">
<script>
    window.onload = function () {
        setTimeout("show()", 2000);//settimeout（）里的show方法只被会调用一次
    }

    function show() {
        var v_img = document.getElementById("v_img");
        v_img.style.display = "block";//设置image显示
        setTimeout("hide()",2000);//等待2秒后，把image标签隐藏

    }
    function hide() {
        var v_img = document.getElementById("v_img");
        v_img.style.display = "none";
    }
</script>
</body>
</html>

练习五：常用弹框
实现效果：

实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>提示框</title>
</head>
<body>
<script>
    alert("sdsdfsfsfsdf");//弹出提示框
    var comf=confirm("是否");//返回布尔值，弹出有确定和取消选项的弹窗
    if (comf){
        alert("已删除");
    }else if (!comf){
        alert("删除失败")
    }
var text=prompt("请输入按照提示输入");//弹出有输入框的弹窗
alert(text);//接收提示框输入的文本
</script>
</body>
</html>

练习六：
实现登录窗口的基础验证，包括form表单提交确认事件onsubmit的使用,它return的返回值true和false觉得是否可以跳转，onclik事件的使用，焦点点击事件，焦点移除事件在登录创建的应用
实现效果：
在这里插入图片描述
实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form method="get" action="setTimeout.html" onsubmit="return f()">
    用户名:<input type="text" name="user" id="v_user" onblur="addU()" onfocus=" deleU()"><span id="s_user"></span> <br>
    密码:<input type="text" name="pwd" id="v_pwd" onblur="addU()" onfocus="deleU()"><span id="p_user"></span> <br>
    确认密码:<input type="text" name="re_pwd" id="v_re_pwd" onblur="addU()" onfocus="deleU()"><span id="r_user"></span> <br>
    <a><input type="submit" value="提交"></a>
</form>
<script>
    function addU() {
        var v_user = document.getElementById("v_user").value;//注意：value获取的值都是字符串
        var v_re_pwd = document.getElementById("v_re_pwd").value;
        var v_pwd = document.getElementById("v_pwd").value;
        if (v_user == null || v_user == "") {//通过空值和null判断是否为空
            var s_user = document.getElementById("s_user");//在span标签里面添加显示的内容
            s_user.style.color = "red";//设置字体的颜色
            s_user.innerHTML = "账户名为空";
            return false;//不能被跳转
        }
        if (v_pwd == null || v_pwd == "") {
            var p_user = document.getElementById("p_user");
            p_user.style.color = "red";
            p_user.innerHTML = "密码为空";
            return false;
        }
        if (v_re_pwd != v_pwd) {
            var r_user = document.getElementById("r_user");
            r_user.style.color = "red";
            r_user.innerHTML = "密码不一致";
            return false;
        }

    }

    function deleU() {//把span文本设置为空
        var s_user = document.getElementById("s_user");
        var p_user = document.getElementById("p_user");
        var r_user = document.getElementById("r_user");
        if (s_user != null || s_user != "") {
            s_user.innerHTML = "";
        }
        if (p_user != null || p_user != "") {
            p_user.innerHTML = "";
        }
        if (r_user != null || r_user != "") {
            r_user.innerHTML = "";
        }


    }


    function f() {
        var v_user = document.getElementById('v_user').value;
        var v_pwd = document.getElementById('v_pwd').value;
        var v_re_pwd = document.getElementById('v_re_pwd').value;
        if (v_user == null || v_user == "") {
            alert("用户名为空");
            return false;
        }
        if (v_pwd == null || v_pwd == "") {
            alert("密码为空为空");
            return false;
        }
        if (v_re_pwd == null || v_re_pwd == "") {
            alert("确认密码不能为空");
            return false;
        }
        if (v_pwd != v_re_pwd) {
            alert("密码不一致");
            return false;
        }
        return true;

    }
</script>
</body>
</html>

练习七：
编写代码实现：实现当点击“计算折扣” 按钮时，展示如效果图
在这里插入图片描述
实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<p align="center">编写代码实现：实现当点击“计算折扣” 按钮时，展示如效果图。</p>
<table align="center">
    <tr><td></td></tr>
    <tr><td>书名：<input type="text" name="book"></td></tr>
    <tr><td>作者：<input type="text" name="reader"></td></tr>
    <tr><td>价格：<input type="text" name="mun" id="en"></td></tr>
    <tr><td>折扣：<input type="text" name="cun" id="en2"></td></tr>
    <tr><td><input type="button" value="计算折扣价"  onclick="f()"><span id="we" style="color: red"></span></td></tr>
</table>
<script>
//由于没有涉及到数据查询，只是单纯的运算大折后的数
    function f() {
        var en=document.getElementById("en").value;
        var en2=document.getElementById("en2").value;
        var we=document.getElementById("we");
        we.innerHTML=""+(en*en2);

    }
</script>
</body>
</html>

练习八：当点击计算最大值时，将输入三个数中的最大值显示在最大值输入框
实现图：
在这里插入图片描述
实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>homework</title>
</head>
<body>
<h3 align="center">当点击计算最大值时，将输入三个数中的最大值显示在最大值输入框</h3>
<table align="center">
    <tr>
        <td></td>
    </tr>
    <tr>
        <td>数值1：<input type="text" name="book" class="a"></td>
    </tr>
    <tr>
        <td>数值2：<input type="text" name="reader" class="a"></td>
    </tr>
    <tr>
        <td>数值3：<input type="text" name="mun" class="a"></td>
    </tr>
    <tr>
        <td>最大值：<input type="text" name="cun" id="spn"></td>
    </tr>
    <tr>
        <td><input type="button" value="计算最大值" onclick="f()"></td>
    </tr>
</table>
<script>
//1 获取指定节点 2 将指定节点的数值转换为number类型 3通过循环来比较数值的大小 
    var max=0;
    function f() {
        var classAll = document.getElementsByClassName("a");
        for (var i = 0; i < classAll.length; i++) {
            if(Number(classAll[i].value)>max){
                max= parseInt(classAll[i].value);
            }
        }
        var spn = document.getElementById("spn");
        spn.value = max;
    }
</script>
</body>
</html>

怕鬼的哪吒

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
javaWeb学习第三天-------JavaScript入门

一、JavaScript介绍JavaScript：前端的强大的脚本语言二、JavaScript和javaWeb常用语言比较Java：编译型语法，有可移植性，跨平台特性JavaScript：语法与java类似,主要是做前端页面的上的逻辑处理,和做一些动效主要操作：1)可以操作标签 2) 追加样式 3)前端的验证html: 超文本标记语言==>预定义的一些标签 ==>编...
复制链接

扫一扫

专栏目录