JavaScript学习笔记

最新推荐文章于 2020-07-10 00:09:39 发布

waectr

最新推荐文章于 2020-07-10 00:09:39 发布

阅读量651

点赞数

分类专栏： JavaWeb 文章标签： JavaScript JavaWeb

本文链接：https://blog.csdn.net/waectr/article/details/81381070

版权

它是一种脚本语言，轻量级编程语言，解释性语言，向HTML添加交互行为

作用：

HTML是页面的骨架

CSS对整个网站的骨架进行美化

JavaScript让页面具有动态效果

JavaScript组成：

ECMAScript：整个JavaScript的核心，各种语法，变量，关键字

DOM：文档对象模型（整个HTML页面内容）

BOM：浏览器对象模型（整个浏览器相关内容）

ECMAScript：

语法：

区分大小写

变量是弱类型的：

定义变量时，都用var，不管什么类型，JS中没有int.....这类类型，所有与数字有关的都是数字类型，没有赋值的话，这个变量是没有任何类型的

每行最后的分号可有可无（最好写上）

变量：

定义变量用var，在函数内部定义，如果使用var定义，那么它是局部变量，如果没有使用var，它是一个全局的

ECMAScript中的变量不一定要初始化，也可以存放不同类型的值，比如之前定义为字符串类型的值，最后可以把他设置为数字类型的值

声明变量不是必须的

关键字和保留字：大部分与Java相同

引入方式：

通过<script></script>标签放入，和CSS很像

基本类型：

Undefined类型，只有一个值，它本身，当声明的变量未初始化时，默认值为Undefined

原始数据类型：undefined null string number boolean

基本操作：

alert():向页面中弹出一个框

innerHTML：想页面的某个元素中写一段内容，将原有的覆盖

document.write()：向页面中写内容

==与=== ==会进行强制转换 ===不进行强制转换

事件：

onsubmit()此事件写在form标签中，必须有返回值

onload()此事件只能写一次并且放在<body>中

其他事件放到需要操作的标签中

(onclick,onfocus,onblur)

案例一：实现对文本框内容的控制

基础知识：

和JAVA类似JS中使用 function 函数名(){}来定义函数

JS中的正则匹配方法：

可以使用String对象中的match方法

可以使用正则中的test方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<script>
    function check() {
        var loginName=document.getElementById("usename").value;
        //验证账号
        if(loginName==""){
            alert("用户名不能为空")
            return false;
        }
        //验证密码
        var loginpwd=document.getElementById("password").value;
        if(loginpwd==""){
            alert("密码不能为空");
            return false;
        }

        //验证确认密码
        var reloginpwd=document.getElementById("repassword").value;
        if(reloginpwd!=loginpwd){
            alert("两次密码输入不一致");
            return false;
        }
        //验证邮箱
        var email=document.getElementById("email").value;
        if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(email)){
            alert("邮箱格式不正确");
            return false;
        }
    }
</script>
<body>
    <form onsubmit="return check();">
        用户名<input type="text" id="usename"><br/>
        密码<input type="password" id="password"><br/>
        确认密码<input type="password" id="repassword"><br/>
        邮箱<input type="text" id="email"><br/>
        <input type="submit" id="tijiao" value="提交">
    </form>
</body>
</html>

案例二：制作轮播图

首先要使用一个函数setInterval（）

我们需要在指定的位置来设置事件加载onload，如果我们要点击按钮来使图片反应，那么就要设置在相对应的<input>中，如果要在一开始就要有反应，那么就要设置在<body>中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>轮播图</title>
    <style>
        #a{
            width: 100px;
            height: 100px;
        }
    </style>
    <script>
        function init() {
            setInterval(changerImage, 2000);
        }
        var i=0;

最低0.47元/天解锁文章

waectr

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
JavaScript学习笔记

它是一种脚本语言，轻量级编程语言，解释性语言，向HTML添加交互行为作用：HTML是页面的骨架CSS对整个网站的骨架进行美化JavaScript让页面具有动态效果 JavaScript组成：ECMAScript：整个JavaScript的核心，各种语法，变量，关键字DOM：文档对象模型（整个HTML页面内容）BOM：浏览器对象模型（整个浏览器相关内容）...
复制链接

扫一扫