Javaweb学习笔记——（二）——————CSS概述，进入JavaScript

day02

day01内容回顾
1.html操作思想
**使用标签把要操作的数据包起来，通过修改标签的属性值来是实现标签内数据样式的变化
***<font size="5"></font>
2.图像标签
<img src="图片的路径"/>
**通过html访问本地图片，使用绝对路径，目前有问题。

3.超链接标签
<a href="" target="_blank" ></a>
4.表格标签
**技巧：数里面有多少行，每行里面有多少个单元格
**<table></table>
<tr> <td> <th>

5.表单标签
**<form></form>
-aciton method enctype
-method:get post

**输入项
***有name属性
*普通输入项：type="text"
*密码：password
*单选：radio
-name值相同
-value值
*复选框：checkbox
-name值相同
-value值
*下拉框 select option
*文本域：textarea
*隐藏项：type="hidden"
*文件：type="file"

*提交按钮：type="submit"
*重置按钮：reset
*使用图片提交：<input type="image" src=""/>
*普通按钮：type="button"

6.div和span
*div：自动换行
*span：在一行显示

CSS
1.css的简介
*css：（Cascading Style Sheets）层叠样式表
**层叠：一层一层

**样式表：很多的属性和属性值
*是页面显示效果更加好
*css将网页内容和显示样式进行分离，提高了显示功能。

2.css和html的结合方式（四种结合方式）
（1）在每个html标签上面都有一个属性 style，吧css和html结合在一起
-<div style="background-color: red; color: green">属性样式</div>

（2）使用html的一个标签实现<style type="text/css"></style>标签实现，写在head里面
*格式：<style type="text/css">
css代码; 
</style>

*代码：<style type="text/css">
div {
background-color: blue;
color: red;
}
</style>

（3）在style标签里面 使用语句
@import url(css文件的路径);

-第一步，创建一个css文件

<style type="text/css">
@import url(div.css);
</style>

（4）使用头标签，引入外部css文件
-第一步，创建一个css文件
-<link rel="stylesheet" type="text/css" href="css文件的路径"/>

***第三种结合方式，缺点：在某些浏览器下不起作用，一般使用第四种方式

***优先级
由上到下，由外到内。优先级由低到高。
***后加载的优先级高的

***格式 选择器名称{ 属性名:属性值; 属性名:属性值;...}

3.css的基本选择器
**要对哪个标签里面的数据进行操作

（1）标签选择器
*使用标签名作为选择器的名称
div {
background-color:gray;
color:white;
}
（2）class选择器
*每个html标签都有一个属性 class
-<div class="haha">aaaaaaaa</div>
-.haha{
background-color:orange;
}

（3）id选择器
*每个html标签上面有一个属性id
-<div id="hehe">bbbbbbbb</div>
-#hehe{
background-color:#333300;
}

**选择器的优先级
style > id选择器 > class选择器 > 标签选择器

4.css的扩展选择器
（1）关联选择器
*<div><p>wwwwwwwwwww</p></div>
*设置div标签里面的p标签的样式，嵌套标签里面的样式
* div p {
background-color:green;
}
（2）组合选择器
*<div>11111</div>
<p>2222222</p>
*吧div和p标签设置成相同的样式，吧不同的标签设置成相同的样式
* div,p {
background-color:green;
}

（3）伪元素选择器（了解）
*css里面提供了一些定义好的样式，可以拿过来使用
*比如超链接
**超链接的状态
原始状态 鼠标放上去的状态 点击的状态 点击之后的状态
：link     ：hover      ：active    ：visited

**记忆的方法
lv ha

5.css的盒子模型
**在进行布局前需要把数据封装到一块一块的区域内（div）
（1）边框
border
border：统一设置
上：border-top
下：border-bottom
左：border-left
右：border-right
（2）内边距：
padding：统一设置
上下左右：
上：padding-top
下：padding-bottom
左：padding-left
右：padding-right
（3）外边距
margin：统一设置
上下左右：
上：margin-top
下：margin-bottom
左：margin-left
右：margin-right

