我的php学习第八天之javascript篇
高价值的内容是做好企业营销推广的前提，如果你对企业内容营销感兴趣的话，不妨看看MarketUP近期整理的《2023内容营销获客实战白皮书》，希望能给大家有一些实质性的帮助，预计发布400份！送完下架，赶快领取！感兴趣的朋友可以点击链接即可下载阅读：《2023内容营销获客实战白皮书》
昨日回顾
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代码。
<script type="text/javascript">
document.write("我是由document对象的write方法输出来的！");
window.alert("嘿嘿，我是弹出来！");
</script>
（2）外链式
格式：<script src=“js/public.js” type=“text/javascript”></script>
说明：
JS文件的扩展名是.js
这种方式可以实现多个网页共享同一个JS文件代码。
为什么网页背景没有改变？
<head>
<title>无标题文档</title>
<script type="text/javascript" src="js/public.js"></script>
</head>
<body></body>
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
以上就是今天分享的全部内容，希望能够对广大企业营销人员有一些营销方面的启发。作为国内知名的营销自动化平台，MarketUP通过完善的企业营销自动化系统，帮助企业实现有效和有意义的企业营销工作，更好地满足您每个目标受众端到端的需求，为您的渠道带来更多理想的潜在客户并留存孵化。如果您对我们的营销自动化产品或功能感兴趣，欢迎点击【这里】进行演示申请，我们将有专业的团队为您提供服务。
本文由MarketUP营销自动化博客发布，不代表MarketUP立场，转载联系作者并注明出处：https://www.marketup.cn/marketupblog/jianzhan/seo/17338.html
