JavaWeb-day13-Web概述、开发工具、UI

Web概述

软件架构：B/S、C/S

Java Web 相关技术：

项目体系结构

开发工具

1. HBuilder
2. EditPlus
3. Eclipse:安装版和解压版有什么区别：（安装版是控制面板卸载，写入注册表，解压版正好相反）
4. vscode
5. webstorm
6. …

UI

HTML

表格 < table > < /table > < tr> < td>
超链接 < a href ="" >< /a>
表单

1. < form action=“target.html” method=“post”> 用户名：… < /form>
2. < type=“radio”>:单选框
3. < type=“text”> 输入文本框
4. < type=“checkbox”> 多选
5. < type=“password”> 密码框
6. < submit>提交按钮

插入图片< img src="" />
列表

• 无序列表 < ul >< li>< /li>< /ul>
• 有序列表< ol>< li>< /li>< /ol> （type=“a” :以abcde为开头排序 type=“I” :以罗马数字开头排序）

标题 段落（一行只能有一个p标签内的东西）:< p>< h1> < span>:内元素一行可有多个span

CSS

css编写位置（总结：优先级：行内样式 > 内部样式 > 外部样式）

• 内部（行内样式1：style=“coloe:#541254” 注意：样式写进head标签里）
• 外部（写在css文件中，用link标签引入外部的css文件）
  选择器（总结：优先级：id选择器>类选择器>标签选择器）
• 元素选择器（标签）：p{}
• id选择器：#{} 、类选择器：.+类名
• 复合选择器

JavaScript

创建变量

var a = 20;
var b = 'abc';
var c = true;

函数

.声明函数使用function关键字，不需要指定返回值类型，形参也不需要指定类型

function sum(a,b) {
	return a+b;
}

.调用函数：不检查实参的类型，个数

var result = sum(5,10);
alert(result);

result = sum("Hello ","Tom");
alert(result);

函数可以作为对象

在JavaScript中，函数也作为一种数据类型存在，而且是引用数据类型，函数名就是指向其内存空间地址的引用

function sum(a,b) {
	return a+b;
}

alert(sum);

var ref01 = sum;
alert("ref01="+ref01);

var ref02 = sum;
alert("ref02="+ref01);

回调函数

回调函数：声明后，不由自己调用，而是交给系统或其他函数执行的函数

function callBack() {
	window.alert("I am call back!");
}

function call(fun) {
	fun();
}

window.callBack();

call(callBack);  // 打印两遍 I am call back！

this关键字

在JavaScript中，任何一个函数都是由对象调用的，在函数中可以通过this关键字引用调用这个函数的对象

var obj01 = {
	name : "obj01 name",
	getName : showName
};

var obj02 = {
	name : "obj02 name",
	getName : showName
};

function showName() {
	alert(this.name);
}
obj01.getName();  ------>obj01 name
obj02.getName();  ------>obj02 name

Object

在JavaScript中创建对象（两种方式）

//1.new Object()
var objByNew = new Object();
objByNew.userName = "Tom2014";
objByNew.password = "123456";

alert(objByNew.userName+" "+objByNew.password);

//2.JSON格式
//{属性名01:属性值01,属性名02:属性值02,...}
var objByJSON = {
		userName : "Jerry",
		password : "654321"
	};
alert(objByJSON.userName+" "+objByJSON.password);