JavaScript入门基础教程js入门+和数据类型介绍_第1页
JavaScript入门基础教程js入门+和数据类型介绍_第2页
JavaScript入门基础教程js入门+和数据类型介绍_第3页
JavaScript入门基础教程js入门+和数据类型介绍_第4页
JavaScript入门基础教程js入门+和数据类型介绍_第5页
已阅读5页,还剩6页未读 继续免费阅读

下载本文档

版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领

文档简介

1、display:none;display:block;display:inline;overflow:hidden;overflow:scroll;overflow:auto;overflow-x:overflow-y:设置水平滚动条设置垂直滚动条昨日回顾position :定位position:static;position:absolute; 设置元素为绝对定位1、相对于具有定位方式为absolute、relative的最近父元素进行定位;如果没有这样的父元素,相对于文档左上角。2、元素设置为绝对定位后,其他的元素会填充其位置。3、一个行元素设置为绝对位后会自动变为块元素。position

2、:relative;1、相对定位相对于本身在原文档中的位置2、元素设置为相对定位后,其后的元素不会填充其位置position:fixed;1、元素设置为固定位置后,相对于浏览器窗口左上角2、元素设置为固定定位后,其后元素会来填充其位置当一个元素仅设置定位方式时,元素的位置默认不变,只有当为left、top、right、botom设置值时,元素才会进行定位如果想让元素实现动画效果,元素必须设置为相对定位或绝对定位display:设置元素 的 显示方 式设置元素不显示将元素调置为块元素将元素设置为行元素设置元素内容超出元素的范围时隐藏清除内部元素的浮动设置滚动条处理浏览器兼容性:初始化使用通用的属

3、性CSS hack针对不同浏览器书写不同代码IE6、IE7、FireFoxCSS HackF写顺序:Firefox IE7 IE6程序语言与标签语言的区别:标签语言,不涉及逻辑与变量 程序语言,有变量,语法结构JavaScriptJS概念:JS是一种轻量级的、基于对象、跨平台、事件驱动式、客户端脚本语言轻量级:就是只这种不需安装,浏览会内置一个JS的解释器基于对象:面对对象的纯度没有Java这种纯面向对象语言那么高class 由类产生 对象js中没有class概念却可以创建 对象跨平台:js可以运行在html、web服务器,服务器、pc、平板电脑、智能手机。 客户端脚本语言:脚本语言有两种,一

4、种是服务器端php,另一种是客户端事件驱动:事件驱动也叫事件触发,由事件触发执行某段js代码(Object)对象:计算机之外的世界,现实世界由一个物质世界,任何一个物体或事务都有与之相关的属性和行为相关联。当我们描述每一个对象时,通常会说某某某的重量,某某某的身高,某某某的年纪,某某某的微笑。这是一种很合适的逻辑,能够清楚而准确的 描述主体与附属在主体上的属性。在计算机中,程序就是人的思维,谁写的程序这个程序主是谁思维,为了计算机程序 逻辑更合理,再容易理解和使用,让程序代码更接近人的思维,就将现实世界中的对事物 的描述引入计算机世界,形一种语法结构。为什么要使用JSJS诞生最主要的原因是解决

5、浏览器数据验证的问题网面上有很绚丽的特效,滚动文字,和一些动态的内容,都是让 js形成。提高了用户 访问网站的体验,增加网站对用户的吸引。JS能作什么1、可以动态生成2、可以动态更改3、可以动态更改4、可以动态更改5、AJAX就业班)HTML元素HTML元素的内容HTML元素的属性HTML元素的CSS羊式 标签常用属性:type:定义当前文档与被引入该当的关系取值:text/javascript此脚本语言为 javascript如果省略,浏览都会默认为javascript脚本语言href:被引入外部资源language:取值 javascript/此属T被W3c弃用标签可以们于文档中任何位置,

6、强烈建议书写在标签中js的语法规则:1、js是大小写敏感的2、js每条语句后都可以使用表示语句结束,为了代码完善与强建,强烈建议每条语 言使用”;”结束JS的阻塞加载与执行效率1、HTML文档是自由而下一行一行执行的,当标签中有对js代码的引入,此请求发出后且得到答应后,才会渲染(显示)body标签中的内容2、不要将一个js分成多个文件书写,会增服务器负担,增加 http请求次数JS的引入方法1、外部引入一个script标签要么引入外部js文件,要么书写内部 js代码2、内部引入/js代码3、行内引入js的注释有二种:1、单选注释/注释内容2、间行或多行注释/*注释内容*/数据类型计算机最主的

7、功能是使用程序来处理并显示数据。程序只有两部分,一是代码,另一个是数据。在计算机信息就叫数据。数据有三种来源,用户输入,从数据库读取,程序生成。姓名:zhangsan年龄:28性别:男婚否:未婚成绩:90在js中数据分为三大类八小类基本数据类1、数值型(number)a、整型(integer) 整数例:30 20 1000 xfff(十六进制)取值:可以是任何数值1002200012743(八进制)两个特殊的值:NaN:Infinity :b、浮点型(float) 例:23.87 取值:任何小数Not a Number 不是无穷大小数45.652、字符型(string)就是使用双引号或单引号括