6.css的布局的漂浮
float:
**属性值
left：文本流向对象的右边
right：文本流向对象的左边

7.css的布局的定位
position:
**属性值：
-absolute：
***将对象从文档流中拖出
***可以使用top、bottom等属性进行绝对定位
-relative
***不会把对象从文档流中拖出
***可以使用top，bottom等属性进行定位

8.案例，图文混排案例
**图片和文字一起显示
<div style="width: 100px; height: 80px">
<div style="position: relative;float: left;">
<img src="a.jpg" style="width: 50px;height: 50px">
</div>
<div>
将对象从文档流中拖出,可以使用top、bottom等属性进行绝对定位
</div>
</div>

9.案例 图像签名：
**在图片上面显示文字
<div>
<div>
<img src="a.jpg">
</div>
<div style="position: absolute; top: 10px; left: 20px; color: red">
这是一张图片
</div>
</div>

10.上午内容总结
1.css和html的四种结合方式（********）

2.css的基本选择器（*******）
*标签选择器 使用标签名
*class选择器 .名称
*id选择器 #名称

3.css的扩展选择器（了解）
*关联选择器
-设置嵌套标签的样式 div p {}
*组合选择器
-不同的标签具有相同的样式 div,p {}
*伪元素选择器
*超链接的状态
-原始：link
-悬停：hover
-点击：active
-点击之后：visited

4.盒子模型（了解）
*边框 border：2px solid red;
上下左右 border-top border-bottom border-left border-right

*内边距 padding：20px
上下左右 

*内边距
上下左右

*对数据进行操作，需要把数据放在一个区域里面(div)

5.布局的漂浮（了解）
float
-left：后面的div到右边
-right：后面的div到左边

6.布局的定位
position 
-absolute:
***将对象从文档流中拖出
***可以使用top，bottom等属性进行绝对定位
relative
***不会把对象从文档流中拖出
***可以使用top，bottom等属性进行定位

1.JavaScript的简介
  *是基于对象和事件驱动的语言，应用于客户端。
-基于对象：
**提供好了对象，可以直接拿过来使用
-事件驱动：
**html做网站静态效果，javascript动态效果

-客户端：专门指的是浏览器

  *js的特点
  （1）交互性
  -信息的动态交互
  （2）安全性
  -js不能访问本地磁盘的文件
  （3）跨平台性
  -java里面的跨平台性-虚拟机
  -只要能够支持js的浏览器，都能运行

  *JavaScript和java的区别（雷锋和雷峰塔：毫无关系）
  (1)Java是sun公司，现在的oracle公司；js是网景公司
  (2)JavaScript 是基于对象的，java是面向对象的
  (3)java是强类型的语言，js是弱类型的语言
  -比如java里面的int i = 10;
  -js: var i = 10; var m = "10";
  (4)JavaScript只需要解析就可以执行，而java需要先编译成字节码文件，在执行。

  *JavaScript的组成（以下称js）
  三部分组成
  （1）ECMScript
  -ECMA：欧洲计算机协会
  -有ECMA组织制定的js的语法，语句......
 
  （2）BOM
  -broswer object model：浏览对象模型

  （3）DOM
  -document object model：文档对象模型

2.js和html的结合方式（两种）
（第一种）：
-使用一个标签<script type="text/javascript">  js代码 </script>

（第二种）：
-使用script标签，引入一个外部的js文件
***创建一个js文件，写js代码
-<script type="text/javascript" src="1.js"/>

**使用第二种方式的时候，就不要再script标签中写js代码了，因为不会执行

3.js的原始类型和声明变量
**java的基本数据类型 byte short int long float double char boolean

**定义变量 都使用关键字 var
**js的原始类型（五个）
-string：字符串
*** var str = "abc";

-number：数字类型
*** var m = 123;

-boolean：true和false
*** var flag = false;

-null
*** var date = new Date();
*** 获取对象的引用，null表示对象引用为空，所有的对象的引用也是Object

-undifined 
***定义一个变量，没有赋值
*** var aa;

** typeof(); 通过这个方法来查看当前变量的数据类型

