JavaScript快速入门

最新推荐文章于 2025-08-23 02:53:08 发布
原创 最新推荐文章于 2025-08-23 02:53:08 发布 · 545 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端

1.什么是JavaScript

2.引入方式

3.基础语法

（1）变量&常量

（2）输出语句

（3）数据类型

注意：模版字符串的字符串拼接

for example：

    //1. 数据类型
    // alert(typeof 10); //number
    // alert(typeof 1.5); //number
    
    // alert(typeof true); //boolean
    // alert(typeof false); //boolean

    // alert(typeof "Hello"); //string
    // alert(typeof 'JS'); //string
    // alert(typeof `JavaScript`); //string

    // alert(typeof null); //null ? -> object

    // let a ;
    // alert(typeof a); //undefined

    //2. 模板字符串 - 简化字符串拼接
    let name = 'Tom';
    let age = 18;

    console.log('我是'+name+', 我今年'+age+'岁');
    console.log(`我是${name}, 我今年${age}岁`);

（4）函数

<1>具名函数

    // 函数定义及调用  -具名函数
    let sm = add(10, 20);
    alert(sm)

    function add(a, b) {
        return a + b;
    }
<2>匿名函数

函数表达式：

    // 函数定义及调用  -匿名函数
    // 函数表达式方式
    let sum = function (a, b) {
        return a + b;
    };
    let ans = sum(10, 20);
    alert(ans);

箭头函数：

    // 箭头函数
    let sum = (a, b) => {
        return a + b;
    }
    let ans = sum(10, 20);
    alert(ans);

（5）自定义对象

    // 1.自定义对象
    // let user = {
    //     name: '张三',
    //     age: 18,
    //     gender: '男',
    //     sing() {
    //         alert(this.name + '唱着最炫的民族风');
    //     }
    // }

    let user = {
        name: '张三',
        age: 18,
        gender: '男',
        sing: function () {
            alert(this.name + '唱着最炫的民族风');
        }
    }
    // 2.调用对象的属性和方法
    alert(user.name);
    alert(user.age);
    alert(user.gender);
    user.sing();

（6）json与对象的转换

stringify：

    // 3.JSON   -JS对象标记法
    let person = {
        name: '张三',
        age: 18,
        gender: '男'
    }
    alert(JSON.stringify(person));  // 将person对象转为JSON字符串

parse：

    let personJson = '{"name":"张三","age":"18","gender":"男"}';
    alert(personJson);
    alert(JSON.parse(personJson).name);  // 将JSON字符串转为对象

4.DOM

什么是DOM

DOM操作

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-DOM</title>
</head>
<body>

<h1 id="title1">11111</h1>
<h1>22222</h1>
<h1>33333</h1>

<script>
    // 1.修改第一个h1标签的文本内容
    // 1.1获取DOM对象
    // let h1 = document.querySelector('#title1');
    let h1 = document.querySelector('h1');
    let hs = document.querySelectorAll('h1');


    //1.2调用DOM对象的属性或者方法
    h1.innerHTML = '修改后的文本内容';
    hs[2].innerHTML = '修改后的文本内容';

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

5.事件与事件监听

事件：

事件监听：

for example：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS事件</title>
</head>
<body>

<input type="button" id="btn1" value="点我一下试试1">
<input type="button" id="btn2" value="点我一下试试2">

<script>

    // 事件监听   可以多次绑定同一事件
    document.querySelector('#btn1').addEventListener('click', () => {
        alert('点击了按钮1');
    })
    document.querySelector('#btn1').addEventListener('click', () => {
        alert('点击了按钮1。。。。');
    })
    document.querySelector('#btn2').addEventListener('click', () => {
        alert('点击了按钮2');
    })

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

案例引入（鼠标进入某行，某行变色，离开变回原色）：

    // 1.获取所有tr标签
    let trs = document.querySelectorAll('tr');

    // 2.为每一个tr标签添加鼠标进入和离开事件监听
    for (let i = 0; i < trs.length; i++) {
        trs[i].addEventListener('mouseenter', function () {
            this.style.backgroundColor = '#f2e2e2'; // mouseenter 鼠标进入
        });
        trs[i].addEventListener('mouseleave', function () {
            this.style.backgroundColor = '#fff';  // mouseleave 鼠标离开
        });
    }

常见事件：

代码如下：

        //click: 鼠标点击事件
        document.querySelector('#b2').addEventListener('click', () => {
            console.log("我被点击了...");
        })

        //mouseenter: 鼠标移入
        document.querySelector('#last').addEventListener('mouseenter', () => {
            console.log("鼠标移入了...");
        })

        //mouseleave: 鼠标移出
        document.querySelector('#last').addEventListener('mouseleave', () => {
            console.log("鼠标移出了...");
        })

        //keydown: 某个键盘的键被按下
        document.querySelector('#username').addEventListener('keydown', () => {
            console.log("键盘被按下了...");
        })

        //keyup: 某个键盘的键被抬起
        document.querySelector('#username').addEventListener('keyup', () => {
            console.log("键盘被抬起了...");
        })

        //blur: 失去焦点事件
        document.querySelector('#age').addEventListener('blur', () => {
            console.log("失去焦点...");
        })

        //focus: 元素获得焦点
        document.querySelector('#age').addEventListener('focus', () => {
            console.log("获得焦点...");
        })

        //input: 用户输入时触发
        document.querySelector('#age').addEventListener('input', () => {
            console.log("用户输入时触发...");
        })

        //submit: 提交表单事件
        document.querySelector('form').addEventListener('submit', () => {
            alert("表单被提交了...");
        })

