后端学前端之JavaScript

最新推荐文章于 2023-01-30 19:08:13 发布
最新推荐文章于 2023-01-30 19:08:13 发布
阅读量413 收藏 1
点赞数
分类专栏： 技术 文章标签： 后端学前端系列
原文链接：https://www.colorgg.com
版权
  1. 了解Javascript
    JavaScript, 简称为JS, 是一种运行在浏览器中的脚本语言; 可以被嵌入到HTML中直接使用, 用来使页面动态化. JS起初被设计用于在客户端对用户信息进行校验, netspace, Brendan Eich（布兰登·艾奇）用10天时间设计并开发了JS. ECMA262标准, 规范Javascript的标准. Javascript和JScript(微软)非常像. (js在html中的位置任意)
  2. Javascript的组成
    ECMAScript, 简称ES, JS的基本内容, 约束了变量, 语法, 流程控制等基本内容;
    BOM, Browser Object Model, 浏览器对象模型;
    DOM, Document Object Model, 文档对象模型.
    其实BOM包括DOM
  3. ECMAScript
    1)< script>标签的使用和三种输出
    < script>用于定义JS代码块, 可以出现在HTML的任意位置, type属性通常为”text/javascript”, src可以引入外部js文件. 三种输出:
    弹窗输出在这里插入图片描述
//弹窗输出,警告弹窗
    alert("hello world");
    //确认弹窗
    confirm('确认要执行吗?')
    //询问(提示)弹窗
    prompt('请输入所选角色昵称:','如:李白');

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
页面输出

//向页面直接输出信息
    document.write('<h1>你好,世界!</h1>');

在这里插入图片描述
控制台输出

//向控制台输出,通常用于调试代码
    console.log('这是一个控制台输出...');

在这里插入图片描述
在这里插入图片描述
4. JS中的变量和数据类型
JS是一种弱变量类型的语言, 声明变量时要通过var关键字进行. JS中, 变量分为局部变量和全局变量. 定义在函数内的变量就是局部变量, 函数外的变量就是全局变量.
4.1 变量
关键字var修饰变量
注:当未被var修饰的局部变量在经过使用一次后会变成全局变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function demo0() {
            c = 123; // 可以省略var, 但是该变量用完后就会变成全局变量
            console.log("c: " + c);
        }

        function demo1() {
            // 局部变量: 函数内定义的变量
            var a;
            a = 123;
            a = "张无忌";
            console.log(a);
            console.log("b=" + b);
        }

        function demo2() {
            console.log("c: " + c);
        }

        // 全局变量
        var b = "你好!";
    </script>
</head>
<body>
    <!--Emmet插件语法, 简化前端代码的开发, IDEA中默认集成-->
    <input type="button" value="demo0" onclick="demo0();">
    <input type="button" value="demo1" onclick="demo1();">
    <input type="button" value="demo2" onclick="demo2();">
</body>
</html>

4.2 数据类型
在这里插入图片描述
4.3JS中的类型自动转换
主要是了解其他类型和boolean类型的相互转换,if语句等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function demo() {
            var b = false;
            b = ""; // 空字符串-->false, 非空字符串-->true
            b = 0; // 0-->false, 非0-->true
            b = null; // null-->false
            b = undefined; // undefined-->false
            if(b) {
                console.log("ok");
            } else {
                console.log("no");
            }
            console.log(null == undefined); // true
            console.log(null === undefined); // false
        }
    </script>
</head>
<body>
    <button onclick="demo();">demo</button>
</body>
</html>

4.4 函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        // 在js中, 函数也是一个对象
        function demo1(a, b) {
            return a + b;
        }

        var sum = demo1(5, 2);
        console.log("sum: " + sum);

        // 可以变形为:
        var demo2 = function(a, b) {
            return a * b;
        };

        var result = demo2(5, 2);
        console.log("result: " + result);

        // 在js中, 函数也可以作为参数继续传递
        function demo3(a, b, c) {
            console.log(a(b, c));
        }

        demo3(demo2, 10, 2);
    </script>
</head>
<body>

</body>
</html>

