java程序员第二课 JavaScript &&css 快速入门

CSS

1、css概述
* Cascading Style Sheets：层叠样式表
** 层叠：一层一层（优先级，最终以哪个样式为准）
** 样式表：很多的属性和属性值
* 增强页面的显示效果

*** CSS将网页内容和显示样式进行分离，提高了显示功能

* 要想使用css，必须要和html在一起使用

2、css和html的结合方式
（1）每个html标签都有一个属性 style，在style里面设置样式
*

天之道，损有余而补不足，是故虚胜实，不足胜有余。

* 格式 style=”属性名1:属性值1;属性名2:属性值2”
（2）使用html的一个标签
* 一般style标签写在头标签里面
* div {
background-color:black;
color:white;
}
* 应用场景：只是在一个页面设置这个样式，其他页面设置其他的样式

（3）在style标签里面使用语句
    * 首先创建一个css文件
    * <style type="text/css"> @import url(css文件路径); </style>
    * <style type="text/css">
        @import url(div.css);
    </style>
    * 注意：在某些浏览器下不支持

（4）引入外部的css文件
    * 使用头标签 link
    * <link rel="stylesheet" type="text/css" href="css_3.css" />
    * 应用场景：比如现在有一万个页面，一万个页面需要相同的样式

** css优先级
    * html代码加载顺序：从上到下加载
    * 一般情况下，后加载的优先级高

** 格式：属性名:属性值 ; 属性名:属性值;

3、css的基本选择器
* 在哪个标签上设置样式
（1）标签选择器
* 使用标签名作为选择器
* p {
background-color:green;
}
（2）class选择器
* 每个html标签都有一个属性class
* .haha {
background-color:red;
color:green;
}

（3）id选择器
    * 每个html标签都有一个属性id
    * #hehe {
        background-color:#990099;
        color:#ccff99;
     }
    * id建议不要相同，后面js获取值

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

4、css的扩展选择器
（1）关联选择器(设置嵌套标签里面的样式)
*

aaaaa

*

bbbbb

** 设置div里面的p标签里面的内容

    * div p {
        background-color:blue;
    }

（2）组合选择器（设置不同的标签具有相同的样式）
    * <div>qqqqqq</div>
    * <p>wwwwww</p>
    ** 设置div和p具有相同的样式

    * div,p {
        background-color:orange;
    }

（3）伪类元素选择器(了解)
    * 实现一些简单的动态效果
    * 不是一个真正的选择器，css里面提供的一些选择器，可以直接使用
    ** 超链接的状态
    * 原始状态    鼠标放上去（悬停）   点击（瞬间）  点击之后
       :link        :hover              :active        :visited
    * 如何记忆：
        lv ha

5、CSS的盒子模型
* 要进行布局，首先要把数据封装到一块区域里面去（div）
* 边框 border : border-width || border-style || border-color
** 上下左右 border-top border-bottom border-left border-right
* 内边距：padding：length
** 有上下左右四个内边距
* 外边距 ：margin：length
** 有上下左右四个外边距

6、css的布局（漂浮）
* float属性:left right

7、案例：实现图文混排效果

8、css布局（定位）
* position：absolute relative
** absolute：将对象从文档流中拖出，使用 left ， right ， top ， bottom 进行定位
** relative: 不会把对象从文档流中拖出，使用 left ， right ， top ， bottom 进行定位

9、案例：图像签名（在图片上加文字）

1、javascript简介
* javascript是一个基于对象和事件驱动的语言，应用与客户端。

** 基于对象：
    - java是面向对象语言
    - js里面提供了很多对象，直接使用
** 事件驱动：
    - 鼠标滑动，每次滑动都会变换一张图片

** 客户端
    - 浏览器

** html实现静态的页面效果，js实现一些动态的效果

* 特点
    ** 交互性：
    ** 安全性：js不可以直接访问本地硬盘
    ** 跨平台性：只要可以解析js的浏览器都可以运行

* javascript和java区别（雷锋和雷峰塔）     
    - java是sun公司，现在是oracle公司；javascript是Netscape公司
    - java是面向对象，js是基于对象
    - javascript是若类型语言，java是强类型语言
        * 在java里面,int i = 1;  int m = "1";
        * js里面定义  var n = 1; var m = "12"; var flag = true;
    - java跨平台基于jvm，js跨平台基于浏览器

