Web前端--JS简单入门篇

最新推荐文章于 2024-06-11 02:06:44 发布

哦?

最新推荐文章于 2024-06-11 02:06:44 发布

阅读量751

点赞数

分类专栏： python基础 Web

本文链接：https://blog.csdn.net/qq_44241861/article/details/104345425

版权

python基础同时被 2 个专栏收录

26 篇文章 0 订阅

订阅专栏

Web

11 篇文章 0 订阅

订阅专栏

文章目录

JS介绍
JS的使用和输出
基本语法
DOM文档对象模型
BOM浏览器对象模型
六、JS事件

关于JavaScript的学习可以参考W3C，里面的介绍和用法很详细，使用时去查阅.

JS介绍

JavaScript 是属于 HTML 和 Web 的编程语言。
JavaScript 是 web 开发者必学的三种语言之一：
HTML 定义网页的内容
CSS 规定网页的布局
JavaScript 对网页行为进行编程动态显示，与客户端互动
有哪些作用？
JavaScript 能够改变 HTML 内容
JavaScript 能够改变 HTML 属性
JavaScript 能够改变 HTML 样式 (CSS)
JavaScript 能够隐藏 HTML 元素
JavaScript 能够显示 HTML 元素

JS的使用和输出

1、使用：
在 HTML 中，JavaScript 代码必须位于 < script > 与 < /script > 标签之间。JS语言每句后面要加；，head处编辑。
2、输出：

JavaScript 不提供任何内建的打印或显示函数，
JavaScript 能够以不同方式“显示”数据：
使用 window.alert() 写入警告框
使用 document.write() 写入 HTML 输出
使用 innerHTML 写入 HTML 元素
使用 console.log() 写入浏览器控制台

基本语法

1、定义变量
使用一个变量前要先声明：

举例：
var x = 1;
var y = 2;
var z = x + y;

应用：
<script>
    var info = '打开成功';
    alert(info);
</script>

2、运算符
和python中的一样
（1）算数运算符
在这里插入图片描述
（2）赋值运算符

（3）比较运算符

注意
= = = ：表示值相等并且类型相等
= =：值相等
举例：

==：   ‘5’ == 5    true
= = =：‘5’ = = = 5  false

在这里插入图片描述
（4）逻辑运算符

3、数据类型

回顾一下python中的数据类型有哪些？

数值类型，字符串，列表，集合，元组，字典

JS支持的数据类型：

字符串，数值布尔值，数组，对象（有点像字典）

var a = 3;
var name = 'hello'
var color = ['red', 'blue','green']
var b = {name:'zhangsan', age:12 }

4、函数
JavaScript 函数通过 function 关键词进行定义，其后是函数名和括号 ()。
函数名可包含字母、数字、下划线和美元符号（规则与变量名相同）。

function 函数名(参数1，参数2,...){
      要执行的代码;
      return 返回值;
}

5、条件语句

在 JavaScript 中，我们可使用如下条件语句：
使用 if 来规定要执行的代码块，如果指定条件为 true
使用 else 来规定要执行的代码块，如果相同的条件为 false
使用 else if 来规定要测试的新条件，如果第一个条件为 false
使用 switch 来规定多个被执行的备选代码块

if (条件 1) {
    条件 1 为 true 时执行的代码块
} else if (条件 2) {
    条件 1 为 false 而条件 2 为 true 时执行的代码块
 } else {
    条件 1 和条件 2 同时为 false 时执行的代码块
}

6、for循环

for(var i=0; i<count; i++){
 循环做的事情
}

DOM文档对象模型

DOM（document object model）文档对象模型
当网页被加载时，浏览器会创建页面的文档对象模型。
HTML DOM 模型被结构化为对象树：
在这里插入图片描述
通过这个对象模型，HTML DOM 可以进行获取、更改、添加或删除 HTML 元素。
DOM方法和属性：
HTML DOM 方法是能够（在 HTML 元素上）执行的动作。
HTML DOM 属性是能够设置或改变的 HTML 元素的值。

常用方法和属性：

//方法:
document.getElementsByName()  //返回的是一个列表对象
document.getElementById()     //返回的是一个元素对象
document.createTextNode()     //创建文本节点
document.createElement()      //创建元素节点
nodeobj.appendCgild()         //添加子节点

//属性:
object.innerHTML    //当前标签对象里面嵌套的HTML信息
object.value        //用户输入的信息值
object.src          //获取图片的路径，通过赋值方式可以实现修改图片路径
object.checked      //判断当前多选框是否被选中

