A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© 白家鑫 初级黑马   /  2019-8-20 14:33  /  1007 人查看  /  0 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

JAVAEE : java企业及应用  做网站为主

JavaWeb  使用JAVA语言开发基于互联网的项目

软件架构:
C / S  : Client /  server     客户端   |   服务器
在用户本地有一个客户端程序,在远程有一个服务端程序

优点:  用户体验好,
缺点:  开发,安装,部署,维护麻烦


B / S ;Browser / Server  游览器   |   服务器端
只需要一个游览器,用户通过不同的网址(URL),客户可以访问远程不同的服务器端程序

优点:开发,安装,部署,维护,简单(只需要在服务端去进行修改)
缺点:1. 如果应用过大,用户的体验会受到影响     2.对硬件要求过高,


资源分类:
B / S 架构如何进行访问

1.静态资源:
* 使用静态网页开发技术发布的资源。
* 特点:
所有用户访问得到的结果是一样的
文本,图片,HTML CSS  JAVAscript
如果用户请求的是静态资源,那么服务器会

2.动态资源:
* 使用动态网页技术发布的资源
* 特点
所有用户访问,得到的结果可能不一样
如: jsp / servlet , php ,asp,,,,
如果用户请求的是动态资源,那么服务器会执行动态资源,转换为静                态资源 发送给游览器

学习动态资源,必须先学习静态资源

静态资源(重点):
HTML   : 用于搭建基础网页,展示页面内容

CSS         : 用于美化页面,布局页面

Javascript        (JS)  : 控制页面的元素,让页面有一些动态的效果


HTML   : 最基础的网页开发语言
概念:
普通文本更加高级的全是由标签组成的语言

hyper text markup language  超文本 | 标记语言
超文本:
是用超链接方法,将不同空间的的文字信息组织在一起的网状文本
标记语言:

由标签构成的语言,<标签名称>
例:   <标签名  属性=”值“> 标签体 < /标签名>
标记语言不是编程语言


文档后缀名 :   . html     ///  . htm


围堵标签: 开始<html>   结束</html >
1.必须书写在html 文档上 或者htm
2.自闭和标签: 开始标签和结束标签在一起。如<br/ >
4.需要正确嵌套,不能你中有我,我中有你
4.在开始标签中可以定义属性,是由键值对构成,值需要用引号
5.html的标签不区分大小写,但是建议使用小写





文件标签: 构成html最基本的标签
html : html 文档的根标签
head :头标签,用于去指定html文档的一些属性。引入一些外部的资源
title: 定义标题的标签,
body: 体标签,在游览器中输出的内容
<doctype>: html5 中定义了该文档是html文档


1.文本(排版)标签: 和文本有关的标签
注释:<!-- -->
1.<h1>to <h6> 标题标签
2.<p>  段落标签
3.<br>: 换行
4.<hr> : 显示一条水平线
1.color: 颜色
2.width: 宽度
3.size: 高度
4.align:对齐方式
1.center :剧中
2.left:左对齐
3.right:右对齐
5.<b>:加粗
6.<i>:字体倾斜
7.<font>:字体标签
属性: color:颜色
size:大小
face 字体

属性定义
color
width 数值 width = “20” ,数值的单位,破人是 px(像素)                                              数值%
8.<center>:文本居中

图片标签:        
属性:
<img src="图片的路径" />
src:指定图片的位置
./ 代表当前目录
../代表上一级目录
(两文件如果平级,可直接写文件名)

列表标签:
有序列表:
type = “(显示的样子,A,1,I)” start =“从哪里开始”
ol:
li:

无序列表:
ul:
li:
链接标签:
a: 定义一个超链接
属性:
href:指定访问资源的URL,链接地址
target:

块标签:

div  每一个div占满一整行。 块级标签

span:文本信息在一行展示,行内标签,内联标签

语义化标签:html5中为了提高程序的可读性,提供了一些标签
header
footer

表格标签:
table:
border = 表格边框  
width:宽度
cellpadding  定义内容和单元格之间的距离
cellspacing 定义单元格之间的距离,如果指定为0则单元格的线会合为一条
bgcolor: 背景色
align: 对齐方式
height: 高度
tr : 定义行
bgcolor: 背景色
align: 对齐方式
rowspan = “”  跨行
td : 定义单元格
th : 定义表头单元格
caption:表格标题
thead:表示表格的头部分
tbody:表示表格的体部分
tfoot:表示表格的脚部分

