JS

注意：JS加法运算

var num1 = parseFloat(value1);
var num2 = parseFloat(value2);
var total = num1 + num2;

在js里面,如果你直接写+号的话,JS会以为你是把两个字符串相加

JavaScript-打开新窗口（window.open）

open() 方法可以查找一个已经存在或者新建的浏览器窗口。

语法：

window.open([URL], [窗口名称], [参数字符串])

参数说明:

URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。
窗口名称：可选参数，被打开窗口的名称。
    1.该名称由字母、数字和下划线字符组成。
    2."_top"、"_blank"、"_self"具有特殊意义的名称。
       _blank：在新窗口显示目标网页
       _self：在当前窗口显示目标网页
       _top：框架网页中在上部窗口中显示目标网页
    3.相同 name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同。
   4.name 不能包含有空格。
参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。

参数表:

例如:打开http://www.imooc.com网站，大小为300px * 200px，无菜单，无工具栏，无状态栏，有滚动条窗口：

<script type="text/javascript"> 
　　window.open('http://www.imooc.com','_blank','width=300,height=200,menubar=no,toolbar=no, status=no,scrollbars=yes')
</script>
====================================================================================
JavaScript-关闭窗口（window.close）

close()关闭窗口

用法：

window.close();   //关闭本窗口

或

<窗口对象>.close();   //关闭指定的窗口

例如:关闭新建的窗口。

<script type="text/javascript">
   var mywin=window.open('http://www.imooc.com'); //将新打的窗口对象，存储在变量mywin中
   mywin.close();
</script>

注意:上面代码在打开新窗口的同时，关闭该窗口，看不到被打开的窗口。

<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk"/>
<script type="text/javascript">
    function openWindow(){
    // 新窗口打开时弹出确认框，是否打开
    var opencfm=confirm("r u sure?");
    if(opencfm){
    // 通过输入对话框，确定打开的网址，默认为 http：//www.imooc.com/
        var inurl= prompt("please in put web url","http://www.imooc.com/");
        alert(inurl);
        if(inurl==null){
            inurl = 'http://www.imooc.com/';
        }
        alert(inurl);
    //打开的窗口要求，宽400像素，高500像素，无菜单栏、无工具栏。
       var x= window.open(inurl,'_blank','widht=400,height=500,toolbar=no,manubar=no');
    }
    }
</script>
</head>
<body>
   <input type="button" value="新窗口打开网站" onclick="openWindow()" />
</body>
</html>

认识DOM

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

先来看看下面代码:

将HTML代码分解为DOM节点层次图:

HTML文档可以说由节点构成的集合，三种常见的DOM节点:

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

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

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

看下面代码:

<a href="http://www.imooc.com">JavaScript DOM</a>

===========================================

通过ID获取元素

学过HTML/CSS样式，都知道，网页由标签将信息组织起来，而标签的id属性值是唯一的，就像是每人有一个身份证号一样，只要通过身份证号就可以找到相对应的人。那么在网页中，我们通过id先找到标签，然后进行操作。

语法:

 document.getElementById(“id”)

看看下面代码:

结果:null或[object HTMLParagraphElement]

注:获取的元素是一个对象，如想对元素进行操作，我们要通过它的属性或方法。

==========================================

innerHTML 属性用于获取或替换 HTML 元素的内容。

语法:

Object.innerHTML

注意:

1.Object是获取的元素对象，如通过document.getElementById("ID")获取的元素。

2.注意书写，innerHTML区分大小写。

我们通过id="con"获取<p> 元素，并将元素的内容输出和改变元素内容，代码如下:

结果:

========================================

改变 HTML 样式

HTML DOM 允许 JavaScript 改变 HTML 元素的样式。如何改变 HTML 元素的样式呢？

语法:

Object.style.property=new style;

注意:Object是获取的元素对象，如通过document.getElementById("id")获取的元素。

基本属性表（property）:

注意:该表只是一小部分CSS样式属性，其它样式也可以通过该方法设置和修改。

看看下面的代码:

改变 <p> 元素的样式，将颜色改为红色，字号改为20,背景颜色改为蓝：

<p id="pcon">Hello World!</p>
<script>
   var mychar = document.getElementById("pcon");
   mychar.style.color="red";
   mychar.style.fontSize="20";
   mychar.style.backgroundColor ="blue";
</script>

结果:

============================================

网页中经常会看到显示和隐藏的效果，可通过display属性来设置。

语法：

Object.style.display = value

注意:Object是获取的元素对象，如通过document.getElementById("id")获取的元素。

value取值:

看看下面代码:

控制类名（className 属性）

className 属性设置或返回元素的class 属性。

语法：

object.className = classname

作用:

1.获取元素的class 属性

2. 为网页内的某个元素指定一个css样式来更改该元素的外观

看看下面代码，获得 <p> 元素的 class 属性和改变className：

结果:

======================================

创建数组语法：

var myarray=new Array();

创建数组的同时，还可以为数组指定长度，长度可任意指定

var myarray= new Array(8); //创建数组，存储8个数据。

var mynum=new Array(65,90,88,98);

使用myarray变量存储了5个成绩，现在多出一个人的成绩，如何存储呢？

只需使用下一个未用的索引，任何时刻可以不断向数组增加新元素。

myarray[5]=88; //使用一个新索引，为数组增加一个新元素

一维数组的表示: myarray[ ]
二维数组的表示: myarray[ ][ ]
注意: 二维数组的两个维度的索引值也是从0开始，两个维度的最后一个索引值为长度-1

