JavaScript 学习笔记
2018-03-17 本文已影响0人
淼_f21a
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节点有:- 元素节点:
<html> <body> <p>等都是元素节点,即标签 - 文本节点: 如
<li>...</li>中的JavaScript、DOM、CSS等文本 - 属性节点:元素属性，如
<a>标签的链接属性href="https://www.jianshu.com"
节点属性
遍历节点树
DOM操作
- 元素节点:
未完待续
- 简单的记录下这几天的学习内容,感觉JavaScript简单粗暴,挺好的