表单标签

1.作用:
1.规定了用户可以操作的,用来给服务器传递数据的区域
2.其中可以包含input元素,比如文本字段、复选框、单选框、提交按钮等等。
3.表单和表单元素用于向服务器传输数据

2:格式
                <form action="路径" method="post">
方法体
                        <input type="submit"  value="提交"/>
                </form>

3.常用属性
action:规定当提交表单时向何处发送表单数据
method:规定用于发送表单数据的 HTTP 方法 分get和post ,默认是get
enctype:规定在发送表单数据之前如何对其进行编码

4:注意事项
1.GET方式和POST方式的区别
GET:
数据会显示到地址栏中.GET方式提交是有大小的限制.不同的浏览器支持的最大长度不一样

POST:
数据不会显示到地址栏中.POST方式提交的是没有大小限制.
2.表单元素标签必须放在表单form中才有效

5:补充
1:表单元素标签必须放在表单form中才有效
        2:所有的表单元素都有name属性,后台接收表单元素的值时,就是根据其name属性来接收的。
        3:所有的表单元素都有value属性:提交到后台的值
        4:单选按钮和复选按钮必须要有的属性:value属性;
        5:单选和复选按钮默认被选中的属性:checked属性

6.表单项(重点):

        1.文本框:        <input type="text" name="fname" value="asdf" size="20" />
                常用属性:
                name        :表单元素的名称.必须有name属性,然后后台才可以接收数据.
                value        :文本框的默认值.可以不写
                size        :文本框的长度.可以不写
                maxlength:文本框输入的最大长度.可以不写
                placeholder:文本框的提示信息,当文本框输入内容后自动消失

2.密码框:        <input type="password" name="psd"  value="123456"/>
                常用属性
                        name        :表单元素的名称.必须有name属性,然后后台才可以接收数据.
                        value        :默认值.可以不写
                        size        :长度.可以不写
                        maxlength:最大长度.可以不写
                       
        3.单选按钮:        <input type="radio" name="sex" value="男" checked>男
                常用属性
                        name        :表单元素的名称.必须有name属性,然后后台才可以接收数据.
                        value        :默认值
                        checked        :单选按钮默认被选中.
                注意事项
                        //如果想让一组单选按钮只能选中一个,则要求该组单选按钮必须拥有相同的name
                        <input type="radio" name="sex" value="男" checked>男
                        <input type="radio" name="sex" value="女">女                               
                       
        4.复选框:        <input type="checkbox" name="hobby" value="篮球" checked>篮球
                常用属性
                        name        :表单元素的名称.必须有name属性,然后后台才可以接收数据.
                        value        :默认值
                        checked        :复选框默认被选中
                注意事项
                        如果想让多个复选框为一组,则要求该组单选按钮必须拥有相同的name
                                <input type="checkbox" name="hobby" value="篮球" checked>篮球
                                <input type="checkbox" name="hobby" value="足球">足球
                                <input type="checkbox" name="hobby" value="排球">排球
                                               
        5.隐藏域:        <input type="hidden" name="capture" value="hidden"/>

        6.文件上传:        <input type="file" name="file" />

        7.提交按钮:        <input type="submit"  value="提交表单"/>

        8.普通按钮:        <input type="button" name="button" value="我是普通按钮"/>
       
        9.下拉列表select:       
                格式
                        <select name="from">
                                <option value="">---请选择---</option>
                                <option value="BEIJNG" >北京</option>
                                <option value="TIANJ" selected="selected">天津</option>
                        </select>

                注意事项
                        1.<select>标签的name属性:规定下拉列表的名称,必须要有,与表单输入元素一样,后台接收值需要根据该属性来接收;
                        2.<option>标签的value属性:表单提交时向后台传入的值;
                        3.下拉列表默认被选中的属性:option标签的selected属性;
                        4.实际开发中,下拉列表的<option>都是从后台查询出来然后循环出来的
                       
        10.文本域textarea:       
                格式
                        <textarea name="province" rows="3" cols="20">
                                //内容。
                        </textarea>
                注意事项
                        1.name属性必须要有,后台接收值根据该属性来接收;
                        2.开始标签和结束标签内的内容即为默认值



JavaScript 简称 JS

JS 是一种运动在游览器端的脚本语言
负责页面动态效果,简单来说,就是负责让页面动起来