4.js的语句
-java里面的语句：
**if判断：
**switch语句：
**循环 for while do...while

-js里面的这些语句
**if判断语句
**switch语句
-java里面支持数据类型 string支持吗？ 支持
-js里面都支持
- var b = 6;
switch(b){
case 3:
alert("3");
break;
case 6:
alert("6");
break;
default:
alert("other");
}
**循环语句 for while do-while
-while循环
**** var i = 5;
while(i < 9){
alert(i);
i++;
}
-for循环
*** for(var i=0; i < 5; i++){
alert(i);
}
** i++ ++i 和java里面一样

5.js的运算符
** +=  ： x+=y;  ====>  x=x+y;

**js里面不区分整数和小数
var j = 123;
alert(j/1000*1000);     //在java里面得到的结果是0
//在js里面的结果是123 123/1000 = 0.123 * 1000 = 123

**字符串的相加和相减的操作
var str = "123";

**如果相加的时候，做的字符串连接
**如果相减，做的是相减的运算
alert(str+1);  //1231
alert(str-1); //122
alert(1+str); //1123
alert(1-str); //-122

*提示NaN：表示不是一个数字

**boolean类型也可以进相加相减操作
var flag = true;  //true表示为1
alert(flag+1);    //2

var flag2 = false; //false表示0
alert(flag2+1) //1

** == 和 === 区别
**做判断

** == 比较的只有值
** === 比较的是值和数据类型

** 引入知识
直接向页面输出的语句（可以吧内容显示在页面上）
* document.write("aaa");
document.write("<hr/>");
** 可以向页面输出变量，固定值和html代码

6.实现99乘法表（输出在页面上）
- document.write("<table border='1' bordercolor='red'>");
for (var i = 1; i <= 9; i++) {
document.write("<tr>");
for (var j = 1; j <= i; j++) {
document.write("<td>");

document.write(j+" * "+i+" = "+(i*j));
document.write("</td>");
}
document.write("</tr>");
}
document.write("</table>");

-document.write()里面是双引号，如果设置标签的属性需要使用单引号
-document.write()可以输出变量，还可以输出html代码

7.js的数组
*什么是数组
-使用变量，var m = 10;
-java里面的数组定义 int[] arr={1, 2, 3};

*定义方式（三种）
第一种：var arr = [1,2,3]; var arr = [1, "4", true];
第二种：var arr1 = new Array(5); //定义一个数组，数组的长度是5
arr1[0] = "1";

第三种：使用内置对象Array
var arr2 = new Array(6, 5, 7); //定义一个数组，数组里面的元素是6,5,7

*数组里面有一个属性：length：获取到数组的长度

*数组可以存放不同的数据类型的数据

8.js的函数
**在java里面定义方法
public返回类型void /int 方法名(参数列表){
方法体;
返回值;
}

public int add(int a, int b){
int sum = a + b;
return sum;
}

**在js里面定义函数（方法）有三种方式
***函数参数列表里面，不需要写var，直接写参数
第一种方式：
***使用到一个关键字 function
***function 方法名 (参数列表){
方法体;
返回值可有可无("qqqqq");
}

//调用方法
//test();

//定义一个有参数的方法 实现两个数的相加
function add1(a, b){
var sum = a + b;
alert(sum);
}

//add1(2, 3);

//有返回值的效果
function add2(a, b, c){
var sum1 = a+b+c;
return sum1;
}
alert(add2(3,5,6));

第二种方式：
***匿名函数
var add = function(参数列表){
方法体和返回值;
}

***代码
//第二种方式创建函数
var add3 = function(m, n){
alert(m+n);
}

//调用方法
add3(5, 6);

第三种方式：（用的少，了解）
*** 使用到js里面的内置对象 Function
var add = new Funciton("参数列表","方法体和返回值");

9.js的全局变量和局部变量
**全局变量：在script标签里面定义一个变量，这个变量在页面中js部分都可以使用
-在方法外部使用，
**局部变量：在方法内部定义一个变量，只能在方法内部使用
-如果在方法外部调用这个变量，提示出错
-SCRIPT5009:"nn"未定义
12.js的局部变量.html (17,3)

