JavaScript 基础

最新推荐文章于 2024-09-03 17:02:58 发布
最新推荐文章于 2024-09-03 17:02:58 发布
阅读量230 收藏
点赞数 1
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Coooooc/article/details/79594328
版权

JS基础语法

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

    <!-- 1.JS 的引入 -->
    <!-- 内部引入 -->
    <script type="text/javascript">
        // 变量 - 内存
        // JS 声明变量都用 var 关键字
        // 五种基本数据类型
        // 变量名要求:
        // 1. 数字、字母、下划线、和$的组合
        // 2. 不能以数字开头
        // 3. 不能是关键字和保留字
        // 4. 严格区分大小写
        // 规范: 可以使用驼峰命名法
        var a = 10; // 数值 Number
        var b = "123"; // 字符串 String
        var c = '456'; // 字符串 String
        var d = true; // 布尔类型 boolean
        var e = false; // 布尔类型 boolean
        var f = null; // 空对象 null
        var g; // 未定义类型 undefined

        // 判断相等 == ===
        // == 判断两个值是否相等
        // === 除了判断值之外,还会判断类型
        console.log("5" == 5); // ture
        console.log("5" === 5); // false

        console.log("5" != 5); // false
        console.log("5" !== 5); // ture

        // 类型转换
        // 查看类型
        console.log(typeof (a));
        // 转数字
        console.log(Number(true)); // 1
        console.log(Number(false)); // 0
        console.log(Number("123")); // 123
        console.log(Number('abc')); // NaN
        console.log(Number('a1')); // NaN
        console.log(Number('1a')); // NaN
        console.log(Number('')); // 0
        console.log(Number(' ')); // 0
        console.log(Number(undefined)); // NaN
        console.log(Number(null)); // 0

        // 字符串
        console.log(String(undefined)); //"undefined"
        // 布尔值(非0为真 非空为真)
        console.log(Boolean(-1)); // true
        console.log(Boolean("")); // false

        // 隐式转换
        // 加号两边如果有一个是字符串,就是拼接字符串(例如: 1 + "234" -> "1234")
        // 其他算术运算符是转化为数值计算
        console.log(3 + true); // 4
        console.log(3 + null); // 3
        console.log(true + "3"); // "true3"
        console.log(3 - true); // 2
        console.log(3 + undefined); // NaN

        // 转数字 parseInt()
        console.log(parseInt(5.6)); // 5
        console.log(parseInt("5.6")); // 5
        console.log(parseInt("34asd")); // 34
        console.log(parseInt("34as6")); // 34
        console.log(parseInt("a34sd")); // NaN

        // 10进制 -> 2进制
        console.log(parseInt(15, 10));

        // 生成随机数
        var num = parseInt(Math.random() * (30 - 20 + 1) + 20);
        console.log(num);

        // 函数 JS 里面的变量只分为函数内部的局部变量,和函数外面的全局变量
        function Test(a, b){
            console.log(a + b);
            return a * b;
        }
        var t = Test(10, 20, 30);
        console.log(t);

        // 匿名函数

        var fn = function(){
            console.log("匿名函数1");
        };

        // 匿名函数自执行
        (function(){
            console.log("匿名函数2");
        })();

        (function(){
            console.log("匿名函数3");
        }());

        fn();

        console.log("hello world");
    </script>
    <!-- 外部引入 -->
    <script  type="text/javascript" src="index.js"></script>
</html>

<script type="text/javascript">
    var items = document.getElementsByClassName('item');
    var last = items[0];
    // 4、循环配合一组元素(div)使用
    for(var j = 0; j < items.length; j++){
        items[j].index = j; //3.1循环的时候每个div发一个学号。让这个div自己记住自己是第几个。
        items[j].onclick = function(){
            // 3.2需要知道某一个div是第几个的时候，就让他自己报出来自己的学号。
            // console.log(this.index);

            // 2、写代码的时候实现某一功能思路很多，要找一个性能最好的来实现。
            // for(var i = 0; i < items.length;i++){
            //  items[i].style.backgroundColor = "red";
            // }
            // //1、 谁执行的点击方法 this就是谁。
            // this.style.backgroundColor = "blue";

            last.style.backgroundColor = "red";
            this.style.backgroundColor = "blue";
            last = this;
        }
    }

    // for(var i = 0; i < 10; i++){
    //  setTimeout(function(){
    //      console.log(i);
    //  }, 1000);

    // }
    // i = 100;
