@w460461339 2016-11-15T23:26:10.000000Z 字数 7129 阅读 1107

Web学习Day2（CSS & JavaScript）

JAVA_Web

今天学的是CSS和JavaScript。呃，说实话，这两门都不算是一门语言吧，算是HTML的扩展。因为HTML之前的写法是在太那个蛋疼了，利用这两种方式来写就比较方便~~

1、CSS

1.1 CSS简介

css：层叠样式表
** 层叠：一层一层的

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

1.2 CSS在HTML中的运用

在说运用前，先介绍下大致的格式，基本格式是这样的：

属性：设置内容；属性：设置内容；……

即，利用冒号来设置属性的值，利用分号来将其隔开。

1.2.1 如何在CSS中用HTML

一共有四种结合方式：

<html>
 <head>
  <title>HTML EXAMPLE</title>
    <!--第二种方法，在头标签中，利用<style></style>包住-->
    <!--并像如下的方式进行撰写-->
  <style type="text/css">
    div.way2{
        background-color:blue;
        color:yellow;
    }
  </style>
  <!--第三种方法，在头标签中，利用<style></style>包住-->
  <!--并实现撰写好.css文件，.css文件的内容和格式与方法二中style内部的一样-->
  <!--之后利用@import将该.css文件加载即可-->
  <style>
    @import url(div22.css);
  </style>
  <!--第四种方法，在头标签中，不用style围着-->
  <!--需要实现写好.css文件-->
  <!--直接用link标签，rel中写stylesheet，表示样式表-->
  <!--type和前面方法一样，href写.css文件的地址-->
    <link rel="stylesheet" type="text/css" href="div2_.css"/>
 </head>
 <body>
    <!--第一种方法，直接在div后面的style属性里面写-->
    <div style="background-color:red;color:green;" class="way1">
        <h1>6666</h1>
    </div>
    <div class="way2">
        <h1>7777</h1>
    </div>
    <div class="way3">
        <h1>8888</h1>
    </div>
    <div class="way4">
        <h1>9999</h1>
    </div>
 </body>
</html>

1.2.2 css基本选择器

嘛，之前看到的div.class就是一种选择器。选择器是用来解决如下问题的：

当程序中有多段内容都是用<div></div>包裹起来的，且需要显示不同的效果时，就用需要利用选择器，来选择不同的div块来显示不同的效果。

<html>
 <head>
  <title>HTML EXAMPLE</title>
  <style type="text/css">
    /*CSS中的注释方式*/
    /*这是第一种选择器，标签选择器，可以将不同标签的模块区分*/
    /*比如这里就将div和pre区分开了*/
    div{
        background-color:blue;
        color:yellow;
    }
    /*这是第二种选择器，类选择器，用以将同标签不同内容的块区分*/
    /*用 . 来进行连接*/
    div.way2{
        background-color:yellow;
        color:blue;
    }
    /*这是类选择器第二种用法*/
    /*当块的标签不同但类相同时，直接写.classname，可以将这些类统一设置*/
    .way2{
        background-color:yellow;
        color:blue;
    }
    /*这是第三种选择器，ID选择器*/
    /*除了使用#而非.隔开外，其他用法，包括不同标签同ID名的用法*/
    /*都与类选择器一样*/
    div#NO4{
        background-color:red;
        color:#ff00ff;
    }
  </style>
 </head>
 <body>
    <div>
        <h1>6666</h1>
    </div>  
    <pre>
        <h1>7777</h1>
    </pre>
    <div class="way2" >
        <h1>8888</h1>
    </div> 
    <pre class="way2">
        <h1>88888</h1>
    </pre>
    <div id="No4"> 
        <h1>9999</h1>
    </div> 
 </body>
</html>

扩展标签

<html>
 <head>
  <title>HTML EXAMPLE</title>
  <style type="text/css">
    /*关联选择器，设置相同标签下的不同子标签的格式*/
    /*利用空格来区分层级*/
    div p{
        background-color:yellow;
        color:blue;
    }
    div pre{
        background-color:gray;
        color:#ff0000;
    }
    /*关联选择器，用来将同级的两个不同标签设置为相同格式*/
    div,p{
        background-color:red;
        color:blue;
    }
    /*另外还有伪标签，这里就不写了*/
  </style>
 </head>
 <body>
    <div>
        <p>6666</p>
        <pre>7777</pre>
    </div>
    <p>
        88888
    </p>
 </body>
