1. 编程号首页

内容串讲

编程小号 • • 未分类

内容串讲渡课Java103班内容串讲HTML什么是HTML理解HTML本质是超文本标记语言，能表现如文字、视频、音频、程序等复杂元素。什么是标签理解什么是标签，标签对的组成：标签名、属性（名值对）、内容属性类似是给这个标签的内容加了个装备，让这些标签具有一些特殊的能力例如：<ahref="www.baidu.com&amp

WEB内容串讲

HTML

什么是 HTML

理解HTML本质是超文本标记语言，能表现如文字、视频、音频、程序等复杂元素。

什么是标签

理解什么是标签，标签对的组成：标签名、属性（名值对）、内容

属性类似是给这个标签的内容加了个装备，让这些标签具有一些特殊的能力

例如：<a href="www.baidu.com">百度</a>

重要标签说明

  • 表格标签 table
    thead tr th
    tbody tr td

建议定义表格的时候，把 tbody,thead 都描述出来。

  • 表单标签 form
    action:submit 操作执行的请求地址
    method:指定请求的类型 get/post
  1. form 表单提交是不一定要通过 submit 操作的，可以通过 AJAX 请求序列化表单的方式完成表单数据的提交。（AJAX 序列化就是将 form 中的数据构建为明值对的字符串统一的提交到后台）
  2. 通过 form 表单提交和 AJAX 请求方式提交数据是两个原理完全不一样的设计方式。
  • 表单元素标签
    通过submit提交，浏览器会把表单元素的数据以名值对的方式提交给服务器。
    :type(text,password,radio,checkbox,hidden)

关于 select 如何在 JS 中获取选中的值和选中的文本内容，在提交数据的时候，默认只会将select中选中option的value值传递过去。
form 是个什么样的概念？在Web 编程中，可以把 form 理解为一个数据集合（组），我们把这一组数据包裹在 form 中，统一提交后台，进行业务逻辑的处理，在一个页面中可以有多个 form 存在。
但是在 AJAX 请求中，可以不要求有 form 存在。

标签的语义

H1/H2/H3 表现大纲级别
div/span/p 表现布局

使用带语义的标签可以让搜索引擎快速的进行收录
虽然不同的标签也许能够达到相同的显示效果，但是强烈建议使用语义化标签+CSS样式去控制

关于浏览器

浏览器就是能解析HTML、CSS、JavaScript、图片、音视频等内容的运行环境。
我们一般说的浏览器是指包括：IE/Firefox/Chrome/Opera等等，其中Firefox/Chrome我们称之为标准浏览器，最符合W3C组织定义的相关技术规范。

如果没有一个规范定义，为了迎合不同厂商的浏览器，程序员将为此付出沉重的代价。但是即便如此，不同的浏览器之间还是有些细微的差异的，这个一般是前段开发要注意的问题，要考虑浏览器的兼容性。
我们一般使用360、搜狗都是基于某个浏览器内核深度改造的。

CSS

层叠样式表：元素样式可以通过多种方式进叠加。

本身HTML 元素是不具备样式的，但是在不定义样式的情况下，不同的标签也能表现不同的显示样式，原因是浏览器对不同的标签是有个默认样式的。

如何书写定义元素样式

在开发过程中，一般都是通过外链的样式表去定义页面的样式，减低代码之间的耦合，让美工专业去做页面。
简单的理解就是，可以让不同的人不在同一个页面修改文件，自己关心自己的工作。

