第一天
由于自己学习过于草率,导致重新再走一遍学习流程的恶果,前段时间将html css 等相关前端比较基础的东西学了一遍 走一遍之后就觉得html和css就像是英语中26个大小写字母一样 是每一个web开发程序员必须懂的东西 不管是现在学习的javascript还是以后要学习的php都要将所编写的代码嵌入到我们的html文本中的 是在他上面运作 起作用的 总的来说再次走了一遍 觉得html没有太强的逻辑性 多的就是多实践多积累 将元素和属性名记到指尖中去 关键是布局的兼容性问题是一个难点 反正不管是元素或者属性 还是兼容问题就要多看,多想,多问,多找 这也是就前期学习的一点点知识做一下总结 好了下面开始javascript的 学习笔记吧
一.javascript是什么?
不管学习什么知识都要问个为什么?这也是为了以后更高效的掌握这门知识的一个好的开端
首先javascript是一种页面脚本语言(前端脚本语言)是用来改变页面样式的一种编程语言 通过使用内部函数或者自定义函数可以很方便的使页面更生动更具交互性更高效 特效实现原理:响应用户操作然后对页面的元素或者属性进行修改 在很多网站都广泛的运用了这门语言 特别是在表单控件中使用它的比较多 因为很多数据是可以在前端进行验证处理的 这也使得它提高了页面的效率.
二.编写javascript的流程
首先你想要做一些效果的时候 要现在脑海里走一遍你所要用某种方法实现这个效果的流程 javascript也是一样 这叫一个事前准备工作 这一点很重要
然后你得使用html和css将页面进行布局 页面布局就像是盖了一栋高楼 js就像是内部装了一台电梯一样 要先确定页面布局的可用性和兼容性 才能更好的发挥出js的效果
然后为了达到你的所想要的效果你得确定你要修改的是那些属性 这里就要用到js的一些找对象的方法了 我们大多都是用document.getElementById('id名').属性.='属性值' 这种方法是直接利用js的内部函数 找到元素的id名然后通过符号"."一步一步的找到属性值进行修改的 (在修改属性的过程之中一定要注意 一些问题 就是元素名最好广义化 为了兼容性问题最好不要出现什么符号之类的东西 js是比较小气的 它区分大小写 多一个或者少一个符号或者字母都会使你的效果失效 所以在编写js的过程中一定要细心 尽量不要走回头路 要做一次就做好 )
然后你得确定你在哪个事件中插入你的js代码 事件就是用户的一些操作行为 有很多种 这个也是js的内部函数已经定义好了的 具体可以参考万维网的手册 这个比较全面上面那些浏览器兼容都写得清清楚楚的
最后就开始编写你所要达到效果的js代码 代码可以放在html的body体中 可以直接放在元素中 可以放在head区域中 也可以通过外联重用的方式进行插入 在编写js的过程中 尽量是你的代码简洁有条理性 使人一眼看去一目了然的 这就要求我们 将代码细化 能赋值的就赋值 能简化的就简化 能使用函数的地方就是用函数开改变 因为达到编程目的的方法有很多种 你就要选最优最高晓的哪一种走 就像我们的编程语言一样 各有千秋 也各有优缺点 值有我们完全掌握了 就能贯通
三.学习第一个案例
这个是鼠标移入时和鼠标离开时的样式该表 这个案例就是通过两个用户触发事件改变页面样式的这么一个案例 用到了鼠标移入事件 onmouseover 和 鼠标离开区域事件onmouseout 还用到了我们 以前css学到的隐藏和显示盒子的属性 dispaly=none隐藏/dispaly=block显示 还是那句话你需要改变某个元素的样式你就要想找到哪个对象的id名 name名 或者标签名 通过符号'.'来一步一步的找到内部的属性进行改变 链接中也是可以放js的 就像"<a href="javascript:alert('aaaa');">链接</a> 点击此链接就弹出对话框来 什么元素都可以改变 包括link元素 title元素 只要拿到它就可以通过js进行修改
四.初始函数
函数的形式就像这样 function name(){} 函数在我们使用js语言中给我们带来了很大的便利 能使我们在写js语言时更高效 更具可用性 可维护性 每个函数都以一个名字 括号内部放的是形参 这个要与调用的时候的实参相对应 大括号内部就是我们要实现某个效果的js代码了 在使用函数的过程中我们需要注意的是 你有声明就要有调用 用调用就要有声明 一定要注意 还有就是函数名也是区分大小写的 一定不要缺斤少两细心地看看 在定义函数名的时候也要定义一些能够表意的一些英文 这样方便以后的维护和重用
五.获取对象的常用方法
最常用和兼容性最好的就是 document.getElementById('id名') 这个也是通过元素的id名来获取元素的但我以我以前学习过的css我绝对这种虽然兼容性好但是 在一个页面过渡的使用id的话也不是最好的选择但是在网上也查阅了相关的资源 还是这个号 回头想想也是 一般一个页面中的js效果也是比较有限的 而且这个id就像是身份证号码一样是唯一的 这点特性是比较有用的 比较精确的就找到了你想要找的对象了 而且最重要的一点就是兼容性问题 在前端的开发过程中这个兼容性确实是一个大头啊
同样当然也还有别的方法获取对象的 就像利用name值来获取对象的方式 document.getElementsByName('name名') 或者利用元素名来获取对象的 document.getElementsByTagName ('元素名') 还有一个也是比较智能但兼容性不是很好的 通过文档中的所有标签组成的一个数值然后在选取哪一个进行改变 就像这样 document.all[""]; 先找到这个标签群并赋值给某个变量 然后再通过这个变量名的第几个找出你需要改变的元素 就像是加入你所赋值的变量为 int 那么int[0]就表示匹配的第一个元素群的哪个元素 然后再通过'.'一步一步的进行查找
六.html怎么写js就这么写
也就是你要通过js来改变html的样式的时候 html是怎么写的你就怎么写 但是需要注意的是字符串要用单引号或者双引号将你的内容括起来 这个也是一样要从找对象开始做起 需要注意的是除了一个例外 那么就是在js改变元素的class属性 这个要写成className 原因是怕与js中的关键字冲突了就导致失效的恶果了
七.流程控制语句:if判断语句
这个if语句由于以前在学习c语言的时候有用到过 所以还是比较好理解的 跟c语言的使用方法是一样 就是 如果().....就.... 在编写if语句的时候一定要注意 ;好的使用 还有逻辑上的东西 不要将一个东西写死了 要不然达不到你想要的效果