</html

另外，各级标签的优先级：

style（就是第一种结合方式） > id > class > 标签

1.2.3 CSS盒子模型

<html>
 <head>
  <title>HTML EXAMPLE</title>
  <style type="text/css">
    div{
        /*设置边框长宽*/
        width:300;
        height:400;
        /*设置边框粗细 样式 颜色*/
        border:4px dashed black;
        /*设置文字左上角到边框左边以及顶部的距离*/
        /*可用padding-top,padding-left等单独设置*/
        padding:100;
        /*设置整个框的左上角到页面左边以及顶部的距离*/
        /*可用margin-top,margin-left等单独设置*/
        margin:200;
    }
  </style>
 </head>
 <body>
  <div>
    <h1>6666</h1>
  </div>
 </body>
</html>

1.2.4 css的漂浮以及定位

先讲漂浮吧，看下来感觉漂浮也没什么用，就是把让目标文本流向后面内容的左边/右边.
这个效果不是很好描述，自己看看吧~~

<html>
 <head>
  <title>HTML EXAMPLE</title>
  <style type="text/css">
    div{
        width:100;
        height:75;
        border:2px solid yellow;
    }
    #div1{
        float:left;
    }
    #div2{
        float:left;
    }
  </style>
 </head>
 <body>
    <div id="div1">
        <h1>6666</h1>
    </div> 
    <div id="div2">
        <h1>7777</h1>
    </div> 
    <div id="div3">
        <h1>8888</h1>
    </div> 
 </body>
</html>

定位：

<html>
 <head>
  <title>HTML EXAMPLE</title>
  <style type="text/css">
    div{
        width:100;
        height:75;
        border:2px solid black;
    }
    /*position后面跟absolute或者relative都是移动块的方式*/
    /*只是利用absolute，后面的内容会自动补位*/
    /*而利用relative则不会*/
    /*不要忘了之后利用top或者left等确定位置*/
    #div2{
        background-color:orange;
        position:absolute;
        left:120px;
        top:200px;
    }
    #div3{
        background-color:blue;
        position:relative;
        left:220px;
        top:60px;
    }
  </style>
 </head>
 <body>
    <div id="div1">
        <h1>6666</h1>
    </div>  
    <div id="div2">
        <h1>7777</h1>
    </div> 
    <div id="div3">
        <h1>8888</h1>
    </div> 
    <div id="div4">
        <h1>9999</h1>
    </div> 
 </body>
</html>

2、JavaScript

2.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）ECMAScript
        - ECMA : 欧洲计算机协会
        - 有ECMA组织制定的js的语法，语句.....

    （2）BOM
        - broswer object model: 浏览器对象模型

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

2.2 JavaScript和HTML接合的方式

嘛，就像之前的CSS一样，JavaScript要和HTML接合在一起才有用

<html>
 <head>
  <title>HTML EXAMPLE</title>
  <style type="text/css">
  </style>
 </head>
 <body>
 </body>
</html>
<!--javascript的代码放在哪里都可以，一般放在最后，防止块在javascript之后出现-->
<script type="text/javascript">
 //这是注释
</script>
<!-- 在src里面写JavaScript文件路径
     即为第二种方法
<script src="">
</script> 
        -->

2.3 JavaScript原始类型和声明变量方法

原始类型有五种：

string(字符串) number(数字) boolean(布尔) null(对象引用) undefined(未定义)

定义时，都用关键字 var

<html>
 <head>
  <title>HTML EXAMPLE</title>
  <style type="text/css">
  </style>
 </head>
 <body>
 </body>
</html>
<script type="text/javascript">
    var str="Hello world";
    //这样不合法，必须要引号
    //var str2=hello;
    //需要注意字符串与数字类型的相加为向后添加数字；
    //相减则将字符转为数字再减
    //加了引号都是string类型
    var num="11";
    //这个才是数字类型
    var num2=22;
    //同上，这个才是boolean，加引号都是string
    var bol=true;
    var bol2="false";
    //另外两个不演示了
    //弹框用以显示内容
    alert(typeof(bol));
