CSS(美工部分知识,了解)

1、 CSS概述

1.1、CSS是什么?

* CSS 指层叠样式表

样式表:存储样式的地方

层叠:一层一层叠加

高大富有帅气人

1.2、CSS有什么作用?

*CSS就是用来更加方便修饰HTML标签(元素)

1.3、CSS代码规范

选择器名称 { 属性名:属性值;属性名:属性值;…….}

属性与属性之间用 分号 隔开

属性与属性值直接按用 冒号 连接

如果一个属性有多个值的话,那么多个值用 空格 隔开。例如: border:5px solid red;

注释:/* 注释内容*/

加注释:ctrl+shift+/

取消注释:ctrl+shift+\s

2、HTML与CSS的结合方式

*CSS必须结合HTML来用。

*4种使用方式:

2.1、style属性方式(内联样式)

*适合局部某一个标签的修改

*<font style="font-size:150px;color: red;">今天天气好晴朗</font>

2.2、style标签方式:(内嵌样式)

*<style></style> 存在于head标签之中的

*例如:<style type="text/css">

font {

font-size:150px;color: red;

}

</style>

*页面的多个标签设置统一的样式。

2.3、导入方式(外部样式中使用较少)

*格式:@import url("CSS文件路径");

*存在于<style>标签中

2.4、链接方式(外部样式最常用的方式)

*格式:<link rel="stylesheet" type="text/css" href="CSS文件路径"/>

*存在于<head>标签中

外部样式好处:

大大提升了代码的复用性,更加易于维护,从而极大提高工作效率

样式优先级:

内联样式》》内嵌样式==链接样式(就近原则)

链接方式和导入方式区别:

1、链接方式引用的CSS会被同时加载。而导入方式引入的CSS在页面全部加载完以后才会加载,在网速较慢时会出现网页没有样式的情况。(导入方式硬伤)

2、链接方式支持JavaScript修改样式,而导入方式不支持(导入方式硬伤)

3、链接方式导入的CSS任何浏览器都OK,而导入方式要求浏览器版本必须在IE5以上

建议使用链接方式

3、CSS选择器

*CSS选择器:指定了CSS样式作用于哪个HTML标签上

3.1、元素选择器

*就是把HTML标签名作为选择器名称

*格式: 标签名 {}

3.2、类选择器

*样式格式:  .class名{}

*标签格式: <p class=”class名”></p>

*能设置不同标签的相同样式

3.3、Id选择器(优先级最高)

*样式格式:  #id名{}

*标签格式:<p id=”id名”></p>

*有针对性地设置样式

3.4、属性选择器(浏览器兼容性最差)

*根据标签名和标签的属性名以及属性值来选择

*样式格式:标签名[属性名称=’属性值’]

3.5、伪元素选择器(特殊)

*HTML预定义的选择器

*格式:标签名:选择器{}

*选择器名称为 HTML标签的状态。例如:a:link{}表示链接标签在未访问过 时的样式。

!important  可以将优先级提到最高

例如:color:red !important;

JavaScript基础+进阶

1、 JavaScript概述

1.1、 JavaScript是什么,有什么作用?

*JavaScript是因特网上最流行的脚本语言。

*脚本语言不能单独使用,必须嵌入到其他语言中组合使用

JavaScript不能单独使用,必须和其他语言(HTML)结合使用

*JavaScript由浏览器直接解释执行,不用编译(解释一条,执行一条。故写代码时能用一条语句就不要用两条语句)

链式编程的可读性非常差。

要在可读性和执行效率之间做取舍

*作用是:可以控制前端页面的逻辑操作

例如:JS可以控制CSS的样式;

JS可以对表单项进行校验(JAVAEE重点)

JS可以对HTML元素进行动态控制

*特点:

交互性(JavaScript控制HTML元素)

安全性(没有访问系统文件权限,无法用来做厉害的木马病毒)

跨平台性(浏览器有JS的解析器,只要有浏览器就能运行JS代码,和平台无关)