需要掌握的内容

  • DIV + CSS 布局基础，充分理解盒子模型
  • 样式选择器：ID(#) Class(.) 标签（A DIV SPAN）

JavaScript

  • 对于编程语言的认识：
    一门成熟的编程语言应该具备：变量、数据类型、运算符、控制语句（顺序结构、分支结构、循环结构）、自成体系的 API。
  • JavaScript 的作用
  1. 业务逻辑处理
  2. 对 DOM 进行操作（DOM : Document Object Model）:通过事件驱动页面模型发生变化（DOM 树中元素的增删改查，特别是改：改内容，改样式），JavaScript 能操作 DOM 的原因在于 JavaScript 实现了 DOM 相关操作的接口，能满足对 DOM 的操作。

需要掌握的内容

JavaScript 是弱类型语言，而且书写是比较随意的。

  • 弱语言体现在变量是没有准确的数据类型定义。通过 var 关键字定义。
    // 动态类型,随值的变化而变化
    var flag = 'abc';
    flag = 12;
    flag = true;
    flag = {name : 'Tom'};
    flag = function() {
    	alert("Hello,JavaScript");
    }
  • 关于 JavaScript 的判断条件
  1. 在条件表达式中，数字0和非0也可以表现为false和true
  2. 分支结构的三种表示方式
  3. 三目运算符是需要熟练掌握的，其本质就是个表达式
  4. 表达式是有有返回值（结果）的。
	var age = 20;
	var str = age >= 18 ? '成年' : '未成年';
	console.log(str);
  • 数据类型
    数据类型其本质就是在内存中存储的结构是不一样的，在使用者看来，对于不同的业务需求，可以选用不同的数据类型定义变量。
  1. 数值型（进度问题要注意，比如执行 0.1 + 0.2）
  2. 字符型（拼接使用 +）
  3. 布尔类型：0 和非 0 也能表现假和真
  4. 对象类型：要充分理解下面一段代码的意思
  5. 函数类型
    var obj = {
		name : 'Tom',
		age : 12,
		eat : function() {
			console.log('eat');
		}
	};
	console.log(typeof function() {});

	var login = function() {

		var tableinit = function() {
			console.log("tableinit");
		}

		return {
			init: function() {
				tableinit();
			}
		};
	}();

	login.init();
  • DOM 操作
  1. 通过选择器定位元素（知道有相关的方法找到元素）
  2. 对选择的元素进行处理

大部分的 DOM 处理时，围绕以下三种节点类型操作的

Element：各种HTML标签（比如:<body>,<h1>,<a>,<div>）;
Attibute：页面元素的属性（比如：id=”xxxx”,class=”xxx”,type=”text”）;
Text：标签之间或标签包含的文本；
  • DOM 的遍历
    在 DOM 元素上定义 ID 属性，通过 ID 选择器查找（虽然在网页中允许重复 ID 的出现，但是要避免这种现象的出现）
    ID 在定义的时候尽量要起的稍微复杂一点，满足一个标准的规范定义。
    在一个元素范围内容查找元素，使用 jQuery 的 find 方法。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<form id="form1">
			<input type="text" name="username" />
		</form>
		<form id="form2">
			<input type="text" name="username" />
		</form>
		<input type="button" value="click" onclick="show();" />
	</body>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script>
		function show() {
			var f1 = $("#form1").find("input[name='username']").val();
			var f2 = $("#form2").find("input[name='username']").val();
			console.log(f1));
			console.log(f2);
		}
	</script>
</html>

通过 Class 定位元素。

  • DOM 增加操作
    添加一个 Element 节点
    设置一个节点的样式属性
  • DOM 删除操作
    删除一个 Element 节点，包括通过获取到父节点，删除其子节点。

JavaScript中方法的调用是不受方法定义中参数的约束。

jQuery

核心方法

  • $():
    参数如果是字符串，此字符串代表选择器
    参数如果是js元素对象，将其转变为 jQuery 对象
    参数如果是一个方法，就是执行documentt.ready(),就绪化事件。
  • each(): 将 jQuery 选择的元素循环遍历。
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("li").each(function(){
      alert($(this).text())
    });
  });
});
</script>
</head>
<body>
<button>输出每个列表项的值</button>
<ul>
   <li>Coffee</li>
   <li>Milk</li>
   <li>Soda</li>
</ul>
</body>
</html>
  • 注册一个 jQuery Plugin,用于扩展方法
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			label {
				display: block;
				margin: .5em;
			}
		</style>
	</head>
	<body>
		<label><input type="checkbox" name="foo"> Foo</label>
		<label><input type="checkbox" name="bar"> Bar</label>
		<input id="button" type="button" value="选中" />
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script>
			$(function() {
				$.fn.extend({
					check: function() {
						return this.each(function() {
							this.checked = true;
						});
					},
					uncheck: function() {
						return this.each(function() {
							this.checked = false;
						});
					}
				});
				
				$("#button").click(function() {
					// 使用新创建的.check() 方法
					$("input[type='checkbox']").check();
				});
			})
		</script>
	</body>