4.5 数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        function demo1() {
            /**
             * js中数组的特点:
             *  类型不固定
             *  长度不固定
             *  提供了很多方法直接操作数据
             */
            var arr = new Array();
            arr[0] = 123;
            arr[1] = "hello";
            arr[2] = new Date();
            console.log(arr);
        }

        function demo2() {
            var arr = new Array(123, "hi", new Date());
            console.log(arr);
        }

        function demo3() {
            var arr = [456, "你好", new Date()];
            console.log(arr);
            console.log("数组的长度: " + arr.length);
            arr.length = 1;
            console.log(arr);
        }

        function demo4() {
            var arr1 = [123, 456, 789];
            var arr2 = ["abc", "def", "xyz"];
            // concat: 拼接数组
            var arr = arr1.concat(arr2);
            console.log(arr);
            // push: 数组的末尾添加元素
            var n = arr.push("张无忌");
            console.log(arr);
            console.log("数组的新长度: " + n);
            // pop: 取出数组末尾的元素
            var e = arr.pop();
            console.log(e);
            console.log(arr);
            // shift/unshift: 操作数组开头的元素
            // join: 使用指定的连接符拼接数组元素为字符串
            var str = arr.join("-");
            console.log(str);
            // sort: 排序
            var arr2 = [123, 2, 33, 13];
            console.log(arr2);
            arr2.sort(function(a, b) {
                return a - b;
            });
            console.log(arr2);
        }
        demo4();
    </script>
</head>
<body>

</body>
</html>
  1. BOM
    Browser Object Model, 浏览器对象模型. window对象在BOM中处于顶级地位, 通常把window.省略.
    5.1 window下常用的属性
    5.1.1 screen
    代表整个屏幕, 通常用于获取屏幕信息, 例如宽度, 高度
