JavaScript从进阶到放弃

慕课网学习地址

简介：做为WEB攻城师必备技术JavaScript，本课程从如何插入JS代码开始，学习JS基础语法、语法、函数、方法等，让你掌握JS编程思路、知识的使用等，实现运用JS语言为网页增加动态效果，达到与用户交互的目的。

JavaScript能做什么？

　　1.增强页面动态效果(如:下拉菜单、图片轮播、信息滚动等)

　　2.实现页面与用户之间的实时、动态交互(如:用户注册、登陆验证等)

JS进阶篇学习什么？

　　在JavaScript入门篇中，我们学习了如何插入JS、输出内容及简单的DOM操作，JavaScript进阶篇让您进一步的了解JS的变量、数组、函数、语法、对象、事件、DOM操作，制作简单的网页动态效果。

第一部分：基础语法

1、变量：必须以字母、下划线或美元符号开头，后面可以跟字母、下划线、美元符号和数字，使用 var申明一个变量

2、运算符： += -+ *= ++ -- &&(and) ||(or) !(非)

3、数组：定义myarr=new Array()，赋值myarr[0]=values，类似于Python中的列表；数组的属性 .length

4、二维数组：定义var Myarr = [[0 , 1 , 2 ],[1 , 2 , 3]]，或者使用一维数组+for来定义

5、if条件判断

if(条件)
{条件成立时执行代码}
else if()
{条件成立时执行代码}
else
{条件不成立时执行的代码}

6、switch多重选择

switch(表达式)
{
case值1:
  执行代码块 1
  break;
case值2:
  执行代码块 2
  break;
...
case值n:
  执行代码块 n
  break;
default:
  与 case值1 、 case值2...case值n 不同时执行的代码
}

7、for循环

for(初始化变量;循环条件;循环迭代)
{     
    循环语句 
 }

8、while循环

while(判断条件)
{
    循环语句
 }

9、do...while循环

do
{
    循环语句
 }
while(判断条件)

10、Function函数，跟Python函数类似都可以传值进函数，也可以从函数中return出值

function  函数名(参数1,参数2...)
{
     函数体;
}

函数经常结合onclick事件触发

<input type="button"  value="Click Me" onclick="func()">

第二部分：事件

1、鼠标单击事件(onclick)

  <input type="button" value="点击我" onClick="openwin()"/>

2、鼠标经过事件(onmouseover)

<input name="password" type="password" onmouseover="message()">

第三部分：对象

JavaScript 中的所有事物都是对象，如:字符串、数值、数组、函数等，每个对象带有属性和方法。

对象的属性：反映该对象某些特定的性质的，如：字符串的长度、图像的长宽等；

对象的方法：能够在对象上执行的动作。例如，表单的“提交”(Submit)，时间的“获取”(getYear)等；

JavaScript 提供多个内建对象，比如 String、Date、Array 等等，使用对象前先定义，如下使用数组对象：

var objectName =new Array();  //使用new关键字定义

访问对象的属性:

objectName.propertyName

var myarray=new Array(6);//定义数组对象
var myl=myarray.length;//访问数组长度length属性

访问对象的方法：

objectName.methodName()

var mystr="Hello world!";//创建一个字符串
var request=mystr.toUpperCase(); //使用字符串对象方法

第四部分：window对象

window对象是BOM的核心，window对象指当前的浏览器窗口

window对象的方法：

第五部分：JavaScript 计时器

在JavaScript中，我们可以在设定的时间间隔之后来执行代码，而不是在函数被调用后立即执行。
计时器类型：
一次性计时器：仅在指定的延迟时间之后触发一次。
间隔性触发计时器：每隔一定的时间间隔就触发一次。
计时器方法：

//显示一个时钟
  var attime;
  function clock(){
    var time=new Date();          
    attime= time.getHours()+":"+time.getMinutes()+":"+time.getSeconds();
    document.getElementById("clock").value = attime;
  }
setInterval(clock,100)

第六部分：DOM

文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。

HTML文档可以说由节点构成的集合，DOM节点有:

1. 元素节点：上图中<html>、<body>、<p>等都是元素节点，即标签。

2. 文本节点:向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。

3. 属性节点:元素属性，如<a>标签的链接属性href="http://www.imooc.com"。

节点属性:

遍历节点树:

getElementsByName()方法

返回带有指定名称的节点对象的集合，语法：

document.getElementsByName(name)

与getElementById() 方法不同的是，通过元素的 name 属性查询元素，而不是通过 id 属性。

注意:

1. 因为文档中的 name 属性可能不唯一，所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。

2. 和数组类似也有length属性，可以和访问数组一样的方法来访问，从0开始。

getElementsByTagName()方法

返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序，语法：

document.getElementsByTagName(Tagname)

说明:

1. Tagname是标签的名称，如p、a、img等标签名。

2. 和数组类似也有length属性，可以和访问数组一样的方法来访问，所以从0开始。

区别getElementByID,getElementsByName,getElementsByTagName

以人来举例说明，人有能标识身份的身份证，有姓名，有类别(大人、小孩、老人)等。

1. ID 是一个人的身份证号码，是唯一的。所以通过getElementById获取的是指定的一个人。

2. Name 是他的名字，可以重复。所以通过getElementsByName获取名字相同的人集合。

3. TagName可看似某类，getElementsByTagName获取相同类的人集合。如获取小孩这类人，getElementsByTagName("小孩")。

如下:

<input type="checkbox" name="hobby" id="hobby1">

input标签就像人的类别。

name属性就像人的姓名。

id属性就像人的身份证。

方法总结如下:

未完待续...

posted @ 2017-02-04 18:09 Vincen_shen 阅读(180) 评论(0) 收藏举报

刷新页面返回顶部