js语言
变量：
通常就2件事：取值，赋值！
赋值：只有一种情况（模式）： 变量 = 数据（值）；
取值：形式大致有如下几种情形（以变量v1例）
var v2 = v1; //这就是取值——取得v1的值，并赋值给v2
alert( v1 ) //取得v1的值，并alert()出来
document.write( v1 ); //也可以这样：document.write( “文字。。。。” + v1 );
var v3 = v1 * 2 + 3 - 4; //取得v1的值，并进行一定的计算后，，将结果赋值给v3
var v4 = f1 (1, v1 ); //取得v1的值，并当做调用函数f1时的第2个实参数据！
数据类型：
字符串型：string
2种形式：
“字符串内容”:
其中可使用的转义符有：\” \\ \n \r \t
‘字符串内容’
其中可使用的转义符有：\’ \\ \n \r \t
数字型：number
1, 2, 3,
1.1, 2.3, 4.5
布尔型：boolean
只有2个数据（值）：true， false
对象类型：object
包括多种“对象类型”
js中的原生对象：
比如String对象， Date对象， Math对象
js中的自定义对象：
var obj1 = {name:”张三”, age: 18}
DOM中的标签对象：
var obj = document.getElementById(“dd1”);
BOM中的浏览器内部对象：
window, document. location, history, navigator, screen...
undefined：
null：
流程控制：
if分支结构
switch分支结构：
while循环语句：
do while循环：
for循环：
循环的中断：
break： 完全终止循环，退出循环语句
continue： 终止“当次”循环，进入下一次“该做的事情”（循环的开头）
函数：
function 函数名(形参1，形参2， ....){
}
函数名（实参1，实参2，.....）；
1，调用函数时，实参要跟形参“一一对应”；
2，形参就是局部变量：只能在该函数内部使用；
3，实参就是“数据”值，应该是一个有效的数据；
4，函数内部可以使用return语句，有两种用法：
return； //只是终止函数，回到函数调用位置；
return XX数据； //终止函数，并返回该数据到函数调用位置——也就是相当于得到了该数据
内置对象：
数组对象：
var arr = new Array(5, 3, 8, 2, 11, 7); //就称为“数组对象”
var len = arr.length; //得到数组长度
能遍历数组：
有如下方法：
.pop()
.push()
.shift()
.unshift()
.concat()
.reverse()
.join()
字符串对象：
var str1 = new String(“字符串内容”);
var len = str1.length; //取得长度
有如下方法：
.charAt()
.charCodeAt()
.indexOf()
.lastIndexOf()
.substr()
.substring()
.replace()
.split();
.toLowerCase()
.toUpperCase();
时间日期对象：
var d1 = new Date()
var d2 = new Date(“2015/5/6 7:8:9”);
其方法主要有：
var v1 = d1.getTime();
var v2 = d1.toLocaleString()
一堆get： .getFullYear(), .getMonth()......
一堆set： .setFullYear(), .setMonth()
Math对象：
Math.pow(), Math.abs(), Math.max(), Math.min(), Math.floor(), Math.ceil(), Math.round()
Math.random().
网页对象（DOM）
var obj = document.getElementById(“dd1”);
对该对象的“html属性”进行操作：
<标签 属性1=”值1” 属性2=”值2” >。。。。</标签>
取得某html属性值：
var v1 = obj.属性名；
给该某html属性赋值：
obj.属性名 = “一个新的数据值”;
注意：修改了一个标签的html属性，其“外观”往往也就发生变化了
对该对象的“css属性”进行操作：
<标签 style=”属性1：值1；属性2：值2；” >。。。。</标签>
取得某css属性值：
var v1 = obj.style.css属性名； //这种形式只能取得该对象的行内样式的属性值；
给该某css属性赋值：
obj.style.css属性名 = “一个新的数据值”;
注意：修改了一个标签的css属性，其“外观”往往也就发生变化了
event：
代表任何一个具体事件发生的时候的一个“事件对象”，其实也就是从中有一些可用的信息。比如：
event.clientX;
event.clientY;
event.target, event.srcElement
浏览器对象（BOM）
BOM： Browser Object Model（浏览器对象模型）：
什么叫模式：就是一种人为设定的框架结构或层次关系。
window
window.alert(), confirm(), prompt()
window.open(“abc.html”, “win1”, “width=300, height=400” )
t1 = window.setInterval(“语句”， 间隔时间)；
window.clearInterval(定时器名字t1)
t2 = window.setTimeout(“语句”， 等待时间)；
window.clearTimeout(定时器名字t2)
document
document.getXXXX() //3个get方法；
document.write()
document.body,
document.docuemntElement
document.createElement()
history
该对象代表一个浏览器窗口在关闭之前，“曾经”打开过的网页的历史记录。
它作用非常有限，几乎只用于一个操作：
在代码中实现“后退”功能——它相当于点击了浏览器的“后退”按钮。
代码就是：history.back();
示例：
page1.html中:
<a href=”page2.html” > go to page2 </a>
page2.html中：
<script>
window.onload = init;
function init(){
window.setTimeout( “f1();”, 5000);
}
function f1(){
history.back(); //后退到前一个页面(page1.htm)
}
</script>
<input type=”button” value=”不好玩，走了！” onclick=”f1(); “ />
网页的其他内容。。。
其属性有：
history.length; //获得当前浏览器窗口中有几个历史记录；
其方法有：
history.back(); //让浏览器窗口后退到上一个页面；
history.forward(); //前进；
history.go( n ); //走几步。负数表示后退，正数表示前进。比如
history.go(-1)，就是后退一步；
history.go(-2), 后退2步；
screen
代表用户当前使用的“电脑”的屏幕信息。
只有2个有点用处：
属性：
screen.width: 屏幕宽，
screen.height: 屏幕高，
其实就是“分辨率”
方法：
无；
location
代表当前网页的“地址”信息；
属性：
location.href： 代表当前网页的“地址”的完整字符串；
它是一个可取值可赋值的属性：
var v1 = location.href;
赋值：
location.href = “一个新的url地址”； //这个的作用是：让当前窗口去打开（跳转到）一个新的网页
方法：
location.assign(“一个新的url地址”); //作用同href属性进行赋值时——打开新网页；
location.reload()：重新加载当前网页——也就是刷新当前网页。
<style type="text/css">
.cc{
cursor:pointer;
text-decoration: underline;
color:blue;
}
.cc:hover{
color:red;
}
</style>
<script type="text/javascript">
function f1(){
location.href='page2.html';
}
function f2(){
location.assign('page2.html');
}
function f3(){
location.reload();
}
</script>
</head>
<body>
<script>
document.write( (new Date()).toLocaleString() );
</script>
<hr />
<a href="page2.html" >go to page2</a>
<p class="cc" onclick="location.href='page2.html'; ">go to page2</p>
<h4 onclick="f1(); ">go to page2</h4>
<h4 onclick="f2(); ">go to page2</h4>
<img src="suibian.gif" onclick="location.reload();" title="点我，会重新加载页面" />
<input type="button" onclick="f3();" value="点我，会重新加载页面" />navigator
代表“浏览器”这个“软件”的内部信息——自然只是其中的极少信息。
此对象，可以用来“区分”不同浏览器，如此而已！！！
因为不同的浏览器，会获得一些不同的信息。
我们只要据此做判断，就可以做一些“浏览器”兼容的事情。
属性：
navigator.appName: 浏览器的名字；
navigator.appCodeName: 浏览器的内部代号（名）；
navigator.appVersion: 浏览器的版本号；
navigator.userAgent： 浏览器的“较为完整的信息”；
方法：
无。
浏览器兼容性示意：
var ua = navigator.userAgent;
if ( ua 中包括 IE浏览器的特征内容 ）{
//就表明是IE浏览器，就写IE浏览器能识别的代码；
}
else if( ua 中包括 FF浏览器的特征内容 ）{
//就表明是FF浏览器，就写FF浏览器能识别的代码；
}
else if ...........
示例：
<script type="text/javascript">
window.onload = init;
function init(){
var ua = navigator.userAgent;
document.write(ua);
if( ua.indexOf('Trident') >= 0 ){//表示找到了该字符：
alert("这是IE浏览器，运行的是IE能识别的代码");
}
else if( ua.indexOf('Firefox') >= 0 ){//表示找到了该字符：
alert("这是FF浏览器，运行的是FF能识别的代码");
}
}
</script>零碎知识点：
className：
<标签 class=”CC1” id=”d1” >。。。。</标签>
var obj = document.getElementById(“d1”);
obj.className ：表示一个标签对象的“class”属性（类属性）的值；可取值，可赋值；
obj.className = “一个新的class值”; //此时，该对象的“外观”也就会受新的class所影响而改变；
innerHTML：
表示一个容器标签（双标签）的“内部”的html内容部分。
它不是一个标签属性！
但它用的时候，也同样是属性的那种语法形式！
可取值，可赋值：
<标签 id=”d1” > 原来的内容！ </标签>
var obj = document.getElementById(“d1”);
var v1 = obj.innerHTML; //结果是：”原来的内容！”
obj.innerHTML = “新的内容<br /> <hr />.....”; //此时该标签内容就变成现在设置的这些。
cssFloat，styleFloat：
这两个属性名，都属于“css属性”float在js中的名字，只是，不同的浏览器，用上述不同的写法。
<div id=”d1” style=”width:100px； padding: 10px； font-size: 20px； float: left；”>
内容。。。
</div>
则上述对象的css属性的操作代码类似这样：
var obj = document.getElementById(“d1”);
取值：
v1 = obj.style.width; //“100px”
v2 = obj.style.padding; //“10px”
v3 = obj.style.fontSize; //“20px”
if ( 是IE浏览器){
v4 = obj.style.styleFloat;
}
else{ //其他浏览器
v4 = obj.style.cssFloat;
}
赋值：
obj.style.width = “111px”;
obj.style.padding = “11px”
obj.style.fontSize = “22px”
if ( 是IE浏览器){
obj.style.styleFloat = “right”
}
else{ //其他浏览器
obj.style.cssFloat = “right”
}
2017-10-26 10:31:05 回复