首页 > 编程语言 >JavaWeb回顾与小结(一)

JavaWeb回顾与小结(一)

时间:2023-04-22 10:35:41浏览次数:36  
标签:JavaWeb 回顾 对象 标签 元素 js HTML 小结 属性

初识前端

网页有哪些部分组成

文字,图片,音频,视频,超链接

网页的本质

程序员写的HTML,CSS,JavaScript前端代码

前端代码如何转换成网页

通过浏览器解析和渲染成用户看到的网页

web标准

也称网页标准,由一系列的标准组成,大部分由W3C(World Wide Web Consortium,万维网联盟)复制制定

  • HTML:定义网页的结构(页面元素和内容)
  • CSS:定义网页的表现(页面元素的外观,位置等页面样式)
  • JavaScript:定义网页的行为(交互效果)

VS Code

尽量安装在没有中文,不带空格的目录下

HTML,CSS

HTML(HyperText Markup Language)超文本标记语言

超文本

超越了文本的限制,比普通文本更强大,除了文字信息还可以定义图片,音频,视频等内容

标记语言

由标签构成的语言,标签都是预定义的
HTML代码直接在浏览器中运行,HTML标签由浏览器解析

CSS(Cascading Style Sheet)层叠样式表,用于控制页面的样式(表现)

特点

  • HTML文件以,htm或.html为拓展名
  • HTML结构标签
    <HTML><head><title><body>
  • HTML标签不区分大小写
  • HTML标签属性值单双引号都可以
  • HTML语法松散

基础标签

  • <img>
  • src的绝对路径和相对路径
  • <h1>~<h6>
  • <hr>水平线标签

CSS引入方式

行内样式

写在标签的style属性中(不推荐)

内联样式

写在style标签中(可以在页面任何位置,一般约定在head标签中)

外联样式

写在一个单独的.css文件中(需要通过link标签在网页中引入)

颜色表示形式

关键字

预定义颜色名

rgb表示法

红绿蓝三原色,每项0-255

十六进制表示法

#开头,将数字转换成十六进制表示

CSS选择器

  • 元素选择器
  • id选择器
  • 类选择器

超链接

  • <a href="" target=""></a>
  • href:指定资源访问的url
  • target:指定在何处打开资源链接

其他

  • 视频标签<video>
  • 音频标签<audio>
  • 段落标签<p>
  • 文本加粗标签<b><strong>

盒子模型

  • 内容区content
  • 内边距padding
  • 边框border
  • 外边距margin

布局标签

<div><span>

表格

<table>

定义表格整体,可以包裹多个<tr>
  • border规定表格边框的宽度
  • width规定表格的宽度
  • cellspacing规定单元之间的间隙

<tr>

表格的行,可以包裹多个<td>

<td>

表格单元格(普通),可以包裹内容
如果是表头单元格,可以替换为<th>

表单

在网页中主要负责数据采集功能,使用

标签定义表单

表单项

不同类型的input元素,下拉列表,文本域

<input>定义表单项,通过type属性控制输入形式

text,password,radio,checkbox,file,date,datetime-local,time,hidden,button,submit

<select>定义下拉列表
<textarea>定义文本域

表单属性

action

规定当提交表单时向何处发送表单数据,url

method

规定用于发送表单数据的方式

  • get:浏览器会将数据直接拼接在表单的提交的url之后,有大小限制
  • post:浏览器会将数据放到http请求消息体中,大小无限制

JavaScript

什么是js

  • 是一门跨平台,面向对象的脚本语言,是用来控制网页行为的,它能使网页可交互
  • js和java完全不同,不论是概念还是设计,但基础语法类似
  • 1997年成为ECMA标准

引入方式

内部脚本

  • 将js代码定义在HTML页面中
  • js代码必须位于<script></script>标签之间
  • 在HTML文档中,可以在任意地方放置任意数量的<script>
  • 一般会把脚本置于元素的底部,可以改善显示速度

外部脚本

  • 将js代码定义在外部js文件中,然后引入到HTML页面中
  • 外部js文件中,只包含js代码,不包含<script>标签
  • <script>标签不能自闭合

基础语法

书写语法,输出语句

区分大小写,变量名,函数名及其他一切都区分
每行结尾的分号可有可无
注释
  • 单行---//
  • 多行---/* */
大括号表示代码块
输出
  • 使用window.alert()写入警告框
  • 使用document.write()写入HTML输出
  • 使用console.log()写入浏览器控制台

变量

用var关键字来声明变量

一门弱类型语言,变量可以存放不同类型的值
  • 组成字符可以是任何字母,数字,下划线或美元符号
  • 数字不能开头
  • 建议使用驼峰命名
ES6新增let定义变量,用法类似var,但声明的变量只能在代码块内有效,且不允许重复声明
ES6新增const声明只读的常量,一旦声明不可改变值