</script>

另外在这里顺便把数组的定义方式说了

第一种： var arr = [1,2,3];   var arr = [1,"4",true];
第二种：使用内置对象 Array对象
        var arr1 = new Array(5);  //定义一个数组，数组的长度是5
        arr1[0] = "1";

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

2.4 JavaScript语句

介绍三种语句：

if
switch
循环

<html>
 <head>
  <title>HTML EXAMPLE</title>
  <style type="text/css">
  </style>
 </head>
 <body>
 </body>
</html>
<script type="text/javascript">
    var i=5;
    if(i<6){
        //这个想说的是，js里面true=1，false=0；
        alert((i<6)==1);
        alert("i"+"<"+6);
    }
    //这里想说的是，js里面switch可以判断字符串的
    var j="b";
    switch(j){
        case "a":alert("hello");break;
        case "b":alert("world");break;
        default:break;
    }
    for(var m=5;m>=0;m--){
        alert(m);
    }
    //while一样的，就不写了
</script>

2.5 JavaScript运算符

呃，其实就是科普一些小知识：

<html>
 <head>
  <title>HTML EXAMPLE</title>
  <style type="text/css">
  </style>
 </head>
 <body>
 </body>
</html>
<script type="text/javascript">
    //表明不区分整数和小数
    document.write(123/1000*1000);
    //用引号(单引号双引号都行)就可以写HTML代码了
    document.write("<hr/>");
    //打印出来时aaa1
    document.write("aaa"+1);
    document.write("<hr/>");
    //打印是4
    document.write("5"-1);
    document.write("<hr/>");
    //打印是NaN，表示非数字
    document.write("h"-1);
    document.write("<hr/>");
    //打印是true，表示==值比较值（内容）
    document.write("1"==1);
    document.write("<hr/>");
    //打印是false，表示===比较值和类型
    document.write("1"===1)
</script>

2.6 JavaScript 99乘法表

<html>
 <head>
  <title>HTML EXAMPLE</title>
  <style type="text/css">
  </style>
 </head>
 <body>
 </body>
</html>
<script type="text/javascript">
    var i=1;
    var j=1;
    //非表格版
    for(;i<=9;i++){
        j=1;
        for(;j<=i;j++){
            document.write(i+"*"+j+"="+i*j);
            document.write("&nbsp");
        }
        document.write("<br/>");
    }
    document.write("<hr/>");
    //表格版
    i=1;
    j=1;
    document.write("<table border='5' cellspacing='0' bordercolor='red'>");
    for(;i<=9;i++){
        j=1;
        document.write("<tr>")
        for(;j<=i;j++){
            document.write("<td>")
            document.write(i+"*"+j+"="+i*j);
            document.write("</td>");
        }
        document.write("</tr>");
    }
    document.write("</table>");
</script>

2.7 JavaScript里面函数

<html>
 <head>
  <title>HTML EXAMPLE</title>
  <style type="text/css">
  </style>
 </head>
 <body>
 </body>
</html>
<script type="text/javascript">
    //方式一
    function sum(a,b){
        var result=a+b;
        return result;
    }
    alert(sum(5,6));
    //方式二，创建匿名函数，最后给函数起名为sum2
    var sum2=function(a,b,c){
        var result=a+b+c;
        return result;
    }
    alert(sum2(4,5,6));
    //方式三 更麻烦的匿名函数，最后给函数起名为add
    var add = new Function("a,b","var result=a*b;return result;");
    alert(add(2,3));
</script>

2.8 JavaScript全局/局部变量

** 全局变量：在script标签里面定义一个变量，这个变量在页面中js部分都可以使用
    - 在方法外部使用，在方法内部使用，在另外一个script标签使用

** 局部变量：在方法内部定义一个变量，只能在方法内部使用
    - 如果在方法的外部调用这个变量，提示出错
    - SCRIPT5009: “nn”未定义 
    12-js的局部变量.html, 行18 字符3

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

2.9 JavaScript的重载

实验知，JavaScript里面没有重载的~