Java进阶学习第二天——CCS与JS入门

文档版本	开发工具	测试平台	工程名字	日期	作者	备注
V1.0				2016.04.08	lutianfei	none

第二章CCS

CSS的简介

CSS：cascading style sheet ：层叠样式表。
做什么用：
- 设置网页的显示效果（设置样式）。
- 可以解决html代码对样式定义的重复，
- 提高了后期样式代码的可维护性，
- 增强了网页的显示效果功能。
- CSS将网页显示的效果和内容分离。（耦合性）
HTML只需要把文本内容封装起来，不用属性，用CSS的代码来控制显示效果。
- 如果开发了多套CSS的代码，都不用修改HTML的代码。

CSS和HTML的结合（重点）

第一种结合方式——在html标签上提供style属性

在html的标签上，提供了一个(属性)，style=”CSS的代码”

第二种结合方式——在html文件中提供style标签

在HTML的文件，提供了一个标签
<style type="text/css">CSS的代码</style>
- 这个标签放在<head></head>的中间
- 注：如果某个div标签已经用第一种方式定义过了，则会按照第一种方式显示，按层叠来理解。

第三种结合方式——引入外部css文件

引入CSS的文件，定义一个css文件
- 后缀名 .css
- 格式： @import url("CSS文件的地址");
- 属性必须要写<style></style>内部。大写和小写都没有问题。
- css格式的注释符号：/* */

第四种结合方式——引入外部文件，通过link标签

写在<head></head>中间，不要放在<style>中间（经常使用）
- rel：代表当前和引入文件之间的关系:一般为stylesheet
- type：切换到css引擎
- href：引入CSS文件的地址

CSS的优先级和规范（重点）

一般情况：从上到下，由外到内，优先级是从低到高的。
特殊情况下：标签名选择器 < 类选择器 < ID选择器 < style属性

规范
- 选择器名称 { 属性名：属性值；属性名：属性值；……}
- 属性与属性之间用分号隔开
- 属性与属性值之间用冒号连接
- 如果一个属性有多个值的话，那么多个值用空格隔开。

CSS的选择器（重点）

作用：告诉CSS的代码作用在哪个标签上。

基本选择器

标签名选择器
- div{} span{}
类选择器 ：一般给css使用
- 在HTML的标签上，提供了属性 class，定位到div的标签（美工经常使用的方式）
- 写法： .class的名称 (eg: .hehe{CSS的代码})
- 设置不同的标签，具有相同的样式
- 带html div标签情况
- 不带html标签的情况

ID选择器：一般给js使用
- 在HTML的标签上，提供的属性设置样式
  - 写法： #id的名称 (eg: #haha{CSS的代码})
- 一般情况下：不同的模块设置不同的ID,若id相同，默认取第一个。

扩展选择器

关联选择器：标签可以嵌套，标签与标签之间的关系。
- 写法：中间用空格隔开 ;例子（div font{CSS的代码}）

组合选择器：对多个不同的选择器进行相同的样式
- 写法：在多个不同的选择器之间用 , 隔开

伪元素选择器：定义好的一些选择器，用就ok。
- 格式：标签名：伪元素。类名标签名。类名：伪元素。都可以。
- 如果使用超链接伪元素选择器：使用顺序： L V H A
  - L:link 超链接未点击状态。 text-decoration: none;
  - V:visited 被访问后的状态。
  - H:hover 光标移到超链接上的状态（未点击）。
  - A:active 点击超链接时的状态。
- first-line 段落的第一行文本。
- first-letter 段落中的第一个字母。
- focus 具有焦点的元素。

input:FOCUS {
    background-color: gray;
}

/* 未访问 */
a:LINK {
    text-decoration: none;
    color: blue;
}

/* 访问完成 */
a:VISITED {
    color: yellow;
    font-size: 20px;
}

/* 悬停 */
a:HOVER {
    color: red;
    font-size: 25px;
}

/* 点击状态 */
a:ACTIVE {
    color: green;
    font-size: 35px;
}

CSS的布局（了解）

float : none | left | right
- none :　默认值。对象不飘浮
- left :　文本流向对象的右边
- right :　文本流向对象的左边

第三章：JAVASCRIPT(重点)

javascript的简介

js是基于对象和事件驱动的脚本语言，作用在客户端（浏览器）上。
js的特点：
- 交互性（信息的动态交互）
- 安全性（不可以访问本地的硬盘）
- 跨平台性（只要是可以解析js的浏览器都可以执行，和平台无关）
javascript和java完全不同
- js的基于对象(所有的东西在内存中以对象的形式存在)，java是面向对象（解决问题的思路）。
- js解析就可以执行，java先编译再执行。
- js是弱类型的语言，java是强类型语言。
JavaScript历史
- Netscape（网景），静态的效果。livescript（javascript的前身）
- java诞生了，升级了，改名（javascript），火了。
- 巨头：自己开发一套（jscript）
- Netscape找了一些公司推出的标准： SUN 微软 ECMA（欧洲计算机制造协会），联合推出现在的标准。
- ECMAScript：标准。基础上扩展。
javascript语言的组成
- ECMAScript 标准（js的语法，变量，函数）
- BOM （Browser Object Model） 浏览器对象模型
- DOM （Document Object Model）文档对象模型

js和HTML的结合

