[2] CSS＆javascript(基本语法及使用)
一、 CSS概述
1、CSS是什么？
* CSS (CascadingStyle Sheets)指层叠样式表
2、CSS有什么作用？
*CSS就是用来修饰HTML
3、CSS代码规范
*CSS代码一般写在<style>标签
*<style>一般放在<head>标签
*<styletype=”text/css”>CSS代码<style>
选择器名称 { 属性名：属性值；属性名：属性值；…….}
属性与属性之间用 分号 隔开
属性与属性值直接按用 冒号 连接
如果一个属性有多个值的话，那么多个值用 空格 隔开。例如： border:5px solidred;
注释：/* 注释内容*/
快捷键：
Alt+ / 提示
Crtl+shift+/ 添加多行注释
二、CSS选择器（重点）
*CSS选择器：指定了CSS样式作用于哪个HTML标签上
1、基本选择器
HTML标签选择器（优先级最低）
*就是把HTML标签名作为选择器名称
*格式： 标签名 {}
类选择器（使用最多）
*样式格式： .class名{}
*标签格式： <p class=”class名”></p>
*能设置不同标签的相同样式
Id选择器（优先级最高）
*样式格式： #id名{}
*标签格式：<p id=”id名”></p>
*有针对性地设置样式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>demo1.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">-->
<style type="text/css">
/* 注释内容*/
font {
/* HTML标签选择器 */
font-size:20px;
color:red;
}
p {
font-size:20px;
color:red;
}
.haha{
/* 类选择器 适用于 不同标签的相同样式的设置*/
color:blue;
}
#hehe{
/*Id选择器*/
color:pink;
}
</style>
</head>
<body>
<p class="haha">今天天气好晴朗，</p><font>就是风大</font>
<font class="haha">就是风大</font>
<font>就是风大</font>
<font>就是风大</font>
<font>就是风大</font>
<font id="hehe">就是风大</font>
</body>
</html>
2、扩展选择器
关系选择器（基本选择器的组合方式）
*两个或者多个选择器间存在关系
*格式：选择器1 选择器2 {}
*适用于标签嵌套
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>demo1.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">-->
<style type="text/css">
/* 注释内容*/
/*关系选择器*/
p .haha{
color:blue;
}
</style>
</head>
<body>
<p>今天天气<font class="haha">好晴朗，</font></p>
<font class="haha">你好</font>
</body>
</html>
组合选择器（基本选择器的组合方式）
*格式：选择器1,选择器2{}
*适用于多个不同标签设置相同样式
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>demo1.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">-->
<style type="text/css">
/* 注释内容*/
/*
组合选择器
选择器1,选择器2{
}
*/
font,p{
color:red;
}
</style>
</head>
<body>
<p>好晴朗</p>
<font>风真大</font>
</body>
</html>
伪元素选择器
*HTML预定义的选择器
*格式：标签名:选择器{}
*选择器名称为 HTML标签的状态。例如：a:link{}表示链接标签在未访问过 时的样式。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>demo1.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">-->
<style type="text/css">
a:LINK {
color:yellow;
}
a:VISITED {
color:pink;
}
a:FOCUS {
color:black;
}
input:FOCUS{
background-color: black;
}
</style>
</head>
<body>
<a href="#">当前页</a>
<input type="text"/>
</body>
</html>
三、HTML与CSS的结合方式（了解）
*CSS必须结合HTML来用。
*4种使用方式：
A、style属性方式（内联样式）
*适合局部修改
*<fontstyle="font-size:150px;color: red;">今天天气好晴朗</font>
B、style标签方式：（内嵌样式）
*<style></style> 存在于head标签之中的
*例如：<styletype="text/css">
font {
font-size:150px;color:red;
}
</style>
*页面的多个标签统一设置。
C、导入方式（外部样式中使用较少）
*格式：@import url("CSS文件路径");
*存在于<style>标签中
*样式可以进行合并
D、链接方式（外部样式最常用的方式）
*格式：<link rel="stylesheet"type="text/css" href="CSS文件路径"/>
*存在于<head>标签中
外部样式好处：
提升了代码的复用性，更加易于维护，从而极大提高工作效率
样式优先级：
内联样式》》内嵌样式》》外部样式（就近原则）
链接方式和导入方式区别：
1、链接方式引用的CSS会被同时加载。而导入方式引入的CSS在页面全部加载完以后才会加载，在网速较慢时会出现网页没有样式的情况。（导入方式硬伤）
2、链接方式支持JavaScript修改样式，而导入方式不支持（导入方式硬伤）
3、链接方式可以引入样式也可以做其他事情。而导入方式只能引CSS
4、链接方式导入的CSS任何浏览器都OK，而导入方式要求浏览器版本必须在IE5以上
建议使用链接方式
四、CSS布局（了解）
盒子模型（了解会用）
在进行布局前需要把数据封装到一块一块的区域内，这个区域的专业术语叫盒子。
边框（border）分为上 下 左 右。用于设置盒子边框
内边距（padding）分为上 下 左 右。用于设置元素在盒子内的位置。
外边距（margin）分为上 下 左 右。用于设置盒子的位置
![[2] CSS＆javascript(基本语法及使用)_第1张图片](http://img.e-com-net.com/image/info5/810416f436fa46c9b590797ac1c868d8.png)
漂浮属性（简单了解）
float
定位属性（简单了解）
position
----------------
一、 JavaScript概述
1、 JavaScript是什么，有什么作用？（了解）
*JavaScript是因特网上最流行的脚本语言。
*脚本语言不能单独使用，必须嵌入到其他语言中组合使用
*JavaScript不能单独使用，必须和其他语言（HTML）结合使用
*浏览器解释执行
*作用是：可以控制前端页面的逻辑操作
例如：JS可以控制CSS的样式；（一般）
JS可以对表单项进行校验（重点）
JS可以对HTML元素进行动态控制（使用较多）
*特点：
安全性（没有访问系统文件权限，无法用来做木马病毒）
跨平台性（浏览器有JS的解析器，只要有浏览器就能运行JS代码，和平台无关）
2、 JavaScript和Java的关系（了解）
ECMAScript
*JavaScript和Java一点关系都没有（雷锋和雷峰塔）
*JavaScript和Java的区别：
>JavaScript代码可以直接在浏览器执行，而Java必须先经过编译才能执行
>JavaScript是弱类型语言，Java是强类型语言
强类型语言：要求变量的使用严格符合定义。（例如：变量声明后都有一个固定的区域，int区域大小是32位）。编程时痛苦，调BUG时舒服
弱类型语言：不要求变量的使用严格符合定义。（例如：变量声明后没有一个固定的区域，任何类型的值都能放在该区域）。编程时舒服，调BUG时痛苦
| <html> <head> <script> var sum = 0; for(var i = 1; i <= 100; i++) { sum += i; } alert(sum); </script> </head> <body> </body> </html> |
二、JavaScript语法及使用(重点)
注释
*单行注释
//
Myeclipse快捷键 ctrl+shift+c
*多行注释
/**/
Myeclipse快捷键 ctrl+shift+/
变量
*标示内存中的一块空间，用于存储数据，数据是可变的
*格式：
var 变量名 = 变量值;
JavaScript中的变量声明都用var关键字
变量值的数据类型（原始数据类型和引用数据类型）
>原始数据类型:
string 字符串类型
“”和’’都表示字符串
boolean 布尔类型
true,false
number 数字类型
整数和小数
null 空，表示引用类型的对象不存在
undefined 未定义
变量声明未赋值时使用/对象的属性未赋值时使用
注：变量就像一个盘子，什么都能盛装。
变量的类型可以用typeof()来判断。例如:var str=”aa”;alert(typeof(str));//string
变量的大小写是敏感的，yy和YY不是一个变量。
为什么 typeof 运算符对于 null值会返回 "Object"。这实际上是 JavaScript最初实现中的一个错误，然后被ECMAScript 沿用了。现在，null 被认为是对象的占位符，从而解释了这一矛盾，但从技术上来说，它仍然是原始值。
>引用数据类型（了解）
即对象
例如：var obj = new Object();
常用对象：
String,Array,Date,Math,RegExp
注：instanceof可以用来判断对象是否属于某类型。返回true和false .例如：
Varstr = new String();
Alert(strinstanceof String);//true
*两种变量：
>全局变量
就是在<script>标签中定义的变量，在整个页面都有效
>局部变量
就是在函数体内定义的变量
| 练习：如下代码显示X值是多少？ var x = 4; function show(x){ x = 8; } show(x); alert("x = "+x);
|
| A.8 B.4 C.undefined |
函数（方法）
*用于代码封装，提高复用性
*格式 function 函数名(参数列表){
函数体;
return;
}
*函数定义，关键字 function
*定义参数列表时，不必使用var关键字，否则报错
*如果没有需要返回的参数，return可以不写
*函数需要调用才能执行，和Java一样。
*JavaScript不存在重载形式：
>每个JavaScript中，都存在一个数组arguments，用于存储参数列表
| 思考：如下调用方法会打印输出什么效果？ function getSum(){ return 100; } var sum = getSum; alert(sum);
|
| A. 100 B. undefined C. function getSum(){return 100;} |
*如果调用方法时忘记加()，那么会把函数对象的引用传给变量
*两种扩展函数：
>动态函数（了解会用）
通过JS的内置对象Function来动态创建
格式： new Function(参数一,参数二);
参数一是函数形参列表
参数二是函数体
>匿名函数（较常用）
没有名称的函数，函数的简化形式
格式：var str = function(参数列表){
函数体;
return;
};
运算符
算术运算符（常用）
+号除了运算外，可以作为连接符
-号除了运算外，可以作为转换符
alert(true+ 1); // 2
比较运算符（常用）
== 比较值
=== 又比较值和类型语句（流程控制语句）
流程控制语句
对程序运行流程控制的表达式
n 判断语句
IF
if(8== num){
赋值的问题，需要注意。
}else{
}
0、-0、null、""、false、undefined或 NaN，为false
否则为true
和Java中一样。
switch(n)
{
case 1:
执行代码块 1
break
case 2:
执行代码块 2
break
default:
如果n即不是1也不是2，则执行此代码
}
| 练习：以下代码输出结果为： var a=15; if(a=15){ alert(15); }else{ alert(“else”); } |
| A. 15 B. Else |
n 循环语句
For循环（较常用）
for(vari=0;i<=8;i++){
//循环体
}
增强FOR循环（不灵活，使用少，但开发中会有使用）（了解会用，工作中自己进行尝试即可）
for(变量 in 对象){
//循环体
}
*里面的变量代表下标
*使用 in关键字
*遍历数组（或对象），里面要用数组[下标]
*例如：
Vars= new Array();
s[0]=1;
s[1]=2;
for(xin s){
alert(s[x]);
}
while(表达式){
//循环体
}
对象
String对象（了解会用）
*var str = "abc";
*var str = new String("abc");
*属性：length 字符串的长度
*方法
*和java中String对象类似的方法（基本相同，需要练习）
*charAt(index) 返回指定位置的字符（常用）
*indexOf(searchvalue,fromindex) 检索字符串
*lastIndexOf() 从后向前的
*replace() 替换字符串（较常用）
*substring(start,stop) 从哪开始，到哪结合（包含开始不包含结束）
*substr(start,length) 从哪开始，截取长度
Array对象（重要）
*js的数组
*var arr = [1,2,3];
*vararr = new Array();数组长度默认为0
*var arr = new Array(4); 数组长度是4
*var arr = new Array(1,2); 数组元素是1,2
*数组的长度
*length
*数组的长度是可变的
*数组元素可以是任意类型（注意）
*方法
*concat() 链接数组或者元素都可以（较少）
*join(separator) 转化成字符串
*push() 向末尾添加一个元素，返回新的长度
Date对象（比较常用）
*var date = new Date(); 当前的时间
PS:开发工作中，时间日期的取得不是从前端JS取得，而是从服务器端取得
*toLocaleString() 根据本地的日期格式转化成字符串（了解）
*getDate() 返回一个月中的某一天（了解）
*getMonth() 获取月份（0-11）（了解）
*getFullYear() 获取年（了解）
*getTime() 获取毫秒数（比较重要）
*setTime() 通过毫秒数设置日期（比较重要）
同时也可以通过构造器设置 new Date(毫秒数);
*Date.parse(datestring) 解析字符串，返回毫秒数（重要的）
*2015-4-29 解析不了
*2015/4/29 是可以解析的
Math对象（了解）
round(x) 四舍五入
random()随机生成0~1数字
RegExp对象（重要）
*正则对象 正确的规则
*var reg = new RegExp("表达式"); （开发中基本不用）
*var reg = /^表达式$/ 直接量（开发中常用）
直接量中存在边界，即^代表开始，$代表结束
*test(string) （经常使用）符合规则返回true，不符合返回false
例如：
if(reg.test("12345")){
//
}else{
//
}
| 练习：判断字符串是否为空 var msg=””; var reg = /^\s*$/; alert(reg.test(msg)); |
全局函数
Global
浏览器内存中游离的函数，直接拿过来用。
eval() 可以解析字符串，执行里面的javascript的代码（学习JSON）（最常用）
isNaN() 是否 不是 数字 （常用）
encodeURI() 编码
decodeURI() 解码
（不用看）escape不编码字符有69个：*，+，-，.，/，@，_，0-9，a-z，A-Z
（了解）encodeURI不编码字符有82个：!，#，$，&，'，(，)，*，+，,，-，.，/，:，;，=，?，@，_，~，0-9，a-z，A-Z
（了解）encodeURIComponent不编码字符有71个：!， '，(，)，*，-，.，_，~，0-9，a-z，A-Z
三、JavaScript和HTML的结合方式（了解）
l 两种使用方式
>内部使用
*<scripttype=”text/javascript”>JavaScript的代码</script>
>外部引用
*<scripttype=”text/javascript” src=”javascript文件路径”></script>
*外部引用时script标签内不能有script代码，即使写了也不会执行
注意：<script>标签写在任意地方都可以，但是要注意HTML和JAVASCRIPT的加载顺序
<bodyonload=””> 在网页加载完毕后 做什么事
四、JavaScript的组成(了解)
JavaScript的组成
*ECMAScript (核心)
*DOM 文档对象类型
*BOM 浏览器对象类型