1. JavaScript的语法
- 区分大小写
- 弱类型变量
- 每行结尾的分号可有可无
- 括号用于代码块
- 注释的方式与C语言、Java相同
2. 变量
- JavaScript中变量是通过var关键字(variable的缩写)来声明的。
- 首字符必须是字母(大小写均可)、下划线(_)或者美元符号($)。
- 余下的字母可以是下划线、美元符号、任意字母或者数字字符。
- 变量名不能是关键字或者保留字。
3. 数据类型
- 字符串
- 数值
- 布尔值
- 数组
4. 条件语句
- 比较操作符
- 逻辑操作符
- if语句
- switch语句
5. 循环语句
- while语句
- for语句
6. 函数
div与span标记
在使用CSS排版的页面中,<div>与<span>是两个常用的标记,<div>(division)简单而言是一个区块
容器标记,即<div>...</div>之间相当于一个容器,可以容纳段落、标题、表格、图片,乃至章节
、摘要和备注等各种HTML元素。
在一般情况下div与span都是一个块,一个大的容器,当然也有其区别:
div像一个P标记,会自动换行,而span标记不会换行,横向排列
盒子模型:
一个盒子由(由里向外)content、border、padding、margin这四部分组成
元素的定位
float定位
position定位
*absolute 绝对定位
*relative 相对定位
z-index空间位置
CSS排版观念
1、将页面用DIV分块
- <div id="container">
- <div id="banner"></div>
- <div id="content"></div>
- <div id="links"></div>
- <div id="footer"></div>
- </div>
2、设计各个块的位置
--------------------------
| #container |
| #banner |
| #content #links |
| #footer |
|-------------------------
3、用CSS定位
主要就是运用position、float等来定位
-------------------------------------------------------------------------
DOM模型框架:
文档对象模型DOM(Document Object Module)定义了用户操作文档对象的接口,可以说DOM是
自HTML将网上相关文档连接起来后最伟大的创新,它使得用户对HTML有了空前的访问能力。
DOM模型中的节点
*元素节点
*文本节点
*属性节点
如<a title="css" href="http://www.baidu.com">baidu</a>
其中元素节点为a 属性节点为title="css" 属性节点href="http://www.baidu.com" 文件节点:
baidu
使用DOM:
访问节点
*getElementsTagName
*getElementById
父子关系(可以通过某一个元素遍历其它元素.hasChildNodes()-->childNodes)
节点的属性(元素.getAttribute("属性"))
创建新节点
如:var op=document.createElement("p");//新建一个P标签
var oText=document.createTextNode("这是一个故事");//创建一个文本节点
oP.appendChild(oText);//将文本节点赋给元素节点,做为其子节点
document.body.appendChild(oP);//将元素节点赋给body对象
innerHTML
该属性表示某个标记之间的所有内容,包括代码本身
该属性可以读取,也可以写
javascript事件
事件流
*冒泡型事件
*捕获型事件(IE浏览器不支持)
事件监听
*简单的通用方法 如:
- <script language="javascript">
- window.onload=function(){
- var oP=document.getElementById("myP");
- oP.onclick=function(){
- alert("我被点击了");
- }
- }
- </script>
- </head>
- <body>
- <div>
- <p id="myP">Click Me</p>
- </div>
- </body>
*IE的监听函数
- <script language="javascript">
- function fnClick(){
- alert("我被点击了");
- oP.detachEvent("onclick",fnClick);//点击一次后删除监听函数
- }
- var oP
- window.onload=function(){
- oP=document.getElementById("myP");//找到对象
- oP.attachEvent("onclick",fnClick);//添加监听函数
- }
- </script>
- </head>
- <body>
- <div>
- <p id="myP">Click Me</p>
- </div>
- </body>
*标准DOM事件
事件对象
IE浏览器中事件对象是window对象的一个属性event
如:oP.onclick=function(){
var oEvent=window.event;//将一个事件对象赋给一个变量
}
DOM标准中规定event对象必须作为唯一的参数传给事件处理函数
如:Op.onclick=function(Oevent){
//......
}
因此为了兼容两种浏览器,通常采用下面的方法
oP.onclick=function(oEvent){
if(window.event)oEvent=window.enent;
}
事件类型
对象事件绑定:如:对象.onclick=函数;
if(window.event)oEvent=window.enent;
if(oEvent.type=="click"){
//....
}else if(oEvent.type="mouseover"){....}
表格与表单
1、动态控制表格
*动态添加
如:<table id="member" ....>...</table>这么一个表格
js: var oTr=document.getElementById("member").insertRow(2);//获得表格引用并插入一行,行标为2
var aText=new Array();//新建一个数组,在数组中添加各文本节点
aText[0]=document.createTextNode("文本数据");
....
for(var i=0;i<aText.length;i++){
var oTd=oTr.insertCell(i); //为表格添加单元格
oTd.appendChild(aText[i]);//将文本节点添加到单元格中
}
*动态删除
如:<table id="member" ....>...</table>这么一个表格
js: var oTable=document.getElementById("member");
oTable.deleteRow(2);//删除一行,后面的行号自动补齐
oTable.row[2].deleteCell(1);//删除一个单元格,后面的也自动补齐
2、表单基础
-可以通过document.form集合来引用表单,例如一个name属性为“myForm1”的表单可以用
如下语句来获得:document.forms[”myForm1″],其中HTML部分为:
<form method="post" name="myForm1" action="addInfo.do">
表单元素:
<label for="name">文本</label><input ......> label给我们带来了友好的提示,我们在书写表单时应
尽量的使用label标记
控制字符个数
*单行文本框的maxlength属性,而<textarea>的字符个数要通过js来控制输入
*<textarea ... maxlength=50 onkeypress="return LessThan(this)"></textarea>
js: function LessThan(oTestArea){
//返回文本框字符个数是否符号要求的bollean值
return oTextArea.value.length<oTextArea.getAttribute("maxlength");
}
自动选择文本
*鼠标经过时自动聚焦,并且能够选中默认值以便用户直接删除
如:<input type="text" name="name" id="name" value="姓名"
onmouseover="this.focus()" onfocus="this.select()">
javascript调试与优化
1、错误与异常
-拼写错误
-访问不存在的变量
-括号不匹配
-连接错误
-混淆等号(==)与赋值(=)
2、错误调试
- try{
- .....
- }catch(exception){
- var sError="";
- for(var i in exception)
- sError+=i+":"exception[i]+"\n";
- alert(sError);
- }
分享到:
相关推荐
非常好的学习与复习的资料,讲解非常的详细!
本资源为想学后端人员的前端笔记,适合有一点基础的人观看,慎下!!! 笔记为.md格式的,跟着黑马程序员视频教程所编写的笔记,包括了一些常用的前端知识,负责后端的可以当成复习笔记复习复习
##web 相关概念回顾 1.软件架构 ...*如: html,css,JavaScript 2.动态资源:每个用户访问相同资源后,得到的结果可能不一样。称为动态资源。动态资源被访问后,需要先转换为静态资源,在返回给浏览器
用于初级java和html的复习整理笔记
本思维导图涵盖HTML、CSS所需掌握的主要应用知识,及JavaScript基础语法,是本人2020年暑假学习笔记,总计35618字。体系清晰,逻辑分明,适合已学习人群对基础知识的复习,初学者也可以以此为基础进行自己的知识体系...
HTML+CSS+JavaScript期末复习资料、幕布笔记,考点梳理,适合期末复习应对考试用。
小册以点亮技能树为主,系统梳理前端开发及其周边知识点,作为学习笔记和复习资料。 目录 编程进阶 手写系列 面试相关 计划 支持 版权信息 鸣谢 文章 持续更新,学习不止。 风格指南 文档规范 代码风格 HTML 规范 ...
题目涵盖了HTML、CSS、JavaScript的基础与进阶知识,同时也包含了React、Vue等主流前端框架的面试常见问题。每道题目均配有详细的解析,帮助读者理解题目背后的知识点和解题技巧。 适合人群: 即将参加前端岗位...
(不忘初心,html、css、javascript才是基石!) 不积跬步,无以至千里,不积小流,无以成江海。 ——— 荀子 《劝学》 不要以工作忙为借口而荒废了自己,请记住“学如逆水行舟,不进则退”。 坚持每天花10分钟左右...
谷歌师兄的leetcode刷题笔记#我对 Site1 的想法 ##好 我认为它进行得非常好,因为这是我在遵循订单时的第二次网站尝试。 成品几乎与模型相同,我只遇到了一些障碍,在宝贵的谷歌和我的老师/兄弟的帮助下很快就克服了...
程序员专用刷题 布局 永久链接 默认 / 高级 JavaScript 教学大纲 如果您是教师或对课程设计感兴趣,请参阅文档。 ...导师:艾丹费尔德曼, ...如果您需要复习,请查看 . 课程大纲 我们将深入研究 JavaS
Web_basicKnowledgeStudy介绍初级基础知识复习总结-每日一更 :thumbs_up:前端基础知识包括:JS数据结构算法,JS,ES6,HTML,CSS,HTTP与计算机网络,手撕代码等。 :grinning_face:该博客由本人自己总结,在复习过程...
Node JS CSS React记录 所看、 所思、所想复习方法:短期复习 : 5分钟 30分钟 12小时长期复习: 1、3 、5、 8、15 天 1个月 三个月结构化思维整理获取的知识信息,将其结构化,画思维导图,帮助记忆。文字信息 ——...
复习CSS 查看Github中的文件,并使用以下注释逐步完成我们在课堂上所做的工作。 确保对您不熟悉的所有CSS属性使用Google。 检查提供的样本(在other/menu )。 尝试使用示例作为指导在宽屏模式下实现粘性导航栏。2....
程序员专用刷题 课程: 导师:艾丹费尔德曼, 需要帮忙? 它将消息摘要发送给不在房间里活动的人,所以即使周围没有...的细微差别,原型继承与经典继承的比较,以及如何使用它来构建动态和复杂的 Web 应用程序。 将讨论
程序员专用刷题전력 공학도를 위한 딥 러닝 - 教学大纲 课程: 导师:艾丹费尔德曼, 需要帮忙?...它将消息摘要发送给不在房间里活动的人,所以即使周围没有人...的细微差别,原型继承与经典继承的比较,以及如何使用它来
程序员专用刷题 布局 永久链接 默认 / Silabus Grafika Komputer (kelas A) 如果您是教师或对课程设计感兴趣,请参阅文档。...它将消息摘要发送给不在房间里活动的人,所以即使周围没有人...如果您需要复习,请查看 . 课程