JS变量及逻辑与循环课件.ppt

1.10 JS变量及逻辑与循环 本日内容 JS介绍与引入 JS的基本数据类型 JS的变量声明及使用 JS的基本运算符 JS的赋值运算与表达式 JS中的语句，流程控制：判断语句，循环语句 JS介绍与引入 JS介绍 JS代码就是JavaScript编写的脚本文件的代码。用单独文件保存，扩展名为.JS Javascript就是适应动态网页制作的需要而诞生的一种新的编程语言， Javascript是由 Netscape公司开发的一种脚本语言（scripting language），或者称为描述语言。在HTML基础上，使用Javascript可以开发交互式Web网页。Javascript的出现使得网页和用户之间实现了一种实时性的、动态的、交互性的关系，使网页包含更多活跃的元素和更加精彩的内容。 什么是js? 通过百度、淘宝页面可以看出js 是具有交互功能用于修改样式 列：鼠标提示框（126.com） #div1{ width:100px; height:50px; background:#9C9; border:1px solid #00C; display:none;} input type=checkbox onmouseover=div1.style.display=block; onmouseout=div1.style.display=none; / div id=div1 为了你的信息安全。。。。 /div !--id扮演div名字的作用-- JS介绍与引入 功能简介：鼠标移到input上的时候，让div显示 即div1的display变成block 鼠标移出input上的时候， 让div隐藏，即div1的display变成none 分析该js效果 事件：用户的操作 （点击，鼠标移入，鼠标移出。。。。） 如：onclick 点击事件 input type=button value=按钮 onclick=aletr(vnf); onmouseover= 鼠标移入 onmouseout= 鼠标移出 兼容性：在低版本的火狐 以及 低版本的chrome 是不兼容的 不能直接拿着元素来用，即div1不能直接拿来用 要写 document.getElementById(div1) 分析：get（获取）Element（元素） By（通过） 翻译：通过id获取元素 分析效果实现原理 样式：div的display（也可以改变其它属性，如宽度，高度，颜色等等） 事件：onmouseover onmouseout 动手编写此效果 . 代表 ‘的’ style 代表动态改变css样式 javascript的组成 Javascript由三部分组成 ECMAScript 解释器 翻译 将js翻译给计算机 ECMAScript描述了语法 类型 语句 关键字 保留字 运算符 对象 DOM document object model document DOM将网页变成js可操作的对象，赋予js操作文档的能力 BOM Brower object model window 浏览器对象模型，赋予js操作浏览器的能力 JS介绍与引入 编写js的流程 布局：html+css 属性：确定要修改的哪些属性 事件：确定用户做哪些操作（产品设计） 编写js：在事件中，用js来修改页面元素的样式 js输出两种方式 alert输出 eg: js输出两种方式 document.write输出 eg: JS的变量声明及使用 什么是变量？区分于常量； 变量：可读写的内存单元 var 变量名 = 值； //定义变量 变量名 = 值； //赋值 var是js中定义变量的关键字，也可以忽略此关键字！ 用var定义变量时也可以不赋初值 var 变量名； var str = js编程，简单容易!; //定义字符串型变量 var b = true; //定义布尔型变量 var n = 10; //数值型变量 var obj = new Object(); //复合型变量 声明 声明只是告诉系统，什么也不做 声明同时赋值 最常用的一种方式，好的编程习惯 同时声明多个变量 可以同时声明多个变量，但是不好 变量名组成 中文也可以，不能用关键字 变