BOM浏览器对象模型

浏览器对象模型（Browser Object Model (BOM)）允许 JavaScript 与浏览器对话，JS对浏览器操作

六、JS事件

HTML 事件是发生在 HTML 元素上的“事情”。
当在 HTML 页面中使用 JavaScript 时，JavaScript 能够“应对”这些事件
HTML 事件可以是浏览器或用户做的某些事情。例如：
HTML 网页完成加载
HTML 输入字段被修改
HTML 按钮被点击

1、onsubmit事件

onsubmit事件：提交事件，onsubmit 事件会在表单中的确认按钮被点击时发生。
小案例：实现一个用户登录数据校验，当用户名密码输入不规范时，通过前端截取，不提交到后台服务器，减少后台服务器的压力。提交的时候校验。

获取用户提交的信息（文档内容信息）：DOM里面的方法document
用户登录时校验，当点击submit时执行检测函数来判断用户名和密码是否为空


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--   提交登录信息的时候，执行函数checkForm() -->
    <script>
        // 定义函数
        function checkForm() {
            //获取文档信息内容（DOM中的内容），使用document方法
            //获取当前用户提交的用户名，默认情况下getElementsByName返回列表对象 （name=username的key有很多）.value获取对象里的值
            var username = document.getElementsByName('username')[0].value;
            //判断用户名是否为空
            if(username === ''){
                alert('用户名为空');
            }

            var password = document.getElementsByName('password')[0].value;
            var psw_length = password.length;
            if(psw_length < 6){
                alert('密码长度小于6位')
            }
        }

    </script>
</head>
<body>

<div class="login">
    <h1>用户登录</h1>
<!--
    第一个事件类型：onsubmit
    当提交登录信息的时候，执行函数checkForm()，实现用户的校验
    -->
    <form action="#" method="get" onsubmit="return checkForm()">
        <input type="text" name="username" placeholder="用户名"><br>
        <input type="password" name="password" placeholder="密码"><br>
        <input type="submit" value="登录">
    </form>


</div>

</body>
</html>

2、onfocus、onblur事件

onfocus事件：聚焦事件，onfocus 事件在对象获得焦点时发生。

聚焦：鼠标点击时的提示信息，用innerHTML显示
id里面的嵌套内容可以用innerHTML获取，如果要显示信息修改直接在innerHTML后赋值（修改标签内容）

onblur事件：离焦事件，onblur 事件会在对象失去焦点时发生。
为了使用户体验更好，在鼠标点击到用户名的框时，右边提示输入用户名和密码的要求，当离开框时，检测用户名和密码是否正确

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

    <script>

        function showUserTips() {
            var usertipsobj = document.getElementById('usertips');
            var info = '<span style="color:gray">用户名长度大于2</span>';
            // 通过innerHTML 修改标签内容
            usertipsobj.innerHTML = info;
        }

        function checkUser() {
             var username = document.getElementsByName('username')[0].value;
             var usertipsobj = document.getElementById('usertips');
            //判断用户名长度
            if(username.length <= 2){
                var error_info = '<span style="color: red">用户名长度小于2</span>';
                usertipsobj.innerHTML = error_info;
            }else{
                var right_info = '<span style="color: green">ok</span>'
                usertipsobj.innerHTML = right_info
            }
        }

    </script>
</head>
<body>

<div class="login">
    <h1>用户登录</h1>
<!--    onfocus 聚焦事件，如果聚焦，执行函数showUserTips
        onblur  离焦事件，如果离焦，执行函数checkUser
  -->
    <form action="#" method="get">
        <input type="text" name="username" placeholder="用户名" onfocus="showUserTips()" onblur="checkUser()">
        <span id="usertips"></span><br>
        <input type="password" name="password" placeholder="密码"><br>
        <input type="submit" value="登录">
    </form>
</div>

</body>
</html>

3、onclick事件

点击事件
onclick事件：onclick 事件会在对象被点击时发生。

（1）onclick实现图片的转换：实现点击按钮，切换图片

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

    <script>
        var count = 1;
        function changeimg() {
            count += 1;
            // 获取图片对象
            var imgobj = document.getElementById('img');
            imgobj.src = './img/img' + count + '.jpg';
            // 如果轮播图片结束，从头开始轮播显示图片
            if (count === 5){
                count = 0;
            }
        }
    </script>
