JavaScript大杂烩9 - 理解BOM

<script type="text/javascript">
  alert(this);
  // 下面这两个可不局限于只能使用在全局作用域中，它们在任何时候获得的都是Window对象
  alert(self);
  alert(window);
</script>

var a = 10;
alert(a);
alert(window.a);

alert用于显示一段信息和一个确认按钮。
confirm用于显示一段信息，一个确认按钮和一个取消按钮。
prompt用于让用于输入一个信息。

<div id="testDiv" onclick="demo()">Click Me!</div>
<script type="text/javascript">
  function demo() {
    var result = confirm(‘确认处理div的事件吗？‘);
    if (result == true) {
      alert(‘你选择确认处理div的事件了‘);
      var name = prompt(‘请输入你的名字！‘, ‘Frank‘);
      if (name != null && name != ‘‘) {
        alert(‘Hello ‘ + name + ‘!‘);
      }
    } else {
      alert(‘你选择取消处理div的事件了‘);
    }
  }
</script>

open方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。
close方法用于关闭当前的窗口。

<div id="testDiv" onclick="demo()">Click Me!</div>
<script type="text/javascript">
  function demo() {
    open(‘http://www.google.com‘);
    alert(‘新窗口已经打开，本窗口准备关闭！‘);
    close();
  }
</script>

eval(‘var a = 10; alert(a);‘);

var timeout = setTimeout(function() {
 alert(‘timeout!‘);
}, 1000);
 
//clearTimeout(timeout);

function animation() {
  // 动画绘制...
  document.writeln(‘动画重绘了...‘);
  setTimeout(‘animation()‘, 1000);
}
// 启动动画流程
animation();

// 一般是在初始化以后启动动画的循环
(function animloop() {
    // 创建动画的推荐做法，不推荐使用setTimeout或者setInterval方法
    window.requestAnimationFrame(animloop);
    // 动画的逻辑，通常是更新窗口的内容，形成动画
    self.tick();
})();

<input type="button" value="开始计时" onclick="timeCount()" />
<input type="text" id="timetxt" size="5" />
<input type="button" value="停止计时" onclick="stopCount()" />
<script type="text/javascript">
var count = 0;
var timeID;
function timeCount()
{
  document.getElementById(‘timetxt‘).value = count;
  count++;
  // 下面的写法等同于： timeID = setTimeout(timeCount,1000);
  timeID = setTimeout(‘timeCount()‘,1000);
}
function stopCount()
{
  clearTimeout(timeID);
}
</script>

<input type="button" value="开始计时" onclick="startCount()" />
<input type="text" id="timetxt" size="5" />
<input type="button" value="停止计时" onclick="stopCount()" />
<script type="text/javascript">
var count = 0;
var timeID;
function addSecond() {
  count++;
  document.getElementById(‘timetxt‘).value = count;
}
function startCount()
{
  document.getElementById(‘timetxt‘).value = 0;
  // 下面的写法等同于： timeID = setInterval(addSecond, 1000);
  timeID = setInterval(‘addSecond()‘, 1000);
}
function stopCount()
{
  clearInterval(timeID);
}
</script>

function show(msg) {
  alert(msg);
}
var msg = ‘Hi!‘
setTimeout(function() { show(msg);}, 100);

escape方法将参数字符串编码生成可以用于URL的新字符串，比如把空格写成“%20”这种格式。“+”不被编码，如果要“+”也被编码，请用：escape(‘...‘, 1)。
unescape是 escape的反过程。解码参数中字符串成为一般字符串。encodeURI与decodeURI两个方法是替代上面这两个方法的，功能基本没太大区别，但是推荐使用后面两个。

// 推荐使用encodeURI与decodeURI
var test1 = ‘http://www.xxx.com.cn/My first/‘;
var test2 = encodeURI(test1);
document.write(test2 + ‘<br />‘);
document.write(decodeURI(test2) + ‘<br />‘);
 
var test3 = ‘?!=()#%&‘;
var test4 = escape(test3);
document.write(test4 + ‘<br />‘);
document.write( unescape(test4));

<input type="button" value="移动myWindow" onclick="moveWin()" />
<script type="text/javascript">
  myWindow = window.open(‘‘, ‘‘, ‘width=200,height=100‘);
  myWindow.document.write(‘Hello‘);
</script>
<script type="text/javascript">
function moveWin() {
  myWindow.moveTo(50,50)
}
</script>

<input type="button" value="New" onclick="newDoc()"></input>
<input type="button" value="Back" onclick="goBack()"></input>
<input type="button" value="Forward" onclick="goForward()"></input>
<script type="text/javascript">
// 当前地址
document.write(location.href);
// 输入新地址
function newDoc(){
  location.assign(‘http://www.w3schools.com/js/js_window_history.asp‘);
  // 实现相同功能的其它方式
  // location.href = ‘http://www.w3schools.com/js/js_window_history.asp‘;
  // location.replace(‘http://www.w3schools.com/js/js_window_history.asp‘);
}
// 后退到上一个地址，在这个例子中没什么意义，纯演示
function goBack(){
  history.back();
}
// 前进道下一个地址
function goForward(){
  history.forward();
}
</script>

<input type="button" value="Navigator" onclick="showBroswer()"></input>
<div id="example"></div>
<script type="text/javascript">
function showBroswer() {
  var txt = ‘<p>Browser CodeName: ‘ + navigator.appCodeName + ‘</p>‘;
  txt += ‘<p>Browser Name: ‘ + navigator.appName + ‘</p>‘;
  txt += ‘<p>Browser Version: ‘ + navigator.appVersion + ‘</p>‘;
  txt += ‘<p>Cookies Enabled: ‘ + navigator.cookieEnabled + ‘</p>‘;
  txt += ‘<p>Platform: ‘ + navigator.platform + ‘</p>‘;
  txt += ‘<p>User-agent header: ‘ + navigator.userAgent + ‘</p>‘;
  txt += ‘<p>User-agent language: ‘ + navigator.systemLanguage + ‘</p>‘;
 
  document.getElementById(‘example‘).innerHTML = txt;
}
</script>

Browser CodeName: Mozilla
Browser Name: Netscape
Browser Version: 5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.114 Safari/537.36
Cookies Enabled: true
Platform: Win32
User-agent header: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.114 Safari/537.36
User-agent language: undefined

var Sys = {};
var ua = navigator.userAgent.toLowerCase();
var s;
(s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
(s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
(s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
(s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
(s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;
 
//以下进行测试
if (Sys.ie) document.write(‘IE: ‘ + Sys.ie);
if (Sys.firefox) document.write(‘Firefox: ‘ + Sys.firefox);
if (Sys.chrome) document.write(‘Chrome: ‘ + Sys.chrome);
if (Sys.opera) document.write(‘Opera: ‘ + Sys.opera);
if (Sys.safari) document.write(‘Safari: ‘ + Sys.safari);

document.write("<p>可用高度: ")
document.write(screen.availHeight + "</p>")
document.write("<p>可用宽度: ")
document.write(screen.availWidth + "</p>")
document.write("<p>屏幕高度: ")
document.write(screen.height + "</p>")
document.write("<p>屏幕宽度: ")
document.write(screen.width + "</p>")