我的php学习第八天之javascript篇

昨日回顾

CSS定位

position：定位的类型，取值：static(静态)、fixed(固定)、relative(相对)、absolute(绝对)

定位的坐标：

Top：定位元素距离上边的距离

Bottom：定位元素距离底边的距离

Left：定位元素距离左边的距离

Right：定位元素距离右边的距离

如果只设置了定位类型，并没有指定定位的坐标，在它原来的地方(没有定位前)原封不动。

Fixed：固定定位：相对于浏览器窗口来进行定位

浏览器窗口，是一个固定大小的窗口，没有滚动条。

网页指<body>，每个网页的内容不一样，网页有滚动条。

特点：不占用空间，层级要高于普通元素，是一个块元素。

QQ浮动面板的结构图

CSS兼容性

在一个浏览器中效果正常，换到另一个浏览器就会发生错乱，这种现象叫“不兼容性”。因为不同的浏览器对CSS代码的解析不一样造成的。最容易出现兼容性问题的是：padding、margin、手形光标等。

兼容性，就是一种方法，使用该方法去调整网页去适应不同的浏览器。

通过以下三种方法来实现兼容性：

默认值设置(全局设置)
常用的不兼容的处理
CSS HACK

一般来说，出现兼容性问题的浏览器是：IE6、IE7、IE8

火狐浏览器叫标准浏览器。

浏览器市场份额统计：http://tongji.baidu.com/data/browser

IE兼容性测试软件：IETEST

一、全局样式设置

（1）清除所有的标记的内外距离

Body,ul,li,a,p,h2{margin:0px;padding:0px;}

（2）列表样式

ul,li{list-style:none;}

（3）网页中文本大小、颜色等设置

