浅谈JavaWeb之JavaScript

最新推荐文章于 2023-05-04 23:16:09 发布
最新推荐文章于 2023-05-04 23:16:09 发布
阅读量316 收藏
点赞数
分类专栏： Java 文章标签： js java
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45437546/article/details/104160729
版权

CSS和JavaScript

1. CSS
1.1 浮动float
文档流
	HTML文件加载顺序基本上是一个从左至右，从上至下来完成。如果一个元素使用了float浮动，会脱离文档流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01-float</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .tr {
            margin-top: 20px;
            height: 200px;
        }

        .li {
            width: 200px;
            height: 200px;

            float: left;
            margin-left: 20px;

            background-image: url("img/a.png");
            background-repeat: no-repeat;
        }

    </style>
</head>
<body>
<div class="tr">
    <div class="li" style="background-color: red"></div>
    <div class="li" style="background-color: navy"></div>
    <div class="li" style="background-color: fuchsia"></div>
    <div class="li" style="background-color: aqua"></div>
    <div class="li" style="background-color: lawngreen"></div>
</div>
<div class="tr">
    <div class="li" style="background-color: red"></div>
    <div class="li" style="background-color: navy"></div>
    <div class="li" style="background-color: fuchsia"></div>
    <div class="li" style="background-color: aqua"></div>
    <div class="li" style="background-color: lawngreen"></div>
</div>
</body>
</html>
1.2 定位
相对定位
	相对于当前所处元素以内
绝对定位
	已body整个HTML页面为参照物
	脱离文档流

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02-相对定位</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #id1 {
            width: 500px;
            height: 500px;

            background-color: navy;
        }

        #id2 {
            width: 200px;
            height: 200px;

            background-color: greenyellow;
            /* 相对定位 */
            position: relative;
            top: 150px;
            left: 150px;
        }

    </style>
</head>
<body>
<div style="width: 200px; height: 200px; background-color: yellowgreen"></div>
<div id="id1">
    <div id="id2"></div>
</div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03-绝对定位</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        #id1 {
            width: 500px;
            height: 500px;

            background-color: navy;
        }

        #id2 {
            width: 200px;
            height: 200px;

            background-color: greenyellow;
            /* 绝对定位 */
            position: absolute;
            top: 150px;
            left: 150px;
        }
    </style>
</head>
<body>
<div style="width: 200px; height: 200px; background-color: yellowgreen"></div>
<div id="id1">
    <div id="id2"></div>
</div>
</body>
</html>
1.3 横向列表
ul ol 无序列表，有序列表都是一个默认纵向的列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04-横向列表</title>
    <style>
        li {
            padding-right: 10px;
        }

        .left-li {
            float: left;
        }

        .right-li {
            float: right;
        }

        .left-font {
            font-size: 26px;
            color: red;
            font-weight: bold;
            text-decoration: none;
        }

        .right-font {
            font-size: 26px;
            color: blue;
            font-weight: bold;
            text-decoration: none;
        }
    </style>
</head>
<body>
<ul type="none">
    <li class="left-li left-font">怦然心动</li>
    <li class="left-li left-font">当幸福来敲门</li>
    <li class="left-li left-font">勇敢的心</li>
    <li class="left-li left-font">罗密欧与朱丽叶</li>
    <li class="left-li left-font">肖申克的救赎</li>
</ul>

<ul type="none">
    <li class="right-li right-font">猫鼠游戏</li>
    <li class="right-li right-font">v字仇杀队</li>
    <li class="right-li right-font">我是山姆</li>
    <li class="right-li right-font">被嫌弃的松子的一生</li>
    <li class="right-li right-font">偷自行车的人</li>
</ul>
</body>
</html>
2. JavaScript
2.1 JavaScript介绍
一般来说，完整的JavaScript包括以下几个部分：
    ECMAScript，描述了该语言的语法和基本对象
    文档对象模型（DOM），描述处理网页内容的方法和接口
    浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口

JavaScript的基本特点如下：
    是一种解释性脚本语言（代码不进行预编译）。
    主要用来向HTML页面添加交互行为。
    可以直接嵌入HTML页面，但写成单独的js文件有利于结构和行为的分离。

JavaScript常用来完成以下任务：
    嵌入动态文本于HTML页面
    对浏览器事件作出响应
    读写HTML元素
    在数据被提交到服务器之前验证数据
    检测访客的浏览器信息
    控制cookies，包括创建和修改等