1.2、 JavaScript的组成

*ECMAScript (核心):描述了JS的语法和基本对象。

*DOM 文档对象模型:处理网页内容的方法和接口

*BOM 浏览器对象模型:与浏览器交互的方法和接口

1.3、 JavaScript和Java的关系

*JavaScript和Java一点关系都没有(雷锋和雷峰塔)

*JavaScript和Java的区别:

>JavaScript代码可以直接在浏览器执行,而Java必须先经过编译才能执行

>JavaScript是弱类型语言,Java是强类型语言

强类型语言:要求变量的使用严格符合定义。(例如:变量声明为INT类型,装载其他类型例如String类型就会报错)。编程时痛苦,调BUG时舒服

弱类型语言:不要求变量的使用严格符合定义。(例如:变量声明后储存数字可以,储存字符串也可以)。编程时舒服,调BUG时痛苦

JavaScript示例代码

<html>

<head>

<script>

var sum = 0;

for(var i = 1; i <= 100; i++) {

sum += i;

}

alert(sum);

</script>

</head>

<body>

</body>

</html>

2、JavaScript和HTML的结合方式

l 两种使用方式

>内部使用

*<script type=”text/javascript”>JavaScript的代码</script>

>外部引用

*<script type=”text/javascript” src=”javascript文件路径”></script>

*外部引用时script标签内不能有script代码,即使写了也不会执行,会被覆盖

注意:<script>标签写在任意地方都可以,但是要注意HTML和JAVASCRIPT的加载顺序

扩展:

如果JavaScript代码没有用到任何的HTML元素,那么放在哪里都可以

如果JavaScript代码用到了某个HTML元素,那么必须保证该HTML元素先加载。

3、JavaScript语法及使用(重点)

3.1、注释

*单行注释

//

Myeclipse快捷键 ctrl+shift+c

*多行注释

/* */

Myeclipse快捷键 ctrl+shift+/

取消: ctrl+shift+\

3.2、变量
3.2.1、变量简述

*标示内存中的一块空间,用于存储数据,数据是可变的

*格式:

var 变量名 = 变量值;

JavaScript中的变量声明可以用var关键字(不用var声明的都是全局变量)

变量的数据类型分为:原始数据类型

引用数据类型

3.2.2、原始数据类型

类似于JAVA中的基本数据类型。(所有的值存在于内存栈区,大小固定,用于速查)

string

字符串类型

“”和’’都表示字符串

boolean

布尔类型

true,false

number

数字类型

整数、小数和NaN(Not a Number)

NaN!=NaN 

Null

空,对象的占位符

表示引用类型的对象不存在

一般用于进行废除对象。(即每当一个对象不用时,手动设置其为空,在函数结束或者其他情况,无用存储单元收集程序会将其回收)

undefined

值未定义。即声明变量未赋值,系统会自动赋值undefined

变量声明未赋值时使用/对象的属性未赋值时使用 都会出现undefined

Undefined是一个默认的值

但如果变量 未声明 就使用,JavaScript会报 变量未定义并截停代码。

例如:alert(str);//JavaScript代码在此行停止解析运行,并抛出 变量str未定义 的错误

undefined容易和 变量未声明就使用  混淆

变量声明未定义:

var str;

alert(str);//undefined

变量未声明就使用:

alert(aaaccc);//报错,并且截断JAVASCRIPT代码

undefined==undefined

注:变量就像一个盘子,什么都能盛装。

变量值的类型可以用typeof()来判断。例如:var str=”aa”;alert(typeof(str));//string

变量的大小写是敏感的,yy和YY不是一个变量。

为什么 typeof 运算符对于 null 值会返回 "Object"。这实际上是 JavaScript 最初实现中的一个错误,然后被 ECMAScript 沿用了。现在,null 被认为是对象的占位符,从而解释了这一矛盾,但从技术上来说,它仍然是原始值。

undefined是从null派生出来的,因此你在判断时 null==undefined得到的结果是true

3.2.3、引用数据类型

