一：笔记
JS
JavaScript：
能够在静态的html页面实现动态效果，
解释型语言，
每次刷新网页都会执行JS代码
从上到下依次执行
当我们直接访问JS脚本的时候，返回纯文本内容
运行环境是浏览器，出现的一切安全问题，都归于“前端安全”
快速入门
JS与HTML 混编
可以出现在任何位置
简单的语句：
输出语句
alert(); # 弹窗
console.log(); # 在控制台输出
如何在html中引入JS代码
内部JS
<script>
this is JS code
</script>
外部JS
<script src="./js/test.js"></script>
变量
声明变量
var name
变量类型
Number
字符串
布尔类型
null和undefined
js的设计者希望用null表示一个空的值，而undefined表示值未定义。
数组：
数组中可以包含任意类型
var arry = [1,2,3.14,'hello',null,true]
数组的访问：arry[2] 得到 3.14
对象
是一组由键、值组成的无序集合
var person = {
name:'bob',
age:20,
tags:['js','web','mobile'],
city:'Beijing',
hasCar:true,
zipcode:null
};
对象属性的访问：person.name
条件判断
var age = 15;
if (age >=18){
alert('adult');
}else{
alert('teenager');
}
for循环
var x=0;
var i;
for(i=1; i<=100; i++){
x= x+ i;
}
x; // 5050
for ... in
for循环的变体，可以把一个对象的所有属性依次循环出来
var x = {
name:'jack',
age:20,
city:'beijing'
};
for(var key in x){
console.log(key); // 'jack','20','city'
}
while循环
var x = 0;
var y = 99;
while(y>0){
x = x+y;
y = y-2;
};
x; // 2500
do while循环
var n = 0;
do{
n=n+1;
}while (n<100);
n; // 100
函数：
定义一个函数的好处就是方便调用
函数定义如下：
function abs(x){
if (x >= 0){
return x;
}else{
return -x;
}
}
abs(x);
上述abs()函数中：
function指出这是一个函数定义
abs是函数的名称
(x)括号内列出函数的参数，多个参数以,分隔
( ... )之间的代码是函数体，可以包含若干语句
对象
通过对象来操作浏览器
window
即充当全局作用域，也代表浏览器窗口
navigator
表示浏览器的信息，最常用的属性包括：
navigator.appName 浏览器名称
navigator.appVersion 浏览器版本
navigator.language 浏览器设置的语言
navigator.platform 操作系统类型
navigator.userAgent 浏览器设定的User-Agent字符串
screen
表示屏幕的信息，常用的属性：
screen.width 屏幕宽带，以像素为单位
screen.height 屏幕高度
screen.colorDepth 返回颜色位数，如：8 16 24
location
表示当前页面的URL信息
location.port; // 8080
location.pathname; // '/path/index.html'
location.search; // '?a=1&b=2'
location.hash; // 'TOP'
DOM：文档对象模型
第一种方法：
document **非常重要**
表示当前页面，由于html在浏览器中以DOM形式表示为树形结构，document对象就是整个DOM树的根节点
var test = document.getElementById('test'); // 返回ID为'test'的节点
var trs = document.getElementById('test-table').getElementsByTagName('tr'); // 先定位ID为'test-table'的节点，再返回其内部所有tr节点
var reds = document.getElementById('test-div').getElementsByClassName('red'); // 先定位ID为'test-div'的节点，再返回其内部所有class包含red的节点
var cs = test.children; // 获取节点test下的所有直属子节点
var first = test.firstElementChild // 获取节点test下的第一个子节点
var last = test.lastElementChild // 获取节点test下的最后一个子节点
第二种方法：
querySelector()和querySelectorAll() 低版本不支持
var q1 = document.querySelector('#q1'); // 通过querySelector获取ID为q1的节点、
var ps = q1.querySelectorAll('div.highlighted > p'); // 通过querySelectorAll获取q1节点内的符合条件的所有节点
document.cookie
可以完成cookie信息的读写
alert(document.cookie);
document.cookie = "name=xxx"
事件：
用户触发事件
鼠标事件
onclick
键盘事件
form事件
事件响应
二：源码与实验
2.1：目录结构
2.2： 源码与内容展示
test.html
<html>
<head>
<title>JS test</title>
<meta charset = "utf-8">
<script>
// this is JS code
alert("hello world");
</script>
<script src="./js/test.js"></script>
</head>
<body>
<h1>
JS TEST page
</h1>
</body>
</html>
<script src="./js/test1.js"></script>
<script src="http://localhost/JS/js/test1.js"></script>
test.js
alert("this is from test.js");
test1.js
alert("this is from test1.js");
点击一次确定之后：
再次点击确定：
再次点击：
func.html
<meta charset="utf-8">
<h1> JS 函数</h1>
<script>
function abs(x){ // 计算一个数的绝对值
if (x >= 0){
alert(x);
}else{
alert(-x);
}
}
abs(-1); // 调用函数
</script>
mode.html
获取节点
<!-- HTML结构 -->
<div id="test-div">
<div class="c-red">
<p id="test-p">JavaScript</p>
<p>Java</p>
</div>
<div class="c-red c-green">
<p>Python</p>
<p>Ruby</p>
<p>Swift</p>
</div>
<div class="c-green">
<p>Scheme</p>
<p>Haskell</p>
</div>
</div>
onclick.html
<meta charset="utf-8">
<input type="button" onclick="alert(/xss/)" value="点我一下">
<input type="button" onmouseover="func()" value="鼠标移过来">
<script>
function func(){
alert("xss");
}
</script>
更多点击事件可以参考：html事件详情
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