数据类型

原始类型
  • number数字
  • string字符串
  • boolean布尔
  • null对象为空
  • undefined当声明变量未初始化,默认undefined
引用类型

对象

typeof运算符可以获取数据类型

运算符

分类
  • 算术运算符
    + - * / % ++ --
  • 赋值运算符
    = += -= *= /= %=
  • 比较运算符
    > < >= <= != == ===
  • 逻辑运算符
    && || !
  • 三元运算符
    表达式?真:假
==比较值,会进行类型转换,===比较类型和值,不会进行类型转换
类型转换
其他类型转数字类型:

parseInt()将字符串字面值转为数字(一个字符一个字符的转,遇到无法转换就截止),如果第一字符就不是数字,则转为NaN

其他类型转布尔类型

0 NaN "" null undefined 均转为false,其他值均转为true

流程控制语句

  • if...else if...else...
  • switch
  • for
  • while
  • do...while

函数

介绍

函数(方法)是被设计为执行特定任务的代码块

定义

Js函数通过function关键字进行定义,语法为

function functionName(参数1,参数2...){
   //要执行的代码
}

定义方式二:匿名函数
定义方式三:es6提供的箭头函数,类似于java中的lambda表达式

注意

  • 形式参数不需要类型,因为js是弱类型语言
  • 返回值也不需要定义类型,可以在函数内部直接使用return返回即可

调用

函数名称(实际参数列表)

对象

Array

定义

let 变量名 = new Array(元素列表);
let 变量名 = [元素列表];

访问

arr[索引] = 值;

注意

js中的数组相当于Java中集合,数组的长度是可变的,而js是弱类型,所以可以存储任意的类型的数据

属性

length
设置或返回数组中元素的数量

数组的遍历
fori遍历
for(let i=0;i<数组.length;i++){

}
forof遍历
for(let 变量 of 数组){
//变量表示遍历的元素值
}
forEach遍历
arr.forEach((e,i)=>{
//e表示元素值,i表示索引
})

String

定义

let 变量名 = new String("...");
let 变量名 = "...";

属性

length
字符串长度

模板字符串中可以使用$(表达式)来引用变量的值,不需要拼接字符串

JSON

定义格式
let 对象名 = {
  属性名1:属性值1,
  属性名2:属性值2,
  属性名3:属性值3,
  函数名称:function(形参列表){},
  函数名称(形参列表){}
};
调用格式
对象名.属性名;
对象名.函数名();
介绍
  • JavaScript Object Notation,js对象标记法,本质是通过js对象标记法书写的文本
  • 使用场景:由于其语法简单,层次结构鲜明,现多用于作为数据载体,在网络中进行数据传输
JSON定义

let 变量名 = {"key":value,"key":value,"key":value,...};
let json = [value,value,value];

js对象转JSON字符串

let str = JSON.stringify(json);

JSON字符串转js对象

let json = JSON.parse(str);

BOM

概念

Browser Object Model浏览器对象模型,指的是js将浏览器的各个组成部分封装为对象,使用对象可以操作浏览器

组成
  • Window:浏览器窗口对象
  • Navigator:浏览器对象
  • Screen:屏幕对象
  • History:历史记录对象
  • Location:地址栏对象
  • location.href="url" 实现页面跳转

DOM

概念

Document Object Model,文档对象模型

将标记语言的各个组成部分封装为对应的对象
  • Document整个文档对象
  • Element元素对象
  • Attribute属性对象
  • Text文本对象
  • Comment注释对象
js通过DOM,就能对HTML进行操作
  • 改变html元素的内容
  • 改变html元素的属性
  • 改变html元素的样式(CSS)
  • 对html DOM事件做出反应
获取元素对象

方法
document.getElementById()

document.getElementsByTagName()

document.getElementsByName()

document.getElementsByClassName()

document.querySelector("css选择器")
根据css选择器获取一个Element对象
document.qureySelectorAll("css选择器")
根据css选择器获取一个Element对象数组

使用元素对象

常用操作
访问内容体
元素对象.innerHTML
访问输入框内容
元素对象.value
访问属性
元素对象.属性名
访问样式
元素对象.style.样式属性名

事件监听

html事件是发送在html元素上的事情,如按钮点击,按下键盘按键,鼠标移动到元素

事件监听:js可以在事件被侦测到时执行代码

事件绑定

方式一

通过html标签中的事件属性进行绑定

方式二

通过DOM元素属性绑定

常见事件

onclick
鼠标点击
onblur
元素失去焦点
nofocus
元素获得焦点
onload
某个页面或图像被完成加载
onsubmit
当表单提交时触发该事件
onkeydown
某个键盘的键被按下
onmouseover
鼠标被移到某元素之上
onmouseout
鼠标从某元素移开

Vue