引用类型通常叫做类(.class),遇到引用值,所处理的就是对象。但从传统意义上来讲,JavaScript并无真正的类。

例如:var obj = new Object();//由java转来的工程师写的

var obj = new Object;//由JS工程师写的

上下两个效果等价

对象定义:由new关键字加上要实例化的对象名进行创建。

例如:var flag = new Boolean(“false”);

Alert(flag);//true

常用对象:

String,Number,Boolean,Array,Date,Math,RegExp

注:instanceof可以用来判断对象是否属于某类型。返回true和false .例如:

var str = new String();

Alert(str instanceof String);//true

Alert(str instanceof Object);//true

Alert(str instanceof Array);//false

3.2.4、类型转换(转出来的都是原始数据类型的值)

1、 转换成字符串

boolean,string,number 它的原始值其实是一个伪对象,在JS中有Boolean,String,Number这样的对象,可以直接通过原始值调用其toString()方法来转换成字符串。

例如:

var flag = true;

alert(flag.toString());

var num = 10;

alert(num.toString());

开发中一般不使用,一般使用 + 运算符 加上一个字符串的形式来转换字符串。

例如:var num =10;

alert(num+””);

2、 字符串转换成数字

parseInt(string); 把string按照字面值 解析为number类型的值并返回,整数型(小数部分截掉不要)

如果string某一个字符无法按字面值解析为数字,那么从该字符开始往后截掉不要

如果string第一个字符无法被解析为number,那么返回NaN

parseFloat(string); 把string按照字面值 解析为number类型的值并返回,浮点型

如果string某一个字符无法按字面值解析为数字,那么从该字符开始往后截掉不要

如果string第一个字符无法被解析为number,那么返回NaN

3、 强制类型转换(了解)

Boolean(value) - 把给定的值转换成 boolean 型; 

若value值存在或有意义,则为true;

若value值不存在或者无意义,则为false。

Number(value) - 把给定的值转换成数字(可以是整数或浮点数)。

string:字面值若能解析为数字,则正常转换。如果字面值有不能解析为数字的字符,则返回NaN

boolean:true转为1,false转为0

null:转为0

undefined:转为NaN

String(value) - 把给定的值按照 字面值 转换成字符串; 

以上三种强制类型转换方法,返回的值均为原始数据类型的值

3.3、运算符
3.3.1、算术运算符

+符号

l 算术运算加(无字符串出现,把其他值强转为number类型进行加法运算)

l 字符串连接符(其中有一项必须是字符串)

l Number强转(其他类型强转number):

例如:var str = +"11";

Var str = Number(“11”);

上下两个代码是完全等价的

-符号

l 算术运算减(会把其他值强转为number类型进行减法运算)

l Number强转(其他类型强转number,区别于+,都是负数):

例如:var str = -"11";

Var str = -Number(“11”);

上下两个代码是完全等价的

,

3.3.2、比较运算符(重点)

==  逻辑等。比较值

=== 全等。  比较值和类型。如果值和类型都相同,则为true;值和类型有一个不同,则为false

!= 不等。比较值.值不相同,true。值相同false

!== 不全等。比较值或比较类型,如果值和类型都相同,则为false;值和类型有一个不同,则为true

练习:

var x=8;

alert(x==8);

alert(x===8);

alert(x=="8");

alert(x==="8");

alert(x!=8);

alert(x!=1);

alert(x!==8);

alert(x!==1);

alert(x!="8");

alert(x!="1");

alert(x!=="8");

alert(x!=="1");

3.3.3、逻辑运算符

&& 逻辑与

|| 逻辑或

! 非

开发中以上逻辑运算符经常和if语句连用。

在IF或其他表达式中 使用以上逻辑运算符,最终都会用boolean类型运算,若不是boolean类型,则进行强转。

注:除!外不支持alert

逻辑运算符中不包含& ,  js中的&是位运算符

3.4、流程控制语句

对程序运行流程控制的表达式

3.4.1、判断语句(重点)