</script>

DOM的简单操作

<script type="text/javascript">
    // 获取对象
    var first = document.getElementById("first");
    // 修改背景颜色
    first.style.backgroundColor = "blue";
    // 修改边框属性
    first.style.border = "5px solid green";
    // 修改外边距
    first.style.margin = "100px auto";
    // 旋转
    first.style.transform = "rotate(45deg)";

    // 获取、修改内容
    first.innerHTML = "<p>福</p>"; // 可以解析字符串中的标签
    first.innerText = "<p>福</p>"; // 只可添加文本内容(留言板),不可以解析字符串中的标签
    console.log(first.innerHTML);
    console.log(first.innerText);

    // 通过类名获取一组元素
    var userNames = document.getElementsByClassName("userName");
    // userNames 是所有类名为 userName 的集合
    userNames[0].value = "输入框";
    console.log(userNames[0].value);

    // 通过类名获取某个元素
    var userName = document.getElementsByClassName("userName")[0];
    // userNames 是所有类名为 userName 的集合
    userName.value = "搜索框";
    console.log(userName.value);

    // 通过标签名获取
    var button = document.getElementsByTagName("input")[1];
    var temp = 1;
    // 添加点击方法,每次点击都会执行
    button.onclick = function(){
        console.log(userName.value);
        userName.value = temp++;
        first.style.transition = "1s";
        first.style.width = temp * 10 + "px";
        first.style.height = temp * 10 + "px";
    }
</script>

定时器

<script type="text/javascript">
    // 一次性定时器/延时器
    // 第一种写法
    setTimeout(function(){

    }, 1000);
    // 第二种写法
    setTimeout(f, 1000);
    function f(){
        console.log("执行 f");
    }

    // 循环定时器
    var timer = setInterval(function(){
        console.log("循环定时器");
    }, 2000);

    setTimeout(function(){
        // 清除定时器
        clearInterval(timer);
        // clearTimeout()
    }, 8000);

    var first = document.getElementById("first");
    first.onclick = function(){
        var move = setInterval(function(){
            first.style.left = first.offsetLeft + 5 + "px";
            if (first.offsetLeft >= 500) {
                clearInterval(move);
            }
        }, 20)
    }
</script>

事件

鼠标事件
    redDiv.onmousemove = function(){
        console.log("鼠标移动的时候触发");
    }
    redDiv.onclick = function(){
        console.log("单击事件");
    }
    redDiv.ondblclick = function(){
        console.log("双击事件");
    }
    redDiv.onmousedown = function(){
        console.log("鼠标按下事件");
    }
    redDiv.onmouseup = function(){
        console.log("鼠标抬起事件");
    }
    redDiv.oncontextmenu = function(){
        console.log("鼠标右击事件");
        // 阻止默认右键弹出右键栏
            return false;
    }
    // over 和 out 会在鼠标从 redDiv 的父级移到子级的时候触发,先触发 out 再触发 over
    // leave 和 enter 从父级移到子级不会触发,只有鼠标离开/移入整个 redDiv 的时候才会触发
    redDiv.onmouseover = function(){
        console.log("over 移入");
    }
    redDiv.onmouseout = function(){
        console.log("out 移出");
    }
    redDiv.onmouseleave = function(){
        console.log("leave 移出");
    }
    redDiv.onmouseenter = function(){
        console.log("enter 移入");
    }

键盘事件

    document.onkeydown = function(){
        console.log("down键盘按下");
    }
    document.onkeypress = function(){
        console.log("press 键盘按下");
    }
    document.onkeyup = function(){
        console.log("键盘抬起事件");
    }

表单
    userName.onchange = function(){
        console.log("change内容发生改变之后触发");
    }
    userName.oninput = function(){
        console.log("input内容发生变化之后触发");
    }
    userName.onfocus = function(){
        console.log("聚焦");
    }
    userName.onblur = function(){
        console.log("失焦");
    }
    // 给 form 表单绑定事件
    reg.onsubmit = function(){
        console.log("提交");

        // 阻止默认跳转
        return false;
    }
    reg.onreset = function(){
        console.log("重置");

        // 阻止默认重置
        return false;
    }