一套前端框架,免除原生JS中的DOM操作,简化书写.基于MVVM思想实现双向数据绑定
框架:是一个半成品软件,是一套可重用的,通用的,软件基础代码模型.基于框架进行开发,更加快捷,更加高效

使用Vue的基本步骤

  • 新建html页面,引入Vue.js文件
  • 在JS代码区域,创建Vue核心对象,定义数据模型(变量)
  • 将视图(html标签)和数据模型(变量)进行绑定

常用指令

v-bind
为html标签绑定属性值,如设置href,css样式等
v-model
在表单元素上创建双向数据绑定
v-on
为html标签绑定事件
v-if v-else-if v-else
条件性渲染某元素,判定为true时渲染,否则不渲染
v-show
根据条件展示某元素,区别在于切换的是display属性的值
v-for
列表渲染,遍历容器的元素或者对象的属性

生命周期

指一个对象从创建到销毁的整个过程

八个阶段,没触发一个生命周期事件,会自动执行一个生命周期方法(钩子)

beforeCreate
创建前
created
创建后
beforeMount
挂载前
mounted
挂载完成
beforeUpdate
更新前
updated
更新后
beforeDestroy
销毁前
destroyed
销毁后

mounted()生命周期方法的应用场景

表示挂载完成,也就意味着html文档已经加载完成了,此时可以向服务器发送请求,获取数据

标签:JavaWeb,回顾,对象,标签,元素,js,HTML,小结,属性
From: https://www.cnblogs.com/kyrie-66/p/17342540.html

相关文章

  • 2021年终回顾 | 我的云原生拥抱之路
    2021即将结束,又到了一年一度的年终盘点时刻,今年该说点啥?回顾这一年,还是从盘点技术说起,聊一聊我的云原生拥抱之路,在云原生之路上我都从哪些方面入手,学到了什么。1、背景之前一直专注于微服务体系架构的研发工作,以Java语言作为我的第一程序语言,并伴随了我很多年。随着2020年8......
  • 每日小结
    昨天对servlet的问题搞不清楚今天还是在搞,也不知道是什么设备有问题,也不报错,就是不显示界面,在网上搜了不知道多久,愣是没有一个解释的和遇到的问题一样 ......
  • 老杜 JavaWeb 讲解(四) ——Servlet编写JDBC连接数据库
    老杜 JavaWeb 讲解对应视频:08-servlet中编写jdbc程序连接数据库(六)在Servlet(Java小程序)中编写JDBC连接数据库6.1JDBC介绍:JDBC的全称是Java数据库连接(JavaDatabaseconnect),它是一套用于执行SQL语句的JavaAPI。[1]JDBC(JavaDataBaseConnectivity)是Java编程语言中......
  • 12、freestyle风格的流水线作业回顾
    freestyle风格的流水线作业回顾回顾:流水线作业:FreestyleJob:Jenkins1.x,开放式UI,手动MavenJobPipelineJob:Jenkins2.x,开放式编码,定义流水线maven工程spring-boot-helloworld克隆、构建、......
  • 每日团队小结
    昨天对前端的显示做了一些调整,修改了一下显得更加美观今天还在修改servlet,现在还是不显示界面,就说部署的设备不足,现在一直在找是什么情况 ......
  • 47 直播回顾 | 林晓斌:我的 MySQL 心路历程【无音频】
    在专栏上线后的11月21日,我来到极客时间做了一场直播,主题就是“我的MySQL心路历程”。今天,我特意将这个直播的回顾文章,放在了专栏下面,希望你可以从我这些年和MySQL打交道的经历中,找到对你有所帮助的点。这里,我先和你说一下,在这个直播中,我主要分享的内容:我和MySQL打交道的经历;......
  • 回顾| 冰淇淋和你都是夏天味道,肯天Chem-Trend与你冰爽一“夏”
    冰淇淋和你都是夏天的味道,炎炎夏日少不了冰凉的西瓜爽口的饮料。最重要的是那甜甜的冰淇淋一起来回顾下在肯天Chem-Trend青浦工厂举办的冰淇淋派对吧。冰淇淋派对现场随处可见精心布置的小装饰,精致小巧的美味冰淇淋甜筒,香甜的水果和琳琅满目的零食,最重要的有肯天员工的欢声笑语。更......
  • 12-HTML基础回顾
    title:12-HTML基础回顾本文主要内容html的常见元素html元素的分类html元素的嵌套关系html元素的默认样式和CSSResethtml常见面试题html的常见元素html的常见元素主要分为两类:head区域的元素、body区域的元素。下面来分别介绍。1、head区域的......
  • 手把手逐步解析Javaweb登录实例
    一、编写前端界面<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</titl......
  • 每日团队小结
    昨天对opencv,ocr学习和使用了今天对程序的编写,servlet编写,以及对接口调用部署的浏览器找不到自己写的servlet ......