8、起来的一串字符例: Zhangsan zhangsan30取值:任何带引号的字符串var a=,;,20”3、布尔类型(boolean)就是表示事物两种状态:是非、对错、真假取值:true、false布尔类型让程序具有了判断能力二、特殊数据类型undefined未定义取值:undefined;null空三、复合数据类型基本数据类型的组合a、数组(array)一组有序数据组的组合例:var arrA=1,2.3,true,false, zhangsan;b、对象(object)var objA=name: zhansan;age:28,sex:男;marriaged:true;c、函数(func

9、tion)function 函数名()函数体,函数所完成功能的代码变量这个名程序主是取得数据,并进行处理。取得数据后,数据需要有一个存储的位置。 变量就是内存中临时存放数据的空间。内存中每个存放数据的空间都会有一个名子,子叫变量名。变量的定义:语法:1、var变量名;声名一个变量var是系统关系字,用于定义变量例:var name; ” |_ _ _ name= zhangsan ;2、var变量名=值;在声名变量时直接为变量赋值 (变量初始化)3、var变量名=变量;使用已有的变量为变量赋值“=”此符号叫赋值符号,将赋值符号右边的数据赋值给左边的 变量var x+yuen=200;/此种方法

10、错误变量的命名规则:1、变量名只包含字母、数字、_(下划线)2、变量名只能以字符和 开头3、变量名不能是js语言中的关键字或保留字变量命名方法匈牙利命名法变量类型+变量名例:obj Div iAge bMarriaged类型前锻示例数组aa Array布尔型bbMNc浮点型C数字)ffTa)c函数fnfnSwap整型数字)1对象ooCar正则表达式rere Pattern字符串5sUmversity变型(可以是任意 类型)VvSuper驼峰法小驼峰myFirstName大驼峰 var MyFirstName变量的类型:JS是一种弱数据类型语言,变量的类型由其所存储的数据所决定。typeof:返

11、回一个变量的类型window.alert();window对象的alert方法,作用弹出一个警告窗口,窗口显示信息window.write();window对象的 write方法,作用是在文档中输出内容mpt(para1,para1);window 对象的 prompt方法,作用是与用户进行交互,并将用户输入的数据返回整型(integer、int)对于整数据typeof会返回number1、赋值运算符=”、+=、-=、*=、/=、=二:赋值运算符例:var myname= zhangsan”+=:var n1=100;var result+=n1;等介于result=result+n1;res

12、ult=result+n1;result+n1n1-=100n1*=100n1=n1-100;n1=n1*100;n1/=100n1%=100n1=n1/100;n1=n1%100;2、数值运算符+、-、*、/、(取余或取模)var n1=30;var n2=20;var sum=n1+n2var sum=30+50; 完全使用字面值,无意义%取两个数相除的余数,主要是判断一个数是否为别一个数的整数倍,判断一个数 是否为偶数或奇3、字符运算符+字符串连接运算符主要看+”参与操作的两个操作数是否有字符型数据,如果有就将另一个数据转换为字符型进行字符连接操作如果一个字符串中包含双引号,那么这个字符

13、串需要使用单引号括起来var str1 = abcdbcd;如果一个字符串中包含单引号,那么这个字符串需要使用双引号括起来var str2=abcd bcd;如果全用js向文档中输出标签元素,需要将标签元素组织成js的字符串JS中的转译符代码输出单引号双引号&和号反斜杠n换行符r回车符t制表符b退格符f换页符转译符作用就是输出一些无法通过键盘输入的字符,和将一个功能性的符号转换掉4、比较运算符true ,、=、=、!=、=、= !=比较运算符最终的结果只有两个值:true或false,当比较的式子成立时返回当比较的式子不成立时返回false=判断两个操作数是否 相等判断两个操作数的值=:全等判

14、断两个操作数是否 全等判断两个操作数的值和类型是否同时相等!=:不全等判断两个操作是的类型或值只要有一个不等则为true条件表达式:将现实中的条件转换为计算机可以判断的式子,就叫条件表达式,条 件表达式的最终结果是一个boolean值或可以转换为 boolean值5、逻辑运算符逻辑运算符是对多个表达式进行计算&、|、!&:逻辑与真值表exp1(表达式1)exp2(表达式2)result结果expl & exp2truefalsefalseexpl & exp2falsetruefalseexp1 & exp2falsefalsefalseexp1 & exp2truetruetrue注意:当逻辑与运算符两边的表达式都为真时结果为真| :逻辑或exp1(表达式1)exp2(表达式2)result结果exp1 | exp2truefalsetrueexp1 | exp2falsetruetrueexp1 | exp2falsefalsefalseexp1 | exp2truetruetrue注意:当逻辑或运算符两边的表达式至少有一个表达式为true,结果为true!:逻辑非exp表送式result结果!exptruefalse!expfalsetrue逻辑短路:当逻辑或表达式左边的表达式结果为true时,就不会再去计算右边的表达式当逻辑与表

温馨提示

  • 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论