IF语句

if(条件){

}else{

}

练习:以下代码输出结果为:

var a=15;

if(a=15){

alert(15);

}else{

alert(“else”);

}

A. 15

B. Else

1、If里面  a=15

2、A就赋值成15

3、If(15)-----àif(true)

注:若写= 则为赋值。

IF条件中赋值会先为变量赋值,后将赋值后变量的值强转为boolean进行运算。

BUG调试一般用firebug即可

Switch语句

switch(n)

{

case 1:

执行代码块 1

break

case 2:

执行代码块 2

break

default:

如果n即不是1也不是2,则执行此代码

}

Switch会对值和值的类型进行比较(全等比较)

3.4.2、循环语句

普通for循环:(常用)

for(var i=0;i<=8;i++){

// 循环体

}

和JAVA中仅有的区别:

JavaScript中定义变量用var关键字

for..in循环: (不常用)

类似于Java的增强for循环(但有本质区别)

For...In 声明用于对数组或者对象的属性进行循环操作。

for ... in 循环中的代码每执行一次,就会对数组的元素进行一次操作。

for(var 变量 in 对象或数组){

// 循环体

}

区别于Java:

遍历数组时,其中遍历变量代表的是数组的下标(和属性)。

例如:

数组遍历:

var p=[1,2,3];

for(var i in p){

alert("数组下标:"+i);

alert("数组元素:"+p[i]);

}

3.5、对象
3.5.1、Number对象(了解)

*var num = 10;//伪对象,值是原始数据类型

*var num = new Number(10);//值是引用数据类型,如果省略构造参数,默认为0

*var num = Number(10);//强转,伪对象,值是原始数据类型

Number属性:

valueOf()

返回一个 Number 对象的基本数字值。

3.5.2、Boolean对象(了解)

*var flag = false;//伪对象

*var flag = new Boolean(false);

*var flag = Boolean(false);

注:如果构造函数省略参数,或者设置为 0、-0、null、""、false、undefined 或 NaN,则该对象设置为 false。否则设置为 true(即使 value 参数是字符串 "false")。

3.5.3、String对象

* var str = "abc";//伪对象

* var str = new String("abc");//如果省略,默认为空字符串

*var str = String("abc");

String属性:

length

字符串的长度

String方法:

charAt(index)

返回指定位置的字符

concat(str1,str2,str3….)

连接字符串,并返回连接后结果

indexOf(searchvalue,fromindex)

检索字符串

replace(regexp,replacement)

替换字符串

只能替换第一次出现的字符串。

若想替换多次出现的字符串,请使用正则。

例如:

str.replace(/a/g, "f");//替换所有的a为f

【java中有replace和replaceAll两个方法,replace是用于替换单个字符的练习方法,replaceAll是开发中结合正则表达式用于替换指定规则字符的方法。

split( separator)

根据分隔符分割字符串为数组

substr(start,length)

截取字符串

从哪开始,截取长度

substring(start,stop)

截取字符串

从哪开始,到哪结合(包含开始不包含结束)

toLowerCase()

把字符串转换为小写

toUpperCase()

把字符串转换为大写

注:以上方法均不会对原有字符串进行更改

3.5.4、Array对象(重点)

* js的数组对象

* var arr = [1,2,3];//数组长度为3,元素分别为1,2,3

* var arr = new Array();数组长度默认为0

* var arr = new Array(4); 数组长度是4,相当于开辟了长度为4的空间,每个元素是undefined。(仅在显示数组时进行处理,undefined为了方便显示变成了空字符串形式,其值本质仍然是undefined)

* var arr = new Array(1,2); 数组长度为2,数组元素是1,2

Array属性:

length

数组的长度

*JavaScript和Java中数组的区别:

1、数组的长度是可变的

2、数组元素可以是任意类型

练习:以下代码打印结果为:

var arr1 = new Array(4);

arr1[10]=5;

alert(arr1.length);

A.4

B.10

C.11

D.undefined