body{font-size:12px;color:#333;}

（4）标题样式

h1{padding:11px 0 0; margin-bottom:4px;font:normal 20px/30px 黑体;text-align:center;}

h2 { padding:6px 0 0; margin-bottom:4px; font:normal 20px/30px 黑体; text-align:center; }

h3{font-size:12px}

h4{font-size:12px;font-weight:normal}

（4）全局类样式

.font1{font-size:12px;}

.font2{font-size:14px;}

.clear{clear:both;}

.float1{float:left;}

.float2{float:right;}

#noline{border:none;}

.blank10{height:10px;clear:both;}

a:link,a:visited{color:#0000ff;text-decoration:none;}

a:hover{color:#ff0000;}

.red{color:#ff0000;}

.blue{color:#0000ff;}

……

二、常用兼容性的设置

1、实现网页绝对居中

在Firefox下居中用 margin:0px auto;

在IE下居中用 text-align:center;

body{

background:#F1F1F1 url(../images/bg-body.gif) repeat-x left top;

font-size:12px;

color:#444444;

text-align:center; /*实现IE中主页居中*/

}

ul,li{list-style:none;}

.box{

width:973px;

text-align:left; /*BOX中的内容恢复左对齐*/

margin:0px auto;/*Firefox居中*/

}

2、单行文本上下居中（一般用于新闻标题）

.title{height:30px;line-height:30px;}

3、实现1px高的容器

Overflow：当内容超出容器时，该怎么处理。取值：hidden(隐藏)、auto(自动)、visible(可见)、scroll(滚动)

div{

height:1px;

background-color:#0033FF;

margin:50px;

overflow:hidden; /*当内容溢出时，该如何处理：hidden(隐藏)*/

}

4、上下margin会合并，左右margin会加倍

上下margin合并的问题

当两上下的块元素，上下的两个margin会发生合并，取其中较大的一个。

解决办法：

上下两个元素，不要同时设置上下外边边，或者只设置其中一个。
通过一个空的<div>来隔开上下两个元素。

当两个加了左右margin的元素进行浮动时，左边的margin会加倍

解决方法：display:inline;

CSS HACK

针对不同浏览器书写CSS代码的过程，叫CSS HACK。CSS HACK主要针对IE浏览器。

（1）CSS属性的HACK（偶尔用一下）

*：表示可以被IE6或IE7支持

_：表示只能被IE6支持

body{

margin:0px;

padding:0px;

background-color:#ff0000; /*所有浏览器都支持*/

*background-color:#00FF00; /*IE6和IE7都支持*/

_background-color:#0000FF; /*IE6支持*/

}

（2）CSS选择器的HACK（基本上用不着）

*+html .title{height:30px;} /针对IE7认识/

*html .title{height:30px;} //IE6认识

*+html body{*background-color:#00ff00; /*IE7支持*/}

*html body{ _background-color:#0000FF; /*IE6支持*/}

JavaScript是什么

（1）JavaScript是一种轻量级、面向对象、跨平台的客户端脚本语言。

JavaScript是一种平台无关性的脚本语言，只要安装了浏览器，JS集成到了浏览器中。

浏览器是一个解释器(翻译器)，可以直接翻译HTML、CSS、JavaScript；

现实世界中所有的东西都可以看成一个对象，一个对象应具有属性和方法。所谓“属性”就指某个对象具有什么特征。比如：汽车是一个对象，汽车有颜色、什么牌子的汽车。所谓的“方法”就对象能干什么？

JS只能运行在客户端浏览器，不能运行在服务器上；

JS的源代码是可见，但PHP服务器端脚本程序，源代码在发往到客户端后，源代码不可见；

JS基础班8天课

前3天，JS的基础部分

中间2天，JS的内置对象

后3天，DOM对象

（2）JavaScript是基于事件和事件驱动的脚本语言（交互性的操作）

当鼠标放到滚动新闻上时，停止滚动；当鼠标移出新闻模块时，开始滚动

事件(条件)：鼠标放上，对就原事件是onMouseOver

动作：停止滚动，对应的JS代码是：stop();

JavaScript能做什么？

（1）表单客户端验证：是JS最基本的功能；

（2）动态的HTML(DHTML)；

（3）交互式的操作；比如：鼠标放上，停止滚动

JavaScript的历史和发展

JavaScript最初叫LiveScript，是给Netscape(网景公司) Navigator浏览器设置的客户端脚本程序。想借助于Java的流行发展起来，因此改名为JavaScript。所以，JavaScript和Java一点关系。

后台Microsoft公司把JavaScript引入到IE3.0中，因此没有授权，因此它的名称叫Jscript。

1994年，JavaScript被提升到了一个标准，ECMAScript-262标准。JavaScript和JScipt都是ECMAScript-262标准下的一个具体的应用。

常用的两个客户端方法

document.write(str)在网页中输出一个字符串

说明：

document代表当前文档(网页)，是一个文档对象；

document对象具有很多的属性和方法；

write( )是document对象的一个输出的方法；

write( )输出的内容必须放在引号中；比如：document.write(大家好)

方法和属性的主要区别是：方法名后带括号，属性不带。

举例：document.write(“大家好”)

window.alert( str )：在浏览器窗口中，弹出一个警告对话框

说明：

window代表当前浏览器窗口；

window对象具有很多的属性和方法；

alert( )是window对象的一个方法，功能是“弹出一个警告对话框”

str表示输出的内容，该内容必须是加引号的字符串；

举例：window.alert(“Welcome To GuangZhou”)

HTML文件引入JavaScript的方法

（1）嵌入式

通过<script type=“text/javascript”></script>来书写JS代码；

这个<script>标记可以放在任何地方；

这种方式不能被多个网页共享JS代码。

document.write("我是由document对象的write方法输出来的！");

window.alert("嘿嘿，我是弹出来！");

</script>

（2）外链式

格式：<script src=“js/public.js” type=“text/javascript”></script>

说明：

JS文件的扩展名是.js

这种方式可以实现多个网页共享同一个JS文件代码。

为什么网页背景没有改变？

<head>

<title>无标题文档</title>

</head>

JS文件的内容是：

document.body.bgColor = "#990000";

document.title = "HTML文件引入JS的方法";

原因：

（1）网页的执行顺序是：从上往下一行一行代码执行；

（2）<body>标记必须先出来，才能给其加bgColor属性；

（3）行内式：写到HTML元素中的JS代码

举例：<img src="images/img08.jpg" width="300" onclick="javascript:window.alert('讨厌！')" />

说明：

HTML标记与事件进行绑定，当事件发生时，干什么；

当单击图片时，弹出一个警告对话框；

onclick就是一个事件，含义：当鼠标点击时；

onMouseOver当鼠标放上时；

变量

现在世界中有很多的数据：身高、体重、年龄、学历、工资、奖金、姓名；

计算机就是来处理、存储现实数据的工具；

计算机中用一种叫“变量”的符号来表示数据；比如：name、height、age、salary、bonus、edu

变量就是一种代号，好比宾馆的“房间号”，至于“房间”中住什么人，相当于变量中存储什么样的数据；

Name=“张三”

Name=“李四”

Name=“王五”

变量是一种变化的量，也就是说，其中的内容在不断的变化；

变量是存在内存中的，变量是在内存中运行的；内存是存储变量的临时区域；

内存是由N多个小格子构成的，每个“小格子”都可以用来存储一个“变量”，网页一旦运行完毕，变量就从内存中消失了，因此，“小格子”内存永远够你用。

1、声明变量、定义变量

声明变量，使用关键字var

举例：var name; //在内存中开僻一个空间，这个空间叫name

同时声明多个变量：var name,sex,age,edu,city; //同时开僻多个房间，各个变量间用逗号隔开

2、变量名称的命名规则

1）变量名称可以包含a-z、A-Z、0-9、_(下划线)字符；

2）变量名称必须以字母或下划线开头；

错误：90az

正确：a90、_getObjectName、name

3）变量名称不能是关键字

If 、else switch for break continue case while等

4）多个单词的变量名称的命名

“驼峰式”命名：getUserName、getUserPass

“下划线”命名：get_user_name、 get_user_pass

3、给变量赋值

格式：变量名=变量值

注意：“=”不是等于的意思，而是将“=”右边的值赋给左边的变量

“＝”左边只能是一个变量名称，而不能一个计算表达式。比如：nameage = 3000+450

举例：name=“张三”

//（1）声明变量

var name,sex,age, str;

name = "周更生";

sex = true;

age = 20;

//（2）构建输出的字符串

str = name + "的年龄是" + age + "岁";

//（3）在网页中输出结果

document.write(str);

变量的数据类型

JS中变量的数据类型分两大类：

（1）基本数据类型：每个一个基本数据类型的变量，只能存储一个值

String(字符型)、boolean(布尔型)、number(数值型)、undefined(未定义)、null(空型)

（2）复合数据类型：复合数据类型的变量，至少存储一个值

Array(数组)、object(对象)、function(函数)

数值型数据

包含整型和浮点型(小数)。

JS的数值数据有一个特殊的数值NaN(Not a number)不是一个数字。一般用在，强制将其它数据类型转成数值时，转不过去时，将返回NaN。

举例：

A = 120;

A = 120.45;

A = -120;

A = .3; //相当于0.3

A = NaN;

A = 100 + 200;

//（1）强制将一个字符串转成数值型

var str = "234abc";

var num = Number(str); //Number()是将一个字符强制转成数值

document.write(num);

字符型数据类型

字符型数据是指加了单引号或双引号的字符串。

字符型数据，内外引号要保证不一致；比如str=“PHP’基础班’学习体系”

双引号内，如果要输出双引号，请使用转义字符()：

//（2）双引号内嵌套双引号

var str = "<h1>PHP"基础班"课程体系</h1>";

document.write(str);

单引号内，如果要输出单引号，请使用转义字符()

//（2）双引号内嵌套双引号

var str = "<h1>PHP'基础班'课程体系</h1>";

document.write(str);

布尔型数据类型

布尔型，就是真或假，是与否。布尔型只有两个值：true或false

举例：

Sex = true;

Sex = false;

//构建输出的结果

str = "<h2>"+name+"的基本资料如下</h2>";

str += "姓名："+name+"<br />";

str += "性别："+sex+"<br />";

str += "年龄："+age;

document.write(str);

“+”的含义有两层：

（1）如果“+”的左右都是数值时，执行“加法”运算

Var a = 10;

Var b = 20;

Var c = a + b; //30

（2）如果“+”的左右其中有一个是字符串，则执行“连接”运算

Var a = 10;

Var b = “abc”;

Var c = a + b; //c = “10abc”

“+=”的含义

Var a = 10;

Var b = “abc”

b += a; //表示：b = b + a

本文来自投稿，不代表重蔚自留地立场，如若转载，请注明出处https://www.cwhello.com/211.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

我的php学习第八天之javascript篇

昨日回顾

CSS兼容性

JavaScript是什么

JavaScript能做什么？

常用的两个客户端方法

HTML文件引入JavaScript的方法

变量

3、给变量赋值

变量的数据类型

联系我们

QQ：951076433

我的php学习第八天之javascript篇

昨日回顾

CSS兼容性

JavaScript是什么

JavaScript能做什么？

常用的两个客户端方法

HTML文件引入JavaScript的方法

变量

3、给变量赋值

变量的数据类型

相关推荐

联系我们

QQ：951076433