function demo1() {
    var screen = window.screen;
    console.log("宽度: " + screen.width);
    console.log("高度: " + screen
Jeremy_Yoyo
关注
专栏目录
前端转后端学习路线整理
Amy的博客
04-12 6202
文章目录背景流程梳理前端后端ORM 是干什么的？学习路线解释路线特别建议 背景 本人是一名 Web 前端开发，技术栈是 Vue 和 React，不会 Node。之前学过，但是因为一些原因（比如没有使用场景，很多概念无法理解，学完就忘等）一直也没有掌握。 因为在 CMS 部门耳濡目染时间久了，感觉不学点后端有点说不过去，而且学起来之后发现也挺有兴趣的。但是对于一名前端开发来说要学习的内容实在太多了，开始的困难在于理清各种技术都是干什么的以及它们之间的关系。现在刚刚有点眉目故记录一下，权当给需要的同学一些建议。
javascript前端DES加密，VB.NET、C#后端服务器解密
06-02
压缩包中的"环境说明.txt"可能是关于开发环境或运行环境的说明，"VB_DES"和"C_DES"可能是VB.NET和C#的DE解密示例代码，而"HTML代码"则可能包含了前端JavaScript进行DES加密的示例。在实际项目中，这些文件会提供详细...
JavaScript
qq_60225495的博客
12-07 1013
JavaScript 今日目标 掌握 JavaScript 的基础语法 掌握 JavaScript 的常用对象（Array、String） 能根据需求灵活运用定时器及通过 js 代码进行页面跳转 能通过DOM 对象对标签进行常规操作 掌握常用的事件 能独立完成表单校验案例 1，JavaScript简介 JavaScript 是一门跨平台、面向对象的脚本语言，而Java语言也是跨平台的、面向对象的语言，只不过Java是编译语言，是需要编译成字节码文件才能运行的；JavaScript是脚本语言，不需要编
3.后端学习JavaScript
stay hungry,stay foolish!
11-04 1220
JavaScript诞生于1995年，它的出现主要是用于处理网页中的前端验证。所谓的前端验证，就是指检查用户输入的内容是否符合一定的规则。比如：用户名的长度，密码的长度，邮箱的格式等。但是，有的同学可能会有疑问，这些验证，后端不也可以进行验证吗？确实，后端程序的确可以进行这些验证，但你要清楚，在1995年那个年代，网速是非常慢的，向后端发送一个请求，浏览器很久才能得到响应，那这无疑是一种非常不好的用户体验。
尚硅谷JavaWeb笔记——JavaScript（后端学习JavaScript，了解这些就够了）
weixin_43725818的博客
02-26 874
文章目录JavaScriptJavaScript中的变量变量的声明数组JavaScript中的运算逻辑运算关系运算JavaScript中的函数函数的声明有关注意事项JavaScript中的对象方法一： 使用new的方式定义对象方法二：使用大括号建立对象JavaScript中的事件注册onload事件注册onclick事件注册onblur事件注册oncharge事件注册onsubmit事件DOM模型document对象中对应的方法getelementById正则表达式getElementByNamegetEl
Java后端需要掌握的JavaScript（一）
qq_39594037的博客
07-18 1485
Java后端需要掌握的JavaScript（一） 1.Java和JavaScript的区别以及js的特点 JS是弱类型，Java是强类型 两者之间的区别用一句话可以说出来：就想周杰和周杰伦的区别一样；没有什么关系。 JS的特点： 交互性(可以做到信息的动态交互) 安全性(不允许直接访问本地磁盘) 跨平台性(浏览器支持js就行，与平台无关) 2.Js如何与Html结合 第一种方式 直接用<script></script>标签，可以放在head标签里面，也可以放在
课程设计JavaScript基于FastAPI的房屋租赁系统源码(含后端+前端)+项目说明+报告.zip
最新发布
11-14
课程设计JavaScript基于FastAPI的房屋租赁系统源码(含后端+前端)+项目说明+报告.zip课程设计JavaScript基于FastAPI的房屋租赁系统源码(含后端+前端)+项目说明+报告.zip 课程设计JavaScript基于FastAPI的房屋租赁系统...
城市地图带后端_前端后端.zip
09-02
本项目“城市地图带后端”旨在提供一个综合性的解决方案，将前端用户界面与后端数据处理系统相结合，为用户提供高效、直观且功能丰富的地图服务。以下是关于这个项目的关键知识点： 1. **前端技术栈**：前端是用户...
GoHost:Java后端javascript前端社交媒体网站
05-16
GoHost是一个专为学校项目设计的社交媒体平台，其技术栈主要由Java后端和JavaScript前端构成。这个项目展示了如何利用这两种技术构建一个功能完善的在线社区系统。下面将详细阐述GoHost在后端和前端实现中的关键知识...
JAVASCRIPT前端到后端
06-22
单页WEB应用 JAVASCRIPT从前端到后端 很好的网页编程
JAVA在服务器后端直接运行JavaScript方法
04-24
在服务器后端，直接运行JavaScript方法。 使用JAVA来运行已有的JavaScript方法，可以只运行一小段js代码，也可以运行一个js的方法，而你可以不用关心js内部的方法是怎么实现的，只是js是可以运行的，拿到java上也可以运行。 注意不能运行页面元素的相关属性级方法(window,page,document等)，如document.getElementByID()之类的方法都会报错的
（2）JavaScript——————后端开发需要掌握的JavaScript基础知识
qq_2533491534的博客
05-06 1650
1，设置背景 1.1， 设置背景颜色 1.2， 类选择器 1.3， ID选择器 1.4， 复合选择器 1.5， 群组选择器 2，选择器 2.1， 元素选择器 2.2， 类选择器 2.3， ID选择器 2.4， 复合选择器 2.5， 群组选择器 2.6， 通用选择器 2.7， 后代选择器 2.8， 属性选择器 2.9， 伪类和伪元素 2.10，选择器的优先级 3，盒子模型 3.1，内容区 ...
JavaScript后端人员快速入门
weixin_52234593的博客
01-30 353
var 变量名 = new Array(元素列表);//1,2,3 是存储在数组中的数据（元素）var 变量名 = [元素列表];//1,2,3 是存储在数组中的数据（元素）JavaScript 中的数组相当于 Java 中集合。数组的长度是可以变化的，而 JavaScript 是弱类型，所以可以存储任意类型的数据。var 对象名称 = {属性名称1:属性值1,属性名称2:属性值2,...,函数名称:function (形参列表){},...对象名.属性名对象名.函数名()
JavaScript学java后端也得学??
小白的程序猿
05-08 2248
大家都知道,现在虽然是前后端分离,但是前端工程师必须了解一些后端的知识,而后端开发的工程师也必学一些前端的知识,今天就和我一起来看看后端必学的一些前端知识,我是一个学习java后端的,最近会更新一系列java后端要学的前端的知识.
JavaScript后端极速入门
qq_53324833的博客
09-11 2470
JavaScript基础 概念：一门客户端脚本语言 运行在客户端浏览器中的，每一个浏览器都有JavaScript的解析引擎。 脚本语言：不需要编译，直接就可以被浏览器解析执行了 功能：可以用来增强用户和html页面的交互过程，可以用来控制html元素，让页面有一些动态的效果，增强用户的体验。 JavaScript发展史 1、1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单的校验，命名为：C- -，企图蹭C++热点。后来觉得不行，又改成了ScriptEase，蹭下面两家的热点。 2
JAVA后端需要会js吗_Java后端需要掌握的JS-------BOM
weixin_33648177的博客
02-27 1330
Java后端需要掌握的JS-------BOM1.什么是BOM​ 这个全称是Browser Object Model浏览器对象模型,将浏览器各个组成部分封装成对象2.BOM的五大对象先来看一张图： 五大基本的对象位置大概如上图，主要就是下面的五个：Window：窗口对象(重点)Navigator：浏览器对象Screen：显示器屏幕对象History：历史记录对象(重点)Location：地址栏对象...
(简略)后端需要掌握的JS知识01
qq_35479788的博客
06-18 981
js基础知识01
从后端到前端，JavaScript和Java有关系吗
热门推荐
北海糖的博客
05-26 1万+
你好，我是小塘老师，江湖人称北海小塘，记住，不是海王小塘，不要弄混了哦。 本系列文章将记录我工作之余，自学前端的成神之路，此时此刻是2021/5/26 20:25。 本文适合对IT领域感兴趣且有一定了解的同学阅读，本系列文章的初衷是为了加强自身对知识的吸收所写的 当然，也为了更好的帮助关注我的同学高效吸收，提高本文的可读性，小塘老师会采用清单式的排版风格，让大家阅读起来简约高效。 0.1 Java和Javascript完全不同，Javascript翻译过来为Java的脚本语言，但实际上它和Java是完全不一
后端学前端应该怎么学?
08-16
### 回答1： 后端开发人员学习前端开发有一些不同之处，因为前端开发更强调用户界面和体验。 如果你是后端开发人员想学习前端开发，你可以从以下几个方面入手： 1. 先了解前端开发的基本概念，比如 HTML、CSS 和 JavaScript。 2. 学习如何使用常见的前端框架，比如 React 或 Angular。 3. 了解如何使用常见的前端工具，比如 Webpack 或 Gulp。 4. 尝试使用前端库和插件，比如 jQuery 或 Bootstrap。 5. 通过实践来提升自己的能力，可以尝试写一些小型的前端项目来练习。 6. 可以加入一些前端开发社区，与其他开发人员交流学习经验。 希望这些建议能帮到你。 ### 回答2： 后端学前端需要从以下几个方面进行学习。 首先，需要了解前端开发的基本知识。学习HTML、CSS和JavaScript等前端基础知识是非常重要的。HTML负责网页的结构，CSS用来美化页面的样式，JavaScript则是实现前端交互和动态效果的核心技术。 其次，要学习一些常用的前端框架和库。像React、Vue和Angular等前端框架都是非常流行的前端开发工具，它们能够提高开发效率并优化用户体验。此外，还可以学习一些常用的前端库，如jQuery和Lodash等，它们能够简化前端开发中的一些常见操作。 再者，学习前端的工程化和构建工具。前端工程化是现代前端开发的重要部分，可以通过使用工程化工具（如Webpack和Gulp）来进行模块化开发、构建和打包项目。此外，还可以了解一些常用的版本控制工具，如Git，以便与团队成员协作开发。 最后，要进行实践和项目经验的积累。通过做一些前端的小项目或参与到实际的前端开发中，不断积累经验和解决实际问题，这样能够更好地巩固所学的知识，并且了解到前端开发中的一些实际应用场景和注意事项。 总结来说，后端学习前端需要具备一定的前端基础知识，并学习一些常用的前端框架、库、工程化和构建工具，并加以实践和项目经验的积累。不断学习和实践，可以使得后端开发人员成为一名全栈工程师，具备更多的技能和应对复杂项目的能力。 ### 回答3： 后端学前端需要掌握一些与后端开发相关的知识和技能，并了解前端开发的基本概念和技术。 第一步，需要了解前端的基础知识。可以开始学习HTML、CSS和JavaScript这三者的基本原理和语法，了解它们在前端开发中的应用。 第二步，学习前端框架和库。掌握一些流行的前端框架和库，如React、Vue等，它们能够提高前端开发效率和代码质量，同时深入理解它们的原理和使用方法。 第三步，学习前端与后端的交互。了解前端和后端之间的数据传输方法，学习如何使用Ajax、Fetch或者WebSocket等技术与后端进行交互。 第四步，学习前端性能优化和安全。了解前端性能优化的基本原则和技巧，学习如何提高前端应用的加载速度和响应时间。同时也要学习前端安全的基本知识，防止常见的安全漏洞和攻击方式。 第五步，实践项目和实际场景。通过做一些前端项目，可以加深对前端技术的理解和应用。参与到实际的项目中，与前端团队合作，从中学习到更多实际的经验和技能。 最重要的是要保持学习的热情和持续学习的态度。前端技术在不断发展，需要不断地学习和更新知识。坚持学习和实践，不断提高自己的前端开发能力。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值