var arr1 = new Array(4);

arr1[10]=5;//arr1[4]=undefined;arr[5]=undefined...arr[9]=undefined;

alert(arr1.length);

思考:以下代码打印结果依次为:

var arr1 = new Array();

arr1[1]=10;//arr[0]=undefined;  长度为2了

arr1["name"]="jerry";

for(var i=0;i<arr1.length;i++){

alert(arr1[i]);

}

A.undefined,10

B.10

C.10,name

D.undefined,10,name

注:arr1[“key”]=value;这种形式将不再作为数组的元素新增,而是作为数组对象的属性。所以length只能统计元素个数,不能统计属性。可以通过for..in循环可以取出

Array方法

concat(arr1,arr2,arr3…..)

连接两个或更多的数组,并返回连接后的结果。

对调用的数组没有任何影响。

join(分隔符)

转化成字符串返回

对调用的数组没有任何影响。

pop()

删除并返回数组的最后一个元素

如果数组已经为空,则 pop() 不改变数组,并返回 undefined 值

shift()

删除并返回数组的第一个元素

如果数组是空的,那么 shift() 方法将不进行任何操作,返回 undefined 值

push(element1,element2,…..)

向数组末尾添加一个或者多个元素,并返回数组新长度

unshift(element1,element2,…..)

向数组开头添加一个或者多个元素,并返回数组新长度

不建议使用,因为部分浏览器不兼容该方法

reverse()

颠倒数组中元素的顺序。物理翻转

sort(可选排序函数)

对数组的元素进行排序

排序实现实例:

function sortNumber(a,b)

{

return a - b

}

3.5.5、Date对象

* var date = new Date(); 当前的系统时间(本地时间)

* var date = new Date(毫秒值);设置的时间

Date方法

toLocaleString()

根据本地的日期格式转化成字符串

getDate()

返回一个月中的某一天

getDay()

返回一周中的某一天(0-6)0代表周日

getMonth()

获取月份(0-11)0代表1月

getFullYear()

获取年

getTime()

获取毫秒数

setTime()

通过毫秒数设置日期

parse(datestring)

解析字符串,返回毫秒数

Date.parse(“2005/12/31 17:07:07”);

Date.parse(“2005/12/31”);

Date.parse("7/8/2013 17:07:07");

Date.parse("Jul 8,2011 17:07:03");

Date.parse(“2012-12-31T07:07:07”);IE10支持

作业:清空数组中的所有元素
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>homework.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> </head>
<script type="text/javascript">
var arr=[1,2,3,4];
while(arr.length!=0){
arr.shift();
}
alert(arr);
</script>
<body> </body>
</html>

JAVA Web day02--- Android小白的第二天学习笔记的更多相关文章

  1. 2019最新WEB前端开发小白必看的学习路线(附学习视频教程)

    2019最新WEB前端开发小白必看的学习路线(附学习视频教程).web前端自学之路:史上最全web学习路线,HTML5是万维网的核心语言,标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次 ...

  2. Android开源项目SlidingMenu本学习笔记(两)

    我们已经出台SlidingMenu使用:Android开源项目SlidingMenu本学习笔记(一个),接下来再深入学习下.依据滑出项的Menu切换到相应的页面 文件夹结构: watermark/2/ ...

  3. AS开发实战第二章学习笔记——其他

    第二章学习笔记(1.19-1.22)像素Android支持的像素单位主要有px(像素).in(英寸).mm(毫米).pt(磅,1/72英寸).dp(与设备无关的显示单位).dip(就是dp).sp(用 ...

  4. #Spring实战第二章学习笔记————装配Bean

    Spring实战第二章学习笔记----装配Bean 创建应用对象之间协作关系的行为通常称为装配(wiring).这也是依赖注入(DI)的本质. Spring配置的可选方案 当描述bean如何被装配时, ...

  5. Docker技术入门与实战 第二版-学习笔记-10-Docker Machine 项目-2-driver

    1>使用的driver 1〉generic 使用带有SSH的现有VM/主机创建机器. 如果你使用的是机器不直接支持的provider,或者希望导入现有主机以允许Docker Machine进行管 ...

  6. Docker技术入门与实战 第二版-学习笔记-8-网络功能network-3-容器访问控制和自定义网桥

    1)容器访问控制 容器的访问控制,主要通过 Linux 上的 iptables防火墙来进行管理和实现. iptables是 Linux 上默认的防火墙软件,在大部分发行版中都自带. 容器访问外部网络 ...

  7. 《Linux内核分析》第二周学习笔记

    <Linux内核分析>第二周学习笔记 操作系统是如何工作的 郭垚 原创作品转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com/ ...

  8. Linux内核分析第二周学习笔记

    linux内核分析第二周学习笔记 标签(空格分隔): 20135328陈都 陈都 原创作品转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.co ...

  9. Java 面试/笔试题神整理 [Java web and android]

    Java 面试/笔试题神整理 一.Java web 相关基础知识 1.面向对象的特征有哪些方面 1.抽象: 抽象就是忽略一个主题中与当前目标无关的那些方面,以便更充分地注意与当前目标有关的方面.抽象并 ...

