JavaScript 学习笔记（二）

一、常用互动方法
二、常见事件响应
三、JavaScript内置对象

一、常用互动方法

1-1、输出内容

<script type="text/javascript"> 
    document.write("Hello！"); //内容用""括起来，""里的内容直接输出。
</script>

内容可以是是变量名，也可以直接是" "，还可以是两者的组合

<script type="text/javascript"> 
    var mystr="boy";
    document.write("Hello！" + mystr ); //内容用""括起来，""里的内容直接输出。
</script>

1-2、警告（alert 消息对话框）

也就是我们 iOS 中UIAlertController 只有一个确定按钮的情况：

<script type="text/javascript">
   alert("hello!");
</script>

1-3、确认（confirm 消息对话框）

这个是我们 iOS 中UIAlertController 最常见的 alert 提示框，一个确认，一个取消：

confirm(str);

str：在消息对话框中要显示的文本，返回值: 是Boolean值，确定返回true, 取消返回false。

 function confirmAction(){
    var mymessage = confirm("Are you Gay")       ;
    if(mymessage==true)
    {
        document.write("I am Gay");
    }
    else
    {
        document.write("I like Girl");
    }
  }

1-4、提问（prompt 消息对话框）

这个相当于 UIAlertController 中加一个 textField 一样。

prompt(str1, str2);

str1: 要显示在消息对话框中的文本，不可修改；str2：文本框中的内容，可以修改(placeholder)。点击确定返回文本框中的内容，点击取消返回 null。

function rec(){
    var score; //score变量，用来存储用户输入的成绩值。
    score = prompt("记录分数","请输入你的分数");                ;
    if(score>=90)
    {
       document.write("你很棒!");
    }
    else if(score>=75)
    {
       document.write("不错吆!");
    }
    else if(score>=60)
    {
       document.write("要加油!");
    }
    else
    {
       document.write("要努力了!");
    }
}

1-5、打开新窗口（window.open）

打开另一个新窗口，直接说就是在新窗口中打开链接

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

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

其实通常来说，直接省略后面两个，等于在新标签页中打开链接

window.open("http://www.baidu.com")

具体详细可看： HTML DOM open() 方法

1-5、关闭窗口（window.close）

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

方法 close() 将关闭有 window 指定的顶层浏览器窗口。某个窗口可以通过调用 self.close() 或只调用 close() 来关闭其自身。

只有通过 JavaScript 代码打开的窗口才能够由 JavaScript 代码关闭

注意： window.close()与document.close()的区别：前者直接关闭窗口，后者文档输入流将被关闭。

二、常见事件响应

JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。

onclick // 鼠标单击事件
onmouseover // 鼠标经过事件
onmouseout // 鼠标移开事件
onfocus // 光标聚焦事件
onblur // 失焦事件
onselect // 内容选中事件
onchange // 文本框内容改变事件
onload // 加载事件
onunload // 卸载事件

注意下面几个：

2-1、鼠标事件 ===> UIControlEvents

好比我们常用的 UIControlEventTouchUpInside

<input name="button" type="button" value="点击提交" onclick="action()" />

2-2、onfocus onblur

第一反应是 UITextField 中的几个代理事件, 但是发现像 onclick 和 onfocus 更容易混淆

onclick是在对象被鼠标点击或者选取时触发
onfocus是在对象获得焦点（“焦点”大概是接受键盘输入的意思）时触发

2-3、 unselect & onchange

针对于文本产生的事件，注意下就好

2-4、onload

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> 加载事件 </title>
<script type="text/javascript">
  function message(){
    alert("加载中，请稍等…"); }
</script>    
</head>
<body onload = "message()">
  欢迎学习JavaScript。
</body>

好比系统的HUD ，很让人想用。

三、**JavaScript内置对象 **

JavaScript 中的所有事物都是对象，如:字符串、数值、数组、函数等，每个对象带有属性和方法。重点记录下下面几个, 其他的可看 JavaScript 对象参考手册。

String
Array
Date
Math

3-1、String

用于处理文本（字符串）

初始化

var mystr = "I love JavaScript!"

charAt() 方法可返回指定位置的字符。返回的字符是长度为 1 的字符串。

stringObject.charAt(index)

indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。

stringObject.indexOf(substring, startpos)
// startops 省略代表 0

split() 方法将字符串分割为字符串数组，并返回此数组。

stringObject.split(separator,limit)
// limit 省略 代表无限制

substr() 方法从字符串中提取从 startPos位置开始的指定数目的字符串。

stringObject.substr(startPos,length)
// length 省略表示到结尾

substring() 方法用于提取字符串中介于两个指定下标之间的字符。

stringObject.substring(starPos,stopPos) 
// stopPos 省略表示到结尾

其他方法参考：JavaScript String 对象

3-2、Array

定义

var  数组名= new Array(); // 定义了一个空数组:
var 数组名 =new Array(n); // 定义时指定有n个空元素的数组：

concat() 方法用于连接两个或多个数组。此方法返回一个新数组，不改变原来的数组。

arrayObject.concat(array1,array2,...,arrayN)

join()方法用于把数组中的所有元素放入一个字符串。元素是通过指定的分隔符进行分隔的。

arrayObject.join(分隔符)

reverse() 方法用于颠倒数组中元素的顺序。

arrayObject.reverse()

slice() 方法可从已有的数组中返回选定的元素。

arrayObject.slice(start,end)
//1. 返回一个新的数组，包含从 start 到 end （不包括该元素）的 arrayObject 中的元素。
//2. 该方法并不会修改数组，而是返回一个子数组

sort()方法使数组中的元素按照一定的顺序排列。

arrayObject.sort(方法函数)

真心感觉这个要比 Oc中的数组强大方便啊，至少省略了很多事吧！
其他方法参考：JavaScript Array 对象

3-3、Date

定义

var mydate=new Date();

设置年份

mydate.setFullYear(81); //设置年份
mydate.getFullYear()； //输出年份

不同浏览器， mydate.setFullYear(81)结果不同，年份被设定为 0081或81两种情况。

获取星期

  var mydate=new Date();
  var weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
  var mynum = mydate.getDay();
  document.write("今天是：" + weekday[mynum]);

get/setTime()返回/设置时间

<script type="text/javascript"> 
    var mydate=new Date(); 
    document.write("当前时间："+mydate+"<br>"); 
    mydate.setTime(mydate.getTime() + 60 * 60 * 1000); 
    document.write("推迟一小时时间：" + mediate);
</script>

其他方法参考：JavaScript Date 对象

3-4、Math

Math对象，提供对数据的数学计算。它是一个固有的对象，无需创建它，直接把 Math 作为对象使用就可以调用其所有属性和方法。

随机数 random()

Math.random();

random() 方法可返回介于 0 ~ 1（大于或等于 0 但小于 1 )之间的一个随机数。

四舍五入round()

Math.round(x)

这个一直是在OC 中希望有的

同时还有向下去整和向上取整等多种方法，看下面两个图：

Math 对象属性

Math 对象方法

真的感觉很强大，其他具体方法参考：JavaScript Math 对象。

学习笔记来源： W3Schhool JS 教程上、慕课网。