window 事件
    window.onresize = function(){
        console.log("窗口尺寸发生变化的时候触发");
    }
    window.onscroll = function(){
        console.log("窗口内容滚动的时候触发");
    }
    window.onload = function(){
        console.log("窗口加载完毕之后触发");
    }

事件对象

<script type="text/javascript">
    // 鼠标事件 -> 位置
    var redDiv = document.getElementsByClassName("redDiv")[0];
    redDiv.onclick = function(){
        var evObj = window.event || ev;
        // 触发事件的元素(触发事件的元素不一定是绑定事件的元素)
        console.log(evObj.target);
        // 鼠标距离窗口顶部的坐标
        console.log(evObj.clientY);
        // 鼠标距离页面顶部的坐标
        console.log(evObj.pageY);
        // 鼠标距离 target 顶部的坐标
        console.log(evObj.offsetY);
    }
    // press 区分大小写,但不支持特使按键
    // down 不区分大小写,支持特殊按键
    document.onkeypress = function(ev){
        console.log("press" + ev.keyCode);
    }
    document.onkeydown = function(ev){
        // keyCode 标识哪一个按键
        console.log(ev.keyCode);
        if (ev.keyCode == 66) {
            console.log("按了 B");
        }
        // 判断组合键
        if (ev.keyCode == 66 && ev.metaKey) {
            console.log("按了 command + B");
        }
    }
</script>

动画


    /*动画名称*/
    animation-name: run;
    /*动画时长*/
    animation-duration: 1s;
    /*动画运动方式*/
    animation-timing-function: linear;
    /*动画延时*/
    /*animation-delay: 1s;*/
    /*动画次数*/
    /*infinite 无限*/
    animation-iteration-count: 1;
    /*动画方向*/
    /*reverse 反向*/
    /*normal 正常*/
    /*alternate 单数正向,双数反向*/
    /*alternate-reverse 双数正向,单数反向*/
    animation-direction: normal;
    /*
        forwards 动画结束的时候停留在当前位置
        backwards 在动画延时期间,元素的位置在动画起始的位置
        both 包含以上两个效果
    */
    animation-fill-mode: both;

事件捕获和冒泡

<script type="text/javascript">
    var box = document.getElementsByClassName("box")[0];
    var mid = document.getElementsByClassName("mid")[0];
    var item = document.getElementsByClassName("item")[0];
    // 事件冒泡 - 阻止事件冒泡
    box.addEventListener("click", function(){
        console.log("box");
    }, false);
    mid.addEventListener("click", function(){
        console.log("mid");
    }, false);
    // item.addEventListener("click", function(){
    //  console.log("item");
    // }, false);
    item.addEventListener("click", function(ev){
        // 取消冒泡 不让事件继续
        ev.cancelBubble = true; // 第一种
        ev.stopPropagation(); // 第二种
        // 兼容写法
        if (ev.stopPropagation) {
            ev.stopPropagation();
        } else{
            ev.cancelBubble = true;
        }
        console.log("小明");
        // 阻止默认事件
        ev.preventDefault(); // 第一种
        ev.returnValue = false; // 第二种
        return false; // 第三种
    }, false);
</script>

事件绑定

<script type="text/javascript">
    var redDiv = document.getElementsByClassName("redDiv")[0];
    // 事件绑定 -> 给一个元素绑定多个相同事件
    redDiv.addEventListener("click", f1, false);
    redDiv.addEventListener("click", f2, false);
    function f1(){
        console.log(1);
    }
    function f2(){
        console.log(2);
    }
    // 移除事件绑定
    redDiv.removeEventListener("click", f2, false);