</head>
<body>

<div class="box">
    <img src="./img/img1.jpg" id="img"><br>
<!--    用户点击按钮时，切换图片到下一个-->
    <input type="submit" value="下一页" onclick="changeimg()">
</div>

</body>
</html>

（2）onclick实现表格全选与全不选
点击左上角按钮，全选，或全不选

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function checkALL() {
            // 获取全选框对象，看他现在有没有全选
            var checkallobj = document.getElementById('checkALL');
            // 获取当前的状态,如果返回true代表选中，否则未选中
            //alert(checkallobj.checked);
            var checkones = document.getElementsByName('checkONE');
            if (checkallobj.checked){
                for (var i=0; i<checkones.length; i++) {
                    checkones[i].checked = true;
                }
            }else {
                for (var i = 0; i < checkones.length; i++) {
                    checkones[i].checked = false;
                }
            }
        }
    </script>
</head>
<body>

<table style="width: 600px; margin: 0 auto; margin-top: 50px; text-align: center" border="1px">
    <th style="text-align: center" colspan="5">
        <input type="button" value="添加">
        <input type="button" value="删除">
    </th>
    <tr>
        <th><input type="checkbox" id="checkALL"  onclick="checkALL()"></th>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>年龄</th>
    </tr>
    <tr>
        <td><input type="checkbox" name="checkONE"></td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
     <tr>
        <td><input type="checkbox" name="checkONE"></td>
        <td>2</td>
        <td>2</td>
        <td>2</td>
        <td>2</td>
    </tr>
     <tr>
        <td><input type="checkbox" name="checkONE"></td>
        <td>3</td>
        <td>3</td>
        <td>3</td>
        <td>3</td>
    </tr>
     <tr>
        <td><input type="checkbox" name="checkONE"></td>
        <td>4</td>
        <td>4</td>
        <td>4</td>
        <td>4</td>
    </tr>

</table>

</body>
</html>

4、onchange事件

onchange 当对象信息改变时执行的内容。

onchange实现省市信息二级联动：第一次选择省份之后，后面选择省份对应的城市

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function changeCity(){
            // 1.如何存储省份和城市之间的关系
            // province = [['西安','渭南','宝鸡'], ['太原','大同','晋城'], ['桂林','南宁','北海']]
            var provinces = [['西安','渭南','宝鸡'], ['太原','大同','晋城'], ['桂林','南宁','北海']];
            // 2.获取用户选择的省份
            var choiceProvince = document.getElementById('province').value;
            // alert(choiceProvince);   // 获取到的是value值 0, 1, 2
            // 3.获取用户选择的省份对应的所有城市，并添加到select里
            citys = provinces[choiceProvince];

            // 先获取到城市，如果之前有城市，进行清除：直接将长度置为0
            var selectcityobj = document.getElementById('city');
            selectcityobj.length = 0;

            // 4.添加到select中
            for(var i=0; i<citys.length; i++){
                // 创建城市文本节点
                var textnode = document.createTextNode(citys[i]);
                // 创建option元素节点
                var optEleobj = document.createElement('option');
                // 将文本节点添加到option节点中
                optEleobj.appendChild(textnode);
                // 将option加入到select
                selectcityobj.appendChild(optEleobj);
            }
        }
    </script>
</head>
<body>

<div class="content">
    <form action="#" method="get">
        <span>籍贯</span>
<!--        当修改省份选项时，执行函数chnageCity的内容    -->
        <select id="province" onchange="changeCity()">
            <option>--选择省份--</option>
            <option name="province" value="0">陕西</option>
            <option name="province" value="1">山西</option>
            <option name="province" value="2">广西</option>
        </select>
        <select id="city">
            <option>--选择城市--</option>
        </select>
    </form>
</div>

</body>
</html>

哦?

关注

0
点赞
踩
9

收藏

觉得还不错? 一键收藏
1
评论
Web前端--JS简单入门篇

文章目录JS介绍JS的使用和输出基本语法关于JavaScript的学习可以参考W3C，里面的介绍和用法很详细，使用时去查阅.JS介绍JavaScript 是属于 HTML 和 Web 的编程语言。JavaScript 是 web 开发者必学的三种语言之一：HTML 定义网页的内容CSS 规定网页的布局JavaScript 对网页行为进行编程动态显示，与客户端互动有哪些作用？J...
复制链接

扫一扫

专栏目录