达内web前端JS笔记课稿.docx

2015年6月份达内web前端就业班培训JS部分 前端三大基础知识： HTML：专门编写网页内容 CSS：专门设计网页样式 JavaScript：专门设计网页交互的语言（9天） ============================================================= Day1 JavaScript：专门设计网页交互的语言 交互：输入数据，程序处理数据，返回结果 什么是JavasCript： 1. 专门设计网页交互的语言 2. 运行在javaScript解释器中 3. “解释”执行 4. 互联网第一大语言：JSer ECMAScript标准：JavaScript核心语法 微软：Jscript W3C:DOM标准：专门操作HTML元素，CSS样式，事件的统一标准！ BOM：专门操作浏览器窗口的工具。没标准，由浏览器厂商自行实现 JavaScript=ECMAScript+DOM+BOM JSer最大挑战：浏览器兼容性问题 JavaScript典型用途： 1. 客户端数据计算 2. 客户端表单验证 3. 动画 JavaScript特点： 纯文本；解释执行；弱类型；基于对象 如何使用： 1. 使用浏览器自带的js解释器； F12- -控制台 光标处写脚本代码，回车执行。 Console：指代控制台：专门调试程序输出结果的窗口。 log：控制台console提示的一个功能： 向控制台输入一行日志 多行：shift+enter?换行 **JavaScript中区分大小写！** **字符串单双引号都行** 2.单独安装专门解释器软件：node.js Chrome V8 Win键+R?cmd?node 退出：两次ctrl+c 执行.js文件：1.先到cd到.js文件所在路径 2.node文件名 回车 3.随网页一同运行： 浏览器包含两种工具： 排版引擎：专门加载HTML内容和css样式 解释引擎：专门运行Js脚本 script中脚本块何时运行？随网页加载，解释执行 script中都要用js语法！ Html元素的事件属性中： 什么是事件？元素可以根据鼠标或键盘的不同操作响应不同的交互行为 html head title/title /head body script alert(hello from script); /script button onclick=alert(hello from onclick)按钮/button /body /html script解释执行，读到才执行。先读到先执行，后读到后执行。——script放置的先后顺序影响程序结构。 优化：放在body后；待网页全部加载完在实现功能，用户体验效果更佳。 一次定义，处处使用；一次修改，处处生效！ 解决：凡是重复编写的代码块，都要封装为一个方法： 方法：执行一个专门功能的一组代码的序列。 定义在head下的script中 语法：function方法名(){重用的代码块} 调用：方法名()?调用后立即执行。 **不调用不执行** 只要没反应或效果没有出来就是出错！?F12调试 查看错误原因?定位错误位置！ script脚本块中的错误，仅影响“当前脚本块”中出错位置之后的脚本执行。不影响script之外的其他元素加载或脚本块执行。Function中的错误：只有调用方法时才触发！ 页面内部脚本块问题：仅当前页面可用！ 解决：外部.js文件！ 什么是.js文件：专门保存js脚本源代码的文件。 源代码都要放到js解释器才能执行。 如何使用.js文件？2 步：1.创建.js文件，编写源代码。2.在页面中引入外部.js文件。 ECMAScript（核心语法） *区分大小写* *字符串必须用引号（单双都行）包裹* *每条语句结尾都建议有分号* 语句：让程序可以做一件事的一行命令 脚本块：多行语句的序列 程序：让计算机模拟执行人类的想法！ 注释：不会被解释执行或显示的代码说明——给程序员看的 注释也占网页流量！生产环境必须去掉！提高加载速度。 HTML注释：!---- CSS注释：/**/ Js注释：//单行注释 /*多行注释*/ *变量* 什么是变量？内存中专门存储数据的空间 程序都是在内存中运行 任何程序包括三个部分：IPO： input process output 即：输入数据 处理数据 输出数据 何时使用变量？只要在程序中临时存储数据，都要放在变量中 怎么使用变量？声明，命名，初始化和使用 声明：在内存中开辟一个存储空间 怎么声明？var 变量名； 赋值：将等号右边的数据，装入等号左边的变量中！ 如果未赋值：js默认赋值为undefined 命名规则：见名知意 保留