</html>

jQuery 选择器

  • ID #
  • CLASS .
  • 标签 标签名
  • find(‘选择器’)在一定 DOM 范围中选择

属性方法

  • attr() : 设置 DOM 属性
$("#a1").attr("href","www.qq.com");
  • addClass():添加样式
  • html()
$("#adiv").html("<input type='button' value='btn' />"); // 添加一个按钮
$("#adiv").html(); // 取出adiv中的html代码，返回字符串
  • text():只是纯文本，不会解析为 html
  • val(): 取表单元素的值，比如input selcet…

样式处理

css(style,value### )

文档方法

append()
appendTo()
after()
before()
insertAfter()
insertBefore()
replaceWith()
replaceAll()
empty()
remove()
clone()

筛选方法

eq()
hasClass()
children()
find()
parent()

事件

ready()
on():绑定事件的函数
blur():失去焦点事件
click()
change():最多用于select元素

效果

show()
hide()
toggle()

AJAX

  • 理解同步和异步的概念
  • 理解回调函数的概念
	var t = 0;
	$.ajax({
		url: path + "/account/query",
		dataType: 'json',
		async: true,
		success: function(data) {
			console.log(data);
			t = 1;
			console.log("t in success =" + t);
		},
		error: function(error) {
			console.log(error);
		}
	});
	console.log("t outside =" + t);

SQL/MYSQL

在关系型数据库中，最重要的说就是表中字段的概念。

  • 字段
  1. 字段名
  2. 数据类型
  3. 长度
  4. 约束（非空、默认值、主键、外键、唯一性、自增）

所谓约束就是给数据加条件，让表中的数据更加严谨。

建表建字段的规范：因为数据库中不区分大小写的，所以一般多个单词之间使用“_”连接。

数据库设计的三大范式

上面对于数据库范式进行分解的过程中不难看出，应用的范式等级越高，则表越多。表多会带来很多问题：

  1. 查询时要连接多个表，增加了查询的复杂度
  2. 查询时需要连接多个表，降低了数据库查询性能

而现在的情况，磁盘空间成本基本可以忽略不计，所以数据冗余所造成的问题也并不是应用数据库范式的理由。

因此，并不是应用的范式越高越好，要看实际情况而定。第三范式已经很大程度上减少了数据冗余，并且减少了造成插入异常，更新异常，和删除异常了。大多数情况应用到第三范式已经足够，在一定情况下第二范式也是可以的。

数据库学习重点

  • 学会将业务模型转换成数据模型
    在实际应用开发中，数据模型的确认，其实就是业务逻辑的确认，系统的业务数据的完整度就满足要求了。
    在数据库模型设计可以分为：逻辑设计（表的结构基本确认，但是各个表的详细字段还需再确认，而且逻辑设计更多的是考虑业务数据的流转过程是否合理）、物理设计（最终确认的完整的数据结构）
  • 数据库查询
    关于数据库的增加操作、删除操作、修改操作都不是重点，因为语法相对简单，而且需求变化度太大。

在 update 和 delete 操作中，一定要注意是否要加入判断条件，否则会带来灾难性的问题。

在初级阶段，要了解的复杂查询：

  • 左关联（left join）
    例如：员工表 employee（id,name,department_id,job_id）/部门表department（id,name）/职位表Job（id,name）
SELECT FROM employee a 
LEFT JOIN department d on a.department_id=d.id
LEFT JOIN job j on a.job_id=j.id
  • 分组查询（group by having）
    了解聚合函数 avg(),max(),min(),count(),sum()…
    例如：查询班级小组的学员平均分、小组最高分、小组人数
    学员成绩表 student_score （id,groupname,name,course,score）
    1组 87 90 10
    2组 …
SELECT groupname,avg(score),max(score) FORM student_score 
where course='数学' group by groupname having avg(score)>80

首先将 where 条件的数据进行过滤
在对数据进行分组
分组完成再过滤having子句的条件
在查询的字段中，只能出现聚合函数和分组的条件字段

今天的文章内容串讲分享到此就结束了，感谢您的阅读。

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
如需转载请保留出处：https://bianchenghao.cn/7096.html

赞 (0)
编程小号编程小号
0

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注