JS能做什么

增强页面动态效果;
实现页面与用户之间的实时,动态交互;

学习内容

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

基础语法

变量

var myname;//可以是任意类型
myname = 10;
myname += "I love JS";//和java还是很像的

逻辑与操作符

var numA,numB;
 numA=60;
 numB=70;
 if(numA>=60 && numB>=60)//没什么特别
  {
    document.write("JavaScript考核通过！"+"<br>");
  }

数组

 var myarr=new Array(); //和java一模一样

函数

function openWin(){ //函数就比较像C了,更简单
  window.open("https://www.jianshu.com/")
}

事件

<script type="text/javascript">   
     window.onunload = onunload_message;  //卸载事件 
     function onunload_message(){   
        alert("您确定离开该网页吗？");   
    }   
</script> 
<body onload="message(加载事件)">
  <form>
    <input name="鼠标点击事件" type="button" value="点击我" onclick="openWin()"/>
    <input name="鼠标经过事件" type="button" value="经过我" onmouseover="openWin()"/>
    <input name="鼠标移开事件" type="button" value="离开我" onmouseout="openWin()"/>
    <textarea name="文本框内容改变事件" cols="60" rows="5" onchange="message()" ></textarea>
    <textarea name="文本框内容选中事件" cols="60" rows="5" onselect="message()" ></textarea>
    <select name="光标聚焦事件" onfocus="message()"> 
    <input name="失焦事件" type="text" value="失去聚焦！" onblur="message()"  >
    <input name="点击事件" type="button" value="点击我" onunload="openWin()"/>
  </form>
</body>

内置对象

var date=new Date();//日期对象
var pi=Math.PI;//math对象

浏览器对象

window对象

window.open('https:www.jianshu.com','_blank','width=600px,height=400px')

window对象方法

计时器

var attime;
  function clock(){
    var time=new Date();          
    attime= time.getHours()+":"+time.getMinutes()+":"+time.getSeconds() ;
    document.getElementById("clock").value = attime;
  }
  setInterval("clock()",1000)

计时器

History对象

  var HL =  window.history.length  ;

history对象方法

Location对象
用于获取或设置窗体的URL，并且可以用于解析URL

window.location.href

location对象属性图示

属性

对象方法

Navigator对象
包含有关浏览器的信息，通常用于检测浏览器与操作系统的版本

navigator.userAgent

对象属性

screen对象
screen对象用于获取用户的屏幕信息。

window.screen.height

对象属性

DOM对象,控制HTML元素
文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。
HTML文档可以说由节点构成的集合，DOM节点有:
1. 元素节点:<html> <body> <p> 等都是元素节点,即标签
2. 文本节点: 如<li>...</li>中的JavaScript、DOM、CSS等文本
3. 属性节点:元素属性，如<a>标签的链接属性href="https://www.jianshu.com"
  节点属性
  遍历节点树
  DOM操作