1. 二维数组的定义方法一

var myarr=new Array();  //先声明一维 
for(var i=0;i<2;i++){   //一维长度为2
   myarr[i]=new Array();  //再声明二维 
   for(var j=0;j<3;j++){   //二维长度为3
   myarr[i][j]=i+j;   // 赋值，每个数组元素的值为i+j
   }
 }

2. 二维数组的定义方法二

var Myarr = [[0 , 1 , 2 ],[1 , 2 , 3]]

3. 赋值

myarr[0][1]=5; //将5的值传入到数组中，覆盖原有值。

说明: myarr[0][1] ,0 表示表的行，1表示表的列。

 var marry= new Array();
for(var i=0;i<3;i++){
    marry[i]= new Array();
    for(var j=0;j<5;j++){
        marry[i][j]=i*j;
        document.write("marry["+i+"]["+j+"] : "+ marry[i][j]+"<br/>");
    }
}
==condition=======================================
switch(表达式)
{
case值1:
  执行代码块 1
  break;
case值2:
  执行代码块 2
  break;
...
case值n:
  执行代码块 n
  break;
default:
  与 case值1 、 case值2...case值n 不同时执行的代码
}
注意：1.Switch必须赋初始值，值与每个case值匹配。满足执行该 case 后的所有语句，并用break语句来阻止运行下一个case。如所有case值都不匹配，执行default后的语句。
　　　2.注意:记得在case所执行的语句后添加上一个break语句。否则就直接继续执行下面的case中的语句


但是它保证循环体至少被执行一次。因为它是先执行代码，后判断条件，如果条件为真，继续循环。

do...while语句结构：

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

在while、for、do...while、while循环中使用break语句退出当前循环，直接执行后面的代码。

格式如下：

for(初始条件;判断条件;循环后条件值更新)

{

　　if(特殊情况)

　　{

　　　　break;

　　}

　　循环代码

}

继续循环continue

continue的作用是仅仅跳过本次循环，而整个循环体继续执行。

语句结构：

for(初始条件;判断条件;循环后条件值更新)
{
  if(特殊情况)
  { continue; }
 循环代码
}

上面的循环中，当特殊情况发生的时候，本次循环将被跳过，而后续的循环则不会受到影响

=============================================

定义函数

如何定义一个函数呢？看看下面的格式：

function  函数名( )
{
     函数体;
}

function定义函数的关键字，“函数名”你为函数取的名字，“函数体”替换为完成特定功能的代码。

我们完成对两个数求和并显示结果的功能。并给函数起个有意义的名字：“add2”，代码如下：

<script type="text/javascript">
  function add2(){
    sum = 3 + 2;
    alert(sum);
  }
  add2();
</script>

-----------------------------------------------

函数调用

函数定义好后，是不能自动执行的，需要调用它,直接在需要的位置写函数名。

第一种情况:在<script>标签内调用。

  <script type="text/javascript">
    function add2()
    {
         sum = 1 + 1;
         alert(sum);
    }
  add2();//调用函数，直接写函数名。
</SCRIPT>

第二种情况:在HTML文件中调用，如通过点击按钮后调用定义好的函数。

<html>
<head>
<script type="text/javascript">
   function add2()
   {
         sum = 5 + 6;
         alert(sum);
   }
</script>
</head>
<body>
<form>
<input type="button" value="click it" onclick="add2()">  //按钮,onclick点击事件，直接写函数名
</form>
</body>
</html>

注意:鼠标事件会在后面讲解。

有参数的函数

上节中add2()函数不能实现任意指定两数相加。其实，定义函数还可以如下格式：

function 函数名(参数1,参数2)
{
     函数代码
}

注意:参数可以多个，根据需要增减参数个数。参数之间用(逗号，）隔开。

函数返回值

function add2(x,y)
{
sum = x + y;
return sum; //返回函数值,return后面的值叫做返回值。
}

============================

event:JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。

主要事件表:

onclick

onmouseover

onmouseout:

onchange:

　　通过改变文本框的内容来触发onchange事件，同时执行被调用的程序。

onselect:

选中事件，当文本框或者文本域中的文字被选中时，触发onselect事件，同时调用的程序就会被执行。

onfocus:

onbler:

　　onblur事件与onfocus是相对事件，当光标离开当前获得聚焦对象的时候，触发onblur事件，同时执行被调用的程序

onload:

事件会在页面加载完成后，立即发生，同时执行被调用的程序。
注意：1. 加载页面时，触发onload事件，事件写在<body>标签内。

2. 此节的加载页面，可理解为打开一个新页面时。
如下代码,当加载一个新页面时，弹出对话框“加载中，请稍等…”。

运行结果：

onunload:

卸载事件（onunload）

当用户退出页面时（页面关闭、页面刷新等），触发onUnload事件，同时执行被调用的程序。

注意：不同浏览器对onunload事件支持不同。

如下代码,当退出页面时，弹出对话框“您确定离开该网页吗？”。

posted @ 2017-03-21 14:33 charles999 阅读(200) 评论(0) 编辑收藏举报

刷新页面返回顶部

charles999

JS

注意：JS加法运算

JavaScript-打开新窗口（window.open）

认识DOM

通过ID获取元素

改变 HTML 样式

控制类名（className 属性）

继续循环continue

定义函数

-----------------------------------------------

函数调用

卸载事件（onunload）

公告