</script>
暮丶
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript基础
06-22
在深入学习JavaScript基础之前，我们需要理解其核心概念、语法结构以及如何在HTML和CSS之间协调工作。 首先，JavaScript的基础包括变量、数据类型和操作符。变量是存储数据的容器，可以用来保存各种类型的值，如...
javascript基础语法总结.pdf
07-02
这个资源是javaScript基础语法的总结，适合学完javascript基础语法的进行巩固、复习！ 这...我是想免费给大家看的,这怎么还收费
【JavaScript】基础
海棠不惜胭脂色，独立蒙蒙细雨中
11-26 586
上一篇博客我们提到ECMAScript是JavaScript的核心，他的组成部分有语法、类型、语句、关键字、保留字、操作符等，那么这篇博客我将为大家提供这些最基础，最核心的知识，希望对您有帮助！ 1.语法：区分大小写；标识符（变量、函数、属性的名字）；直接量（字面量，程序中直接显示的数据） 关键字和保留字：关键字不能作标识符，保留字可能将来被用作关键字。 2.数据类型：
HTML_JavaScript基础入门
u013767117的专栏
03-09 1410
1、JavaScript基本语法 JavaScript的主要作用 1， 客户端表单验证 2， 页面动态效果 3， 动态改变页面内容 什么是JavaScript JavaScript是基于对象和事件驱动的、具有一定安全特性的脚本语言。和xhtml与css一样，JavaScript是在浏览器端解释并被执行的。 *实事上，JavaScript也可以在服务器端运行，但我们不涉及这方面的内容。
javascript百炼成仙 第一章 掌握JavaScript基础01 初入宗门
热门推荐
java小白翻身
10-06 17万+
乐阳村，处于脚本大陆东部的边缘地带，民风淳朴，村名日出而作，日落而息。这一日清晨，所有村民来到村庄的门口，正在为一个十五六岁的少年送别。只见那少年虽然身体瘦弱，可是目中绽放出异彩，身躯虽不壮实，倒也挺拔。 “叶小凡，你是我们全村人的骄傲，百年来唯一一个具备修行JavaScript甲等资质的孩子！马上会有千鹤派的大人来接你，今后你一定要认真修行，给我们全村的人争光！” 他叫叶小凡，几天前通过了修行资质的检验，符合修行JavaScript的资质。 “千鹤派！”叶小凡眼前一亮，语气中伴随着激动，两眼放光。千鹤派，
JavaScript基础大总结
Augenstern_QXL的博客
07-31 13万+
✍初始JavaScirpt JavaScript 是世界上最流行的语言之一，是一种运行在客户端的脚本语言 （Script 是脚本的意思） 脚本语言：不需要编译，运行过程中由 js 解释器( js 引擎）逐行来进行解释并执行 现在也可以基于 Node.js 技术进行服务器端编程 ????浏览器执行JS简介 浏览器分成两部分：渲染引擎和 JS 引擎 渲染引擎：用来解析HTML与CSS，俗称内核，比如 chrome 浏览器的 blink ，老版本的 webkit JS 引擎：也称为 JS 解释器。 用来读
JavaScript基础（详细总结）
程序员阿龙的博客
08-18 2万+
JavaScript基础入门详细总结
JavaScript基础语法
m0_67683346的博客
11-02 5845
javascript中的一些基础语法
JavaScript 基础概念
weixin_52682120的博客
04-20 3116
1 JavaScript 概念 1.1 什么是JavaScript（简称“JS”）？ 是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。 【脚本语言、基于对象、动态交互、跨平台性】 1.2 语言组成 ①ECMAScript，描述了该语言的语法和基本对象。 ②文档对象模型（DOM），描述处理网页内容的方法和接口。 ③浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。 1. 3 JavaScript的标准是? JavaScript已经被Netscape公司提交给ECMA制定为标准，称之为E
JavaScript基础入门
dangfulin的博客
08-21 5581
一，什么是JavaScript 1，与Java无关！与Java无关！与Java无关！ JavaScript是一种为网站添加互动以及自定义行为的客户端脚本语言， 通常只能通过Web浏览器去完成操作， 而无法像普通意义上的程序那样独立运行。 JavaScript是一种轻量级、解释型的 Web 开发语言，该语言系统不是很庞杂，简单易学。由于所有现代浏览器都己嵌入了JavaScript引擎、JavaScript 源代码可以在浏览器中直接被解释执行，用户不用担心支持问题。 JavaScript的引入，符合”渐进增
javascript基础
m0_65291134的博客
04-28 1389
JavaScript 简介 JavaScript是一种具有函数优先的轻量级，解释型或即时编译型的编程语言 JavaScript入门 1、标签 <script></script> 2、引入方式 内部引入 在标签内写JavaScript代码 且不用显示定义type，默认JavaScript 外部引入 语法：<script src="path"></script> 数据类型 基本数据类型 1.1 数值类型 不分整数
javascript百炼成仙 第一章 掌握JavaScript基础 1.2直接量
java小白翻身
10-06 7万+
叶小凡的住处被安排在青山院西北角的一个房间里，虽不宽敞，倒也干净。叶小凡两眼露出振奋的眼神，随便吃了点乡亲们准备的干粮后，就立刻开始打坐修行。编程之修，重在积累，而非资质。资质虽然一样重要，可是后天的努力一样必不可少。这些道理，叶小凡还未上山之前，就已经熟知！因此，即便是资质平凡，只要肯下苦功，一样可以修得正果！叶小凡虽然甲等资质，可依然不骄不躁，开始从“JavaScript基础修炼要诀”第一页开始看起。 修炼要诀第一章，直接量。 编程世界，所谓直接量，就是明面上可以见到的数据值。常见的直接量有数字，小数，
【基础】Three.js加载纹理贴图、加载外部gltf格式文件
stay hungry, stay foolish
09-02 1282
.gltf（JSON文件）: 描述模型的主要结构，包括几何体、材质、动画、场景等。.bin（二进制文件）: 存储顶点数据、法线、UV坐标等二进制数据。纹理（.png, .jpg）: 存储模型使用的纹理贴图。。
Vue的状态管理——Vuex3&4&Pinia
警警的博客
08-30 2447
Pinia是Vue.js 3.x的状态管理库，它可以看作是Vuex的升级版，旨在提供一种更简单、更直观的方式来管理Vue.js应用程序的状态。Vuex 4是Vue.js 3.x版本的状态管理库，它在Vuex 3的基础上进行了多项改进和优化，使其更加适用于大型应用和复杂场景。Vuex 3是Vue.js 2.x版本的状态管理库，它提供了一种集中式存储和管理组件状态的方式。：在 Vue 3 项目中，你通常会使用 Vuex 4 或 Pinia 而不是 Vuex 3。在 Vue 3 项目中，你可能会在。
从面向对象(OOP)到面向切面(AOP)：编程范式的演变
妍思码匠的博客
08-30 1350
本文深入探讨了面向切面编程（AOP）在前端开发中的应用，解释了AOP如何通过动态增强与代码复用、降低模块间耦合度，为前端项目带来更高效、更模块化的解决方案。通过具体案例分析，如日志记录切面和动态埋点的实现，展示了如何利用装饰器模式、高阶组件等技术在前端实现AOP。理解AOP的原理与实践，将有助于开发者构建更易于维护和扩展的前端应用。无论你是前端新手还是资深开发者，本文都将为你提供有价值的见解和实用技巧。
在 Vue 中实现跨项目数据传递
最新发布
世轩的博客
09-03 920
需要注意的是，跨项目数据传递可能会带来一些安全和数据一致性的问题。在实际应用中，要根据具体情况选择合适的方法，并确保数据的安全性和可靠性。同时，对于敏感数据，应该采取加密等安全措施。
vue3+vant4父组件点击提交并校验子组件form表单
liuzaixi的博客
08-30 462
方法进行表单验证，如果验证通过则执行提交逻辑。获取子组件的引用，在父组件的点击事件中调用子组件的。这样父组件就可以通过。调用子组件的验证方法了。
vue part 5
E___V___E的博客
08-29 926
生命周期：1 .又名：生命周期回调函数、生命周期函数、生命周期钩广。2 .是什么：Vue在关键时刻用我们调用的一些特殊名称的函数。3•生命周期函数的名字不可史改，但函数的具体内容是程序员根据需求编写的.4 .生命周期函数中的this指向是vm或组件实例对象。
JavaScript基础入门教程
"这是一份JavaScript基础教程，适合初学者，提供初级知识，不涉及动态网页相关高级技术，如动态定位、动画等。教程结构设计为参考教程风格，分为5章，涵盖基础知识和进阶对象知识，以及框架和Cookie的使用。教程要求...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值