2.2 JavaScript HelloWorld
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05-第一个JS程序</title>
    <!-- script标签是告知浏览器，这里是JavaScript代码 -->
    <script>
        var a = 10;
        // 在页面控制台展示变量a
        console.log(a);
    </script>
    <!-- 通过Script标签引入外部的JS代码 -->
    <script type="text/javascript" src="js/05-js.js"></script>
</head>
<body>
<!-- 在HTML标签内使用一些[事件属性]，=之后是JavaScript代码 -->
<button onclick="alert('一日之计在于晨，一年之计在于春')">大吉大利，今晚吃鸡</button>
</body>
</html>
2.3 JavaScript变量
Bootstrap中文网
www.bootcss.com 官网
https://v3.bootcss.com/ boostrap3中文文档
浅汐yt
关注
专栏目录
JavaWeb——JavaScript
qq_45821255的博客
06-25 5293
本文介绍了前端相关的基础知识，适合主要学习后端而想快速把前端知识过一遍。
JavaWeb应用开发架构浅谈
瀞心：软件人生
07-25 2529
Javaweb 应用架构
JavaWeb和JavaScript的学习
wjl2330941488的博客
09-09 7721
可以使用Function类构造函数形式为new Function（）//使用Function类构造函数maxA;用来计算不定数量的数的最大值 let max;可以使用function关键字构造函数:function 函数名 (参数列表){函数体;}可以声明箭头函数";} //可以写为： hello =() => {";} let 函数名 = （参数列表） => 函数体;
JavaWeb—JavaScript
weixin_61843013的博客
06-25 9269
JavaScript的使用
java web 和javascript_JavaWeb之JavaScript一
weixin_33976326的博客
02-16 1456
作者：刘婧怡时间：2019.03.07主机环境：MacBookProJavaScript1. JavaScript的简介基本概念：是基于对象和事件驱动的语言，主要应用于客户端** 基于对象：提供了许多对象，可以直接使用** 事件驱动：html做的网站是静态效果，JavaScript可以实现动态效果** 客户端：专指浏览器特点：** 交互性：信息的动态交互** 安全性：js不能访问本地磁盘的文件**...
JavaWeb快速入门 Web环境搭建
m0_60786924的博客
03-22 1135
目录 一、思维导图 简单认识Web服务 ： 二、认识JavaWeb 1.JavaWeb概述： （1）编写的程序可以通过浏览器进行访问，就可以称为web程序。（2）web应用程序都是基于请求和响应来实现 （3）web程序的工作模式。 2.web资源的分类 3.JavaWeb拓展面 ： 4.网络编程概念（深入了解网址......
浅谈前后端分离架构
IT-精英联盟
08-24 1088
前后端分离已成为互联网项目开发的业界标准使用方式，通过nginx+tomcat的方式（也可以中间加一个nodejs）有效的进行解耦，并且前后端分离会为以后的大型分布式架构、弹性计算架构、微服务架构、多端化服务（多种客户端，例如：浏览器，车载终端，安卓，IOS等等）打下坚实的基础。这个步骤是系统架构从猿进化成人的必经之路。 核心思想是前端html页面通过ajax调用后端的restuful api接口并使用json数据进行交互。 名词解释： 在互联网架构中， web服务器：一般指像nginx，apache这类的
基于Java Web的在线考试系统的实现
最新发布
QQ_1329053518的博客
05-04 3017
摘 要 随着互联网的发展，教育的方式逐渐步入信息化、智能化，网络教育逐渐成为教育未来发展的重要趋势，在线考试系统成为教育成果考察的主流方向。在线考试充分利用现代信息化技术的优势，使考试更方便、更高效。 根据中国现阶段网络的发展状况，设计一个基于Java Web的在线考试管理系统，系统面使用B/S架构设计开发，视图层面使用Vue架构技术，服务端使用SSMP架构搭建设计，数据管理技术方面则使用MySQL数据库系统进行设计，该软件系统将部署于Tomcat服务器中，以保障在线考试体系的正常工作。 该系统利
（附源码）ssm基于Java web 的人人影视网站管理系统 毕业设计290915
Weixin_CXSJ881的博客
02-20 1128
系统采用了B/S结构，将所有业务模块采用以浏览器交互的模式，选择MySQL作为系统的数据库，开发工具选择My eclipse来进行系统的设计。基本实现了影视网站管理系统应有的主要功能模块，本系统有管理员、学生两大功能模块，管理员：首页、站点管理（轮播图、公告栏）用户管理（管理员、注册用户）内容管理（论坛列表、论坛分类列表、电影资讯、资讯分类）更多管理（电影分类、电影信息、电影推荐、猜你喜欢、历史观看记录、电影统计）等操作。
Java、Javascript、Javaweb三者的区别
热门推荐
MAC--芳
07-10 5万+
首先，我们来说一下java 与 javaweb之间的关系 ： 我们平常说的Java一般指Java SE，也就是Java Standard Edition，Java的标准版，一般用来开发桌面应用程序，但是在开发桌面应用程序上相对VB，Delphi，VC++并没有什么优势。 JavaWeb则到了Java EE领域了，也就是Java Enterprise Edition，Java的企业版，看那
javaweb-javascript
JQ210245253的博客
04-02 370
1.定义： JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言， 内置支持类型。它的解释器被称为JavaScript引擎，为浏览器的一部分，广泛用于客户端的脚本语言 2.组成部分：（W3C文档中可查找） ECMAScript:js基础语法(规定 关键字 运算符 语句 函数等等...) BOM:浏览器对象模型 ...
Javaweb基础-JavaScript
weixin_46899412的博客
12-29 986
JavaScript
JavaScript (Java Web 学习笔记)
ccboy001的博客
06-16 1682
JavaScript1、JavaScript 介绍2、JavaScript 和 html 代码的结合方式3、变量4 、关系（比较）运算5、 逻辑运算6、数组（*****重点）7、函数(*****重点)8、JS 中的自定义对象（扩展内容）9、js 中的事件 1、JavaScript 介绍 Javascript 语言诞生主要是完成页面的数据验证。因此它运行在客户端，需要运行浏览器来解析执行 JavaScript 代码。 JS 是 Netscape 网景公司的产品，最早取名为 LiveScript;为了吸引更多
JavaWeb--JavaScript
Eumenides_Suki的博客
02-23 5685
目标JavaScript 是一门跨平台、面向对象的脚本语言，而Java语言也是跨平台的、面向对象的语言，只不过Java是编译语言，是需要编译成字节码文件才能运行的；JavaScript是脚本语言，不需要编译，由浏览器直接解析并执行。JavaScript 是用来控制网页行为的，它能使网页可交互；那么它可以做什么呢？如改变页面内容、修改指定元素的属性值、对表单进行校验等，下面是这些功能的效果展示：改变页面内容当我点击上面左图的 按钮，按钮上面的文本就改为上面右图内容，这就是js 改变页面内容的功能。修改指定元
JavaWeb——JavaScript基础知识
ZhangJiawen的博客
12-09 342
一、JavaScript简述 HTML：用来写网页； CSS：美化页面； JavaScript：控制页面特效； JavaScript：脚本语言；要嵌入到其他语言，结合使用；直接被浏览器解析执行；没有访问系统文件权限（安全）；无需编译，直接由上到下解释执行； Java：编程语言；独立运行；先编译再执行； Java 和 JavaScript 没有任何直接关系； 二、JavaScript组成 ECMAScript：（核心）规定了 JS 的语法和基本对象； DOM：文档对象模型：处理网页内容的方法和接口；
JavaWeb之JavaScript
qq_46130027的博客
12-17 2703
!// 定义一个空数组 // alert(arr.length);// 0 // javaScript语言中的数组，只要我们通过数组下标赋值，那么最大的下标值，就会自动的给数组做扩容操作。// undefined // 数组的遍历 for(var i = 0;i ++) {
BOM浏览器对象模型
qq_54054566的博客
03-16 222
BOM浏览器对象模型 包含和浏览器相关内容 window对象: 该对象的属性和方法称为全局属性和全局方法, 访问时可以省略掉window. window对象中常见的方法 alert(“xxx”) 弹出提示框 confirm(“xxxx”) 弹出确认框 prompt(“xxx”) 弹出文本框 parseInt() 将字符串或小数转成整数 parseFloat() 将字符串转成整数或小数 isNaN() 判断变量是否是NaN console.log() 浏览器控制台输出 let timer
JavaWeb视频教程之JavaScript核心详解
在JavaScript编程中，作用域是核心概念之一。它定义了变量和函数的可访问性。局部作用域和全局作用域是两个基本类型，理解它们对于编写高效的JavaScript代码至关重要。闭包是JavaScript的一个高级特性，允许函数访问...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值