第一种方法使用script标签
- 语法：<script type="text/javascript">js的代码</script>
- 标签可以放在HTML文件的任意位置上。
第二种方法引入外部的文件
- 语法：<script src="引入js文件（相对路径）" >
- 如果script通过src的属性引入了外部的文件，里面的js代码就不会执行了。
- <script>，标签可以放在HTML文件的任意位置上。一般都放在body标签的后面。

javascript的语法

js的基本数据类型和变量定义

关键字：被赋予了特殊含义的单词。
标示符：用于标识数据和表达式的符号。（和java一样）
注释：和java一样。
变量：标识内存中一片空间，用于存储数据，数据是可以变化的。
- var 声明变量，不管是int还是String等都用此声明。
- 5种基本数据类型： Undefined、Null、Boolean、Number 和 String
运算符：可以让数据进行运算的符号。
语句：对程序的运行流程进行控制的表达式。
函数：用于对功能代码进行封装，便于提高复用性。
数组：对数据进行存储，便于操作。
对象：封装体，既可以封装数据，又可以封装函数。

5种基本数据类型

String ：字符串类型
- js中双引号和单引号都代表的是字符串
Number：数字类型
- 不区分整数和小数
Boolean：布尔类型
Null：空，给引用赋值的
Undefined：未定义（声明变量，没有赋值）
typeof() 判断当前变量是什么类型的数据

js的运算符

算术运算符
- 0或者null是false，非0或者非null是true，默认用1表示。
- 不区分整数和小数

var num = 3710;
alert(num/1000*1000);    // 3710,不区分整数和小数
var str = "12";
//alert(str + 1 );     //    121，加法作为**连接符**
alert(str - 1);        // 11，减法作为运算符
alert("abc" - 1);        //    NaN

alert(true + 1);    // 2
alert(0 + 1);    // 1

if(num == 15){
    alert("abc");
}else{
    alert("ab2c");
}

赋值运算符
- 和java是一样的
比较运算符
- == 比较值是否相同
- === 比较值和类型是否相同

var num3 = 15;        // 数字
var str3 = "15";    // 字符串

// alert(num3 == str3);    // true
// alert(num3 === str3);    // false

逻辑运算符
- 和java中一样
三元运算符
条件?值1:值2

js语句

和java基本相同
向页面输出文本的内容: 文本的内容可以是HTML的代码
- document.write("文本内容");
编写99乘法表

<script type="text/javascript">
document.write("<table border='1' width='50%' cellpadding='10'>");

// 99乘法表
for(var i=1;i<=9;i++){
    document.write("<tr>");
    // 循环列
    for(var j=1;j<=i;j++){
        document.write("<td>"+j+"*"+i+"="+i*j+"</td>");
    }
    // 换行的操作
    // document.write("<br/>");
    document.write("</tr>");
}
document.write("</table>");

</script>

js的数组

java :String [] str = {};
js：
- var arr = [12,34,55];
- var arr = new Array(5); 声明数组，长度是5
- var arr = new Array(2,3,4); 声明数组，元素是2 3 4
数组的属性
- 长度：length
- 数组的长度是可变的。

var arr = [12,34,44];
// alert(arr.length);

document.write(arr+"<br/>");
arr[3] = "abc";
arr[4] = 99;
document.write(arr); //直接打印数组内容

js的方法

java：

public String 方法名称(参数列表(int num,String str)){
    方法体;
    return null;
}

js中，通过关键字 function 声明方法。
- Javascript中不存在重载形式。
- 在函数的内部，有一个数组，用来装传过来的参数的arguments
- 如果调用方法时，忘记了写()，则会把函数对象的引用传给接收的变量，而打印出函数体的内容。

function 方法名称(参数列表 (num,str)){
    方法体;
    return;
}

* 参数列表：不能使用var关键字
* 返回值：可写可不写的，如果有写返回值，如果没有，返回值可以省略不写。

// var result = add2(10,5);
// alert(result); //打印15

// var result2 = add2(10,10,7,8);
// alert(result2);//打印20


function getSum(){
    return 100;
}

var sum = getSum; 
//alert(sum);//打印getSum方法的全部代码

var sum2 = sum();
alert(sum2);//打印100

版权声明：本文来源CSDN，感谢博主原创文章，遵循 CC 4.0 by-sa 版权协议，转载请附上原文出处链接和本声明。
原文链接：https://blog.csdn.net/lutianfeiml/article/details/51122876
站方申明：本站部分内容来自社区用户分享，若涉及侵权，请联系站方删除。

发表于 2020-06-28 01:18:53
阅读 ( 435 )
分类：前端

Java进阶学习第二天——CCS与JS入门

第二章CCS

CSS的简介

CSS和HTML的结合（重点）

第一种结合方式——在html标签上提供style属性

第二种结合方式——在html文件中提供style标签

第三种结合方式——引入外部css文件

第四种结合方式——引入外部文件，通过link标签

CSS的优先级和规范（重点）

CSS的选择器（重点）

基本选择器

扩展选择器

CSS的布局（了解）

第三章：JAVASCRIPT(重点)

javascript的简介

js和HTML的结合

javascript的语法

js的基本数据类型和变量定义

5种基本数据类型

js的运算符

js语句

js的数组

js的方法

你可能感兴趣的文章

精选的优质文章

0 条评论

官方社群

GO教程

推荐文章

猜你喜欢

随便看看