随机推荐

  1. C#中REF和OUT的区别

    在C# 中,既可以通过值也可以通过引用传递参数.通过引用传递参数允许函数成员更改参数的值,并保持该更改.若要通过引用传递参数, 可使用ref或out关键字.ref和out这两个关键字都能够提供相似的功 ...

  2. C# 发送HttpWebRequest获得网络图片的大小、尺寸

    可以通过HttpWebRequest的方式发送一个网络图片的请求,再通过HttpWebResponse接收返回的数据,分析数据流得到图片的大小以及尺寸,代码如下: /// <summary> ...

  3. 查看cpu

    使用系统命令top即可看到如下类似信息: Cpu(s):  0.0%us,  0.5%sy,  0.0%ni, 99.5%id,  0.0%wa,  0.0%hi,  0.0%si,  0.0%st ...

  4. Provisioning Services 7.6 入门到精通系列之二:基础架构环境

    在阅读本博文之前强烈建议同学们提前了解Citrix XenDesktop和XenApp等产品,并对PVS相关产品概念架构有深入的理解.  1.1  以下是在上一章节中规划的本次测试环境的配置清单(后续 ...

  5. Avast!:小型网站最易遭受的3种黑客攻击

    avast是捷克研发的杀毒软件,从网站上找到一篇avast关于网站安全的文章,觉得颇有意思,因此想到翻译过来与大家共享.有不对之处还望大家批评指正. 一个拥有上万访问者的小型网站管理员发来一份信,向我 ...

  6. μC/OS-Ⅲ系统的资源管理

    一.各种资源管理方法简介 μC/OS-Ⅲ系统中提供了一些基本方法用于管理共享资源(典型的共享资源有:变量.数据结构体.RAM中的表格.IO设备中的寄存器等).资源共享方法名称及适用范围如下表所示. 资 ...

  7. APIJSON,让接口见鬼去吧!

    我: APIJSON,让接口见鬼去吧! https://github.com/TommyLemon/APIJSON 服务端: 什么鬼? 客户端: APIJSON是啥? 我: APIJSON是一种JSO ...

  8. lucene中Field.Index,Field.Store详解

    lucene在doc.add(new Field("content",curArt.getContent(),Field.Store.NO,Field.Index.TOKENIZE ...

  9. 嵌入式Linux的调试技术

    本节我们研究嵌入式Linux的调试技术,对于复杂的Linux驱动及HAL等程序库,需要使用各种方法对其进行调试.刚开始讲了打印内核调试信息:printk,这个函数的用法与printf函数类似,只不过p ...

  10. HTML5资料

    1 Canvas教程 <canvas>是一个新的用于通过脚本(通常是JavaScript)绘图的HTML元素.例如,他可以用于绘图.制作图片的组合或者简单的动画(当然并不那么简单).It ...