**ie自带了一个调试工具，ie8及其以上的版本中，键盘上F12，在页面下方出现一个条

10.script标签
*建议把script标签放在</body>后面
*如果现在有这样的一个需求
在js里面需要获取input里面的值，如果把script标签放在head里面会出现问题。
html解析是从上到下解析，script标签放到的是head里面，直接在里面去input里面的值，因为页面还没有解析到input那一行，肯定取不到。

11.js的重载
*什么是重载？方法名相同，参数列表不同
-Java里面有重载。
*js里面是否有重载？

12.今天内容的总结
  *css 
  **css和html的四种结合方式

  **css的基本选择器
  *标签选择器 div {css代码}
  *class选择器 .名称{}
  *id选择器 #名称{}
  **css的扩展选择器
  *关联选择器
  ***嵌套标签的样式的设置
  *组合选择器
  ***不同标签设置相同的样式
  *伪元素选择器
  ***a标签的状态
  lv ha
  **盒子模型
  *边框 border
  上下左右
  *内边距 padding
  上下左右
  *外边距 margin
  上下左右
  **漂浮
  float：left right

  **定位
  position：absolute relative

  *JavaScript(*************)
  **什么是JavaScript
  -基于对象和事件驱动的语言，应用于客户端
  -特点：
  交互性 安全性 跨平台性
  -JavaScript和java区别

  -组成（3部分）
  *ECMAScript
  *BOM
  *DOM
  **js和html的结合方式（两种）
  第一种 <script type="text/javascript">js代码;</script>
  第二种 <script type="text/javascript" src="js的路径"></script>

  **js的数据类型
  *五种原始类型
  string number boolean null undifined
  *定义变量使用 var

  **js的语句
  *if
  *switch
  *for while do...while

  **js的运算符
  *字符串的操作
  ***字符串相加：连接
  ***字符串相减：执行相减运算
  *boolean类型相加
  true：1
  false：0
  *==和===区别
  **==：判断值
  **===：判断值和类型
  **js的数组
  三种定义方式
  **var arr = [1, 2, "3"];
  **var arr1 = new Array(9);
  **var arr2 = new Array(1, 2, 3);

  **属性 length：数组的长度
 
  **js的函数
  *** function add(a,b) {方法体和返回值;}
  *** var add1 = function（m,n）{方法体和返回值;};
  *** var add2 = function("a,b", "方法体和返回值");

  ****不要忘记调用，不然没有作用

  **js的全局变量和局部变量
  **全局变量：在页面中任何js的部分，都可以使用
  **局部变量：在方法内部定义一个变量，这个变量只能在方法内部使用

  **script标签位置
  **建议放在</body>后面

  **js的重载
  以Java的方法和JS的函数来比较一下：

Java中：通过方法签名来唯一确定一个方法。所谓方法签名包括：方法名、参数类型和参数顺序、参数个数这几个要素。所以，如果两个方法名称相同，但是只要其他要素(例如参数类型、参数个数)不同，编译器就会认为是不同方法。从而可以存在同名的不同方法，导致了重载现象。

JavaScript：函数(或对象方法)完全靠函数名称唯一确定，JS不将参数列表作为区分函数的依据。更关键的是，在JS中，函数是作为一种特殊对象类型存在的，函数的名字只是一个普通的变量，本质与var a = 1中的变量a没什么区别。所以如果你先后定义了两个同名函数，实际上相当于先后将两个函数对象绑定到了同一个变量上，所以后者必然覆盖前者，不会共存，也自然不存在重载了。

所以，JS中的函数虽然也叫函数，但是别忘了它本质上还是一种对象，只不过是一种比较特殊的具有可调用特征的对象罢了。

JS中的函数跟很多其他语言中的函数或方法不可同日而语。

当然，JS完全可以设计成支持重载，但是为什么不支持呢？我觉得，可能跟JS一开始的目标就是要设计成一种简单的、动态类型的语言有关。增加了重载，就没那么简单了，而且参数还不能动态传递了。