* javascript组成：
    1、ECMAScript（js的一些语法）
        * ECMA:组织，欧洲计算机协会
        * 语句，语法。。。
    2、BOM：browser object model
        * 浏览器对象模型
    3、DOM：document object model
        * 文档对象模型

2、js与html结合方式 （两种）
1、 通过html标签
*
js代码

2、使用外部引入js文件方式
    * 创建js文件
    * <script type="text/javascript" src="js路径地址"></script>
    * 当使用了外部引入方式，引入js之后，在script标签里面不能写js代码
    * <script type="text/javascript" src="1.js"/>
* 使用 alert("要显示的内容");

3、js的原始数据类型和变量声明
* js的注释
- 单行注释 //
- 多行注释 /* */
* 原始数据类型
* Boolean：布尔类型 true false
- var flag = true;

    * Number ：数字类型
        - var m = 1;

    * String：字符串 
        - var str = "abc";


    * Undefined：
        - 表示变量声明，但是没有赋值
        - var aa;
    * Null:
        - 表示引用类型为空
        var date = null;
        - 所有引用类型都是object

* 声明变量 
    - 任何的数据类型都是使用关键字 var

    - typeof(变量名称):查看变量的类型

4、js的语句
* java里面语句
- 循环 for while do-while
- if() { } else {}
- switch() String类型在jdk1.7开始支持
* js里面的语句
- if else
* if(i == 3) {

        } else {}
    - 循环语句 for  while  do-while
        * document.write(""); 在页面上显示内容
        ** write("<br/>")：可以写变量，写html代码
    - switch语句:(条件没有类型的限制)
        switch(条件) {
            case 1:
                break;
            ......
            default:

        }

5、案例：实现99乘法表
* document.write(“

“);
//循环行
for(var i=1;i<=9;i++) {
document.write(““);
//循环列
for(var j=1;j<=i;j++) {
document.write(““);
}
//增加换行
//document.write(“
”);
document.write(““);
}
document.write(“

“); document.write(j+”*”+i+”=”+i*j+” ”); document.write(“

“);

6、js的运算符
* i++ ++i
* js的字符串的加减操作
- var str = “123”;
- document.write(str+7);//字符串拼接 = 1237
- document.write(str-1);//做相减操作 = 122

* boolean类型的加减操作
    - var flag = true;
    //document.write(flag+1); //true 值1 

    - var flag1 = false;
    document.write(flag1+1); //flase 值0

* 数字类型number操作(不区分整数和小数)
    - var mm = 123;
    //在java里面值 0
    - document.write(123/1000*1000); //123

    * &&和||区别
    * &和|

7、js的数组
* 存很多值
** java里面定义数组 int[] arr = {1,2,”3”};不正确

* 三种定义方式
    1、第一种 var arr = [];  var arr = [1,2,3]; var arr = [1,"a",3];
    2、第二种 var arr1 = new Array(3);传入一个参数 ：表示定义了一个数组名称arr1，并且数组的长度是3
        * arr1[0] = 1;
          arr1[1] = 2;
          arr1[2] = 3;

    3、第三种 var arr2 = new Array(4,5,6);
        * 表示定义一个数组名称arr2，并且数组里面的具体值是4 5 6

* js的数组里面有一个属性 length 查看数组的长度

8、js的函数（方法）
* java里面定义方法
- public void/int 方法名(参数列表) {
方法体;
返回值;
}

* js里面定义函数有三种方式
    1、使用一个关键字 function
        - 格式： function 方法名(参数列表) {
                方法体;
                //返回值可以有可以没有;
            }
        //参数列表部分不加var，直接写参数名称
        * function add1(m,n) {
            var sum = m+n;
            //alert(sum);
            return sum;
        }

    2、动态函数(不建议使用)
        * 使用js内置对象 Function("方法的参数列表","方法体和返回值")
        * var param = "a,b";
          var methods = "var sum;sum=a+b;return sum;";
          var aa = new Function(param,methods);

    3、匿名函数
        * function(参数列表) {方法体和返回值;}
        * var bb = function(p,q) {
            var sum = p+q;
            return sum;
        }

9、js的全局变量和局部变量
* 全局变量：在script里面定义的一个变量，这个变量在页面中都有效
* 局部变量：在方法内部定义一个变量，这个变量只能在方法内部使用

** ie调试方式：直接打开ie浏览器f12，出现控制台，看到js的错误信息

10、