注意模块化的js：

（1）将打印方法与弹窗方法提取出来

注意：要把方法暴露出来

// 注意：要使用 export 才能被其他文件引用
export function printLog(msg) {
    console.log(msg);
}

export function alertMsg(msg) {
    alert(msg);
}

（2）将js提取出来

注意：导入utils中方法

// 引入utils模块
import {printLog, alertMsg} from "./utils.js";


//click: 鼠标点击事件
document.querySelector('#b2').addEventListener('click', () => {
    // console.log("我被点击了...");
    printLog("我被点击了...")
})

//mouseenter: 鼠标移入
document.querySelector('#last').addEventListener('mouseenter', () => {
    printLog("鼠标移入了...");
})

//mouseleave: 鼠标移出
document.querySelector('#last').addEventListener('mouseleave', () => {
    printLog("鼠标移出了...");
})

//keydown: 某个键盘的键被按下
document.querySelector('#username').addEventListener('keydown', () => {
    printLog("键盘被按下了...");
})

//keyup: 某个键盘的键被抬起
document.querySelector('#username').addEventListener('keyup', () => {
    printLog("键盘被抬起了...");
})

//blur: 失去焦点事件
document.querySelector('#age').addEventListener('blur', () => {
    printLog("失去焦点...");
})

//focus: 元素获得焦点
document.querySelector('#age').addEventListener('focus', () => {
    printLog("获得焦点...");
})

//input: 用户输入时触发
document.querySelector('#age').addEventListener('input', () => {
    printLog("用户输入时触发...");
})

//submit: 提交表单事件
document.querySelector('form').addEventListener('submit', () => {
    alertMsg("表单被提交了...");
})

（3）配置提取目录以及模块化

