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一开始的目标就是要设计成一种简单的、动态类型的语言有关。增加了重载,就没那么简单了,而且参数还不能动态传递了。

最新文章

  1. 关于Java泛型的使用
  2. java综合实训第二次
  3. iOS--(UITableViewCell)、(UITableViewController)微信个人主页
  4. 自动装配Bean
  5. P1379 八数码问题
  6. Ajax请求中带有IPv6地址后的百分号的问题
  7. 1-3 ISO/OSI七层模型详解
  8. 每年六一儿童节,牛客都会准备一些小礼物去看望孤儿院的小朋友,今年亦是如此。HF作为牛客的资深元老,自然也准备了一些小游戏。其中,有个游戏是这样的:首先,让小朋友们围成一个大圈。然后,他随机指定一个数m,让编号为0的小朋友开始报数。每次喊到m-1的那个小朋友要出列唱首歌,然后可以在礼品箱中任意的挑选礼物,并且不再回到圈中,从他的下一个小朋友开始,继续0...m-1报数....这样下去....直到剩下
  9. 深入理解shared pool共享池之library cache的library cache lock系列四
  10. select 响应时间 js
  11. 我的Emacs折腾经验谈(四) 也谈Yasnippet
  12. Java语言程序设计基础篇第10版第5章习题答案
  13. Django:(博客系统)使用使用mysql数据-&gt;后台管理tag/post/category的配置
  14. php基础-cookie&amp;session
  15. 【微信小程序项目实践总结】30分钟从陌生到熟悉 web app 、native app、hybrid app比较 30分钟ES6从陌生到熟悉 【原创】浅谈内存泄露 HTML5 五子棋 - JS/Canvas 游戏 meta 详解,html5 meta 标签日常设置 C#中回滚TransactionScope的使用方法和原理
  16. 如何让VB6代码编辑器垂直滚动条随鼠标滚轮滚动
  17. golang之tcp自动重连
  18. ArcCatalog连接ArcSDE连接报:unable to create new database connection file,permission is denied
  19. MYSQL-max_binlog_cache_size参数
  20. C# 导出Excel &quot;正在中止线程&quot; 错误

热门文章

  1. [转帖]召冠总的 Oracle常用的性能诊断语句. --保存学习备查
  2. numpy meshgrid函数
  3. 如何使用grep 等命令快速的在日志中找到自己需要的内容
  4. 如何禁止复制电脑文件到U盘、禁止U盘拷贝文件
  5. 关于Spring MVC跨域
  6. 使用libcurl 发送post请求
  7. python列表和元组操作
  8. BZOJ1782[USACO 2010 Feb Gold 3.Slowing down]——dfs+treap
  9. Java原子类实现原理分析
  10. Network POJ - 3694(lca并查集+连通图求桥)