JavaScript = ECMAScript  +   BOM  + DOM ; 组成
ECMAScript   :   js的基本语法
BOM  : 游览器对象模型(Browser object  model)包含了js中操作游览器的相关对象
DOM   :   文档对象模型(Document  object  model)包含了js中操作html页面的相关对象

JS的引入方式
内部JS
定义<script>,标签体内容就是JS代码
alfer (内容)
外部JS:
定义<script>,通过src属性引入外部的js文件,此时标签内不允许写任何代码
注意:
1.<script>可以定义在html页面的任何地方,但是定义的位置会影响执行顺序,一般建议定义在<head> 标签内部
                   2.<script>可以定义多个。
3.<script>在引入了外部的js文件后,其内部将不再允许书写js代码

JS的基本语法(与java不同之处):
定义变量:
var   a  = 值;
定义方法:
function  方法名(){         }
运算符:
== : “数值”是否相等
=== : “数值”和“类型”都完全相同才是ture
输出语句:
document.write("");

注意:
其他语法,和java语法几乎完全相同

5.类型转换
概述:
JS是弱类型语言,在处理数据时,对类型要求不严格,所以,就会产生一些数据类型上的自动转换
转换为number:
* string 转number :按照字面值转换,如果字面值不是数字,则转为NaN(不是数字的数字)
*  boolean转number:true转为1,false转为0
转换为boolean:
* number转boolean:0或NaN为假,其他为真
  * string转boolean:除了空字符串(""),其他都是true
  * null转boolean:        都是false
  * undefined转boolean:都是false
  * 对象:都为true
                       //一切有意义的都是true,无意义的都是false

JS的常见对象:
Array(数组)
创建数组:
var  a  = [元素列表];
常用属性:
length :数组的长度
常用方法:
join():把数组按照指定字符串拼接。
例如:
var  arr = [1,2,3,4];
arr.join = ("---");
arr = [1---2---3---4]
push(新元素):像数组的最后添加新元素

特点:
1.js中,数组元素的类型可变的;
2.js中,数组长度可变的;
Data(日期时间):
var date = new date();//获取当前时间
date。getTime () ;  // 获取当前时间的毫秒值,返回值时1970,1,1号

Math
Math.random() :  返回0~1之间的随机数,含0不含1
Math.ceil(x) :  对数进行上舍入
Math.floor (x):    对数进行下舍入
Math.round(x):    把数四舍五入为最接近的整数
Math.PI :     Π

正则表达式:
概念:
是一个包含了特殊规则的字符串,(本质上也是一个字符串,只不过该字符串中的字符包含了特定含义)
规则:
单个字符:[ ]
如:[ a ] [ b ]  [ a-zA-Z0-9]
量词符号:
?    //表示出现0次或1次
*        //表示出现0次或多次
+        //出现一次或多次
{m,n} // 表示最小m次,最多n次
*  m如果缺省 : { , n} 最多n次
*   n如果缺省 : {m ,} 最少m次

其他:
     ^ 开始
     $ 结束

8.JS中使用正则表达式
        1.创建正则表达式对象
                var reg = /正则表达式/;
        2.使用正则表达式
                reg.test(字符串); //验证指定的"字符串"是否符合"正则表达式的指定规则"
        3.常用规则:
                A. QQ正则
                                [1-9]\d{4,10}
                B. 手机号正则
                                [1][34578]\d{9}                       
                C. 邮箱正则
                                \w+@[a-zA-Z0-9]+\.[a-z]{2,3}

9.全局对象Global
        特点:
                该对象Global中封装的方法不需要对象, 可以直接调用。  
        常用方法:
                parseInt():将字符串转为数字
                        * 逐一判断每一个字符是否是数字,直到不是数字为止,将前边数字部分转为number
                isNaN():判断一个值是否是NaN
                        * NaN六亲不认,连自己都不认。NaN参与的==比较全部都是false
                eval():讲 JavaScript 字符串,并把它作为脚本代码来执行。
               
10.URL编码(了解)       
        概述:
                在Web开发中,浏览器的地址栏,不支持中文.
                为了解决这个问题, 我们在传递中文时,会把中文进行编码传输, 等对方接收后,对方解码, 这就是URL编码和解码.
        方法:
                encodeURI():url编码
                decodeURI():url解码
                encodeURIComponent():url编码,编码的字符更多
                decodeURIComponent():url解码


0 个回复

您需要登录后才可以回帖 登录 | 加入黑马