城管不管
关注
JavaScript 快速入门手册
Java.慈祥
08-17 2万+
JavaScript是一门解释型语言，所谓解释型指语言是指不需要被编译为机器码在执行，而是直接浏览器|node中执行。JavaScript中每一个函数对象都存在一个隐藏的对象属性:prototype原型对象函数以普通函数调用，prototype没有任何作用函数以构造函数调用，new 构造函数(...);
javaScript快速入门！
weixin_74009895的博客
08-27 1427
javaScript快速入门！
JavaScript快速入门指南
GZ_TOGOGO的博客
07-29 768
JavaScript最初由Netscape的Brendan Eich在1995年创建，起初名为Mocha，后来改名为LiveScript，最终在发布前定名为JavaScript。现在，你拥有了一个基本的待办事项应用，它可以添加新的待办事项，标记它们为已完成，以及删除它们。ES6（ECMAScript 2015）及更高版本引入了许多新特性，如模板字符串、箭头函数、Promise、async/await等，这些新特性大大增强了JavaScript的功能和易用性。// 输出 "Hello, Alice!
5分钟JavaScript快速入门
luming的博客
02-24 3394
JavaScript是一种高级编程语言，用于开发网页和网络应用程序。它是一种动态类型语言，可以在客户端和服务器端运行。JavaScript主要用于改善用户体验、实现动态网页、与用户进行交互以及处理数据等功能。它具有易学易用的特点，被广泛用于网页开发和移动应用开发。JavaScript是一种弱类型、动态的编程语言，主要用于在网页上添加交互功能。、
JavaScript 快速入门教程
qq_53569667的博客
12-31 1807
在学习 JavaScript 的过程中，根据狂神Java和菜鸟教程的学习内容整理出来的一些笔记
Javascript快速入门
m0_52049533的博客
08-23 645
functionName: function(p1, p2...){}//:function可以省略。
JavaScript快速入门，满满干货总结，快速掌握JS语法，DOM，BOM，事件
m0_70325779的博客
08-07 1101
JavaScript是一个跨平台，面向对象的脚本语言。跨平台，面向对象，脚本语言。前两个特性，学过Java的小伙伴们一定不陌生，因此，有Java基础的同学，学习JavaScript会相对来说比较轻松。再者，JavaScript是脚本语言，所以它是不需要编译，而是由浏览器直接执行的(这句话记住，后面要考哦！！！。本篇主要讲解JavaScript，但是我们又不得不将 JavaScript 与 HTML，CSS做比对。因为它们三者都是构成前端的重要元素，只是各自的分工有所不同。1.1 HTML简介和举例说明。
狂神JavaScript快速入门学习笔记
luojias的博客
04-22 1065
1什么是JavaScript JavaScript是一门世界上最流行的脚本语言 2快速入门 2.1 引入JavaScript 1 内部标签 <script> alert('hello world'); </script> 2外部标签 <script src="kkk.js"></script> 2.2 基本语法入门 2.2.1定义变量 一切变量定义都是var，局部变量建议使用let定义 不加var就是全局变量 ‘use str
JavaScript 快速入门
热门推荐
qq_51492065的博客
06-07 1万+
JavaScript 简介 v JavaScript 是目前最流行脚本语言，简称 JS v JavaScript 编写在 HTML 页面中，由浏览器负责解释和执行 v JavaScript 通常用来给 HTML 页面增加交互能力 ü 为页面增加动画效
JavaScript快速入门.pptx
04-19
对于想要快速入门JavaScript的学习者来说，可以通过在线教程、电子书籍和示例代码等多种资源开始学习。掌握基础概念和语法后，通过大量的实践和项目开发来提高编程技能是非常必要的。同时，参与社区和论坛可以帮助...
JavaScript快速入门.docx
09-05
JavaScript 快速入门 JavaScript 是一种具有函数优先的轻量级、解释型或即时编译型的编程语言。它是作为开发 Web 页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中，例如 Node.js。JavaScript 的标准是...
Quick-Start-to-JavaScript-Volume-3:JavaScript快速入门
05-05
"Quick-Start-to-JavaScript-Volume-3: JavaScript快速入门"旨在帮助初学者迅速掌握这门强大的编程语言，为深入探索Web开发打下坚实基础。 在JavaScript的世界里，了解基本语法是第一步。包括变量声明（var、let、...
JavaScript快速入门与技巧.doc
06-09
这篇文档旨在帮助初学者快速掌握JavaScript的核心概念和技术，并提供一些实用的技巧，以提高开发效率。 首先，创建JavaScript脚本块是通过`<script>`标签实现的，通常会指定`language="JavaScript"`属性。例如： ``...
css的white-space: pre
qq_51035159的博客
08-22 219
简单来说，这个组件的核心就是让用户能够粘贴任何文本内容（特别是配置文件、JSON等），并且保证粘贴的内容格式完全不变，然后可以原样发送给后端处理。- white-space: pre ：这是最关键的CSS属性，确保所有空格、制表符、换行符都被保留。- 用户粘贴的内容会完整存储在 inputJson.value 中，包括所有格式字符。- 使用Vue3的 v-model="inputJson" 实现双向数据绑定。- wrap="off" ：防止浏览器自动换行，保持原始的行结构。- 聚焦时的视觉反馈。
react样式问题
qq_44136028的博客
08-22 231
React组件样式控制主要有三种方式：1）内联样式，通过style属性传递JavaScript对象，支持动态样式但需驼峰命名；2）CSS类名，使用className绑定静态样式；3）CSS-in-JS（如styled-components），将CSS嵌入JS生成带样式组件，支持动态主题切换。三种方式各具特点，内联样式适合简单动态样式，CSS类名适合静态样式，CSS-in-JS适合复杂组件化样式需求。
Figma MCP 的作用与使用方法
最新发布
pumpkin84514的博客
08-23 485
（如 Cursor、Claude Code 等）无缝集成的技术，旨在将 Figma 设计稿高效转换为代码，提升设计与开发的协作效率。的结合，显著提升了设计到代码的转换效率。开发者只需完成环境配置与链接粘贴，即可实现设计稿的自动化代码生成，减少手动工作量并降低出错率。Figma MCP（Model Context Protocol）是一种通过。，用于与 Figma 和 AI 工具通信。Figma MCP 需要本地运行一个。Figma MCP 通过。
JavaScript基础语法five
2301_79744908的博客
08-21 344
本文介绍了JavaScript中对象的基本概念和使用方法。对象是一种无序的数据集合，由属性和方法组成，可以通过点语法或方括号访问属性。文章详细讲解了对象的增删改查操作、方法的定义与调用，以及使用for-in遍历对象的技巧。同时介绍了Math内置对象及其常用方法（如ceil、floor、round等），包括随机数生成公式和猜数字案例的实现。最后指出null属于object类型，并提供了生成N-M范围随机数的通用公式。
三十四、Vue3项目大屏之SCSS自适应适配屏幕方法
张先森的博客
08-19 395
其中 px2vw代表的是高度的适配，px2vh代表的是宽度的适配，我当时着急写反了，但是也可以用，px2vw(1) 大概有1px的大小，如果你先写好了px的标准的1920*1080的设计图，可以直接全局转换。哈喽，大家好，在上次第十五章给大家分享了大屏看板Less适配各种屏幕之后，发现大多数的css都是SCSS,那么今天给大家分享下SCSS的自适应屏幕的方法。底下是原先第十五张的less的适配方法。话不多说，直接上代码。
中文手写总结：掌握JavaScript快速入门要点
本JavaScript快速入门指南通过上述知识结构和章节划分，旨在帮助具有一定编程基础的读者快速掌握JavaScript的基本知识。掌握JavaScript不仅能够提升网页的交互性，还能为前端开发奠定坚实的基础。建议读者在学习过程...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值