javaScript额外笔记

--------------------------------------------------------Part 1
javascript:脚本语言
辅助开发：

网页的前台开发三大块：
1.HTML 超文本标记语言
2.CSS样式美化网页
3.javascript 实现网页的动态效果

由网景公司为了减轻服务器的压力而发明
运行在客户端（浏览器端）的脚本语言。

三种形式的脚本语言：
样式：
1.行内样式
<font style="font-size:70px;color:yellow;font-family:华文彩云;">Jane</font>
2.内部样式
<style type = "text/css">
/*标签选择器*/
font{
font-size:80px;
}
p{}
a{}
img{}
table{}
tr{}
li{}
/*类选择器*/
.c1{
font-size:130px;
}

/*id选择器*/
#id1{
font-size:30px;
}
</style>
3.外部样式
<link type = "text/css" rel = "stylesheet" href = "a1.css"/>

a.行内脚本语言
<input type = "button" value = "普通按钮" onclick = "alert('hello')"/>
<a href = "javascript:alert('aa')">点我啊</a>

b.内部脚本
<script type = "text/javascript">
alert("你好啊");

</script>

c.外部脚本
<link type = "text/css" rel = "stylesheet" href = "aa.js"/>

文本样式：
color:green;
font-size:15;
font-family:宋体;
font-weight:bold/normal;
font-style:italic/normal;
text-decoration:underline/none;
text-align:left/center/right;
line-height:23px;行高
letter-spacing:30px;字符间距

背景样式
background-color:;green;
background-image:url();
background-repeat:no-repeat/repeat-x/repeat-y/repeat;//向某个方向铺开
background-position:xpx ypx;
x:正数背景图片向右偏移
y:正数背景图片向下偏移

超链接的伪类：
l v h a love hate
a:link{}
a:visited{}
a:hover{}
a:active{}

边框样式
border-3px;
border-color:pink;
border-style:solid/dashed/dotted;
border:1px solid red;
border-right:3px dashed blue;
内边距：padding
外边距：margin
浮动：float
s1java

数据类型
javascript属于弱数据类型，使用var关键字来定义变量

并不是没有数据类型
使用typeof a返回a的数据类型
整数、小数 number 数值型
字符型数据：string
布尔类型：boolean
未定义类型：undefined
对象类型：object

运算符
1.算术运算符 + - * / % ++ --
2.比较运算符 > < >= <= == !=
3.逻辑运算符 && || ！
4.赋值运算 = +=

语法结构
1.顺序结构
2.条件结构
if(){}
if(){}else{}
if(){}else if(){}else{}多重if 区间判断
switch(){} 等值判断
3.循环结构
while(){}
do{}while();
for(){}

常见的内置函数
1.警告框
alert('');

2.确认框
var b = confirm("你确定要提交注册吗？");
得到的值是;true或false
alert(b);

3.提示框
var c = prompt("提示内容","默认值");
c的类型是string类型
要得到数值类型的需要转型
转整形 a = parseInt(a);
转小数 b = parseFloat(b);

4.判断是不是非数值
isNaN(m) is not a number
m是非数值返回true
m是数值的时候返回false
****************************************************************************<head>
****************************************************************************<head>
****************************************************************************<head>
<html>
<head>
<style type = "text/css">
/*id选择器*/
</style>

<link type = "text/css" rel = "stylesheet" href = "a1.css"/>

</head>

<body>

<script type = "text/javascript"src = "a2.js" >

</script>

<script type = "text/javascript">
alert("world");
</script>

<font id = "id1" class = "c1">木木</font>

<form>
<input type = "button" value = "点我看看" onclick = "javacript:alert('恭喜你，中奖500W')"/>
</form>

<a href = "javascript:alert('想得美')">点击看美女</a>

</body>
</html>
-------------------------------------------------------- Part 2

****************************************************************************<head>
<script type = "text/javascript">
function f1(a){
var b = document.getElementById("id1");
var b1 = b.value;
b1 = parseFloat(b1);
var c = document.getElementById("id2");
var c1 = c.value;
c1 = parseFloat(c1);
var e = document.getElementById("id3");
e.value = eval(b1+a+c1);//将字符串作为表达式处理
}
var a;
function openWin(){
a = window.open("test.html","myWindow","width=300,height=300");
}
function closeWin(){
a.close();
}
function closeSelf(){
//this.close();
window.close();//关闭自身窗口
}
var t1;
function f2(){
//延时器
t1 = window.setTimeout("openWin()",3000);
}
function f3(){
//清除延时器
window.clearTimeout(t1);
}
var t2;
function f4(){
t2 = setInterval("openWin()",2000);//设置定时器
}
function f5(){
window.clearInterval(t2);
}
function f6(){
var d = new Date();
var year = d.getFullYear();
var month = d.getMonth()+1;//0-11
var date = d.getDate();
var hour = d.getHours();
var minute = d.getMinutes();
var second = d.getSeconds();
var week = d.getDay();//0-6 0星期天
switch (week)
{
case 0:
week = "日";
break;
case 1:
week = "一";
break;
case 2:
week = "二";
break;
}
//document.write(year+"年"+month+"月"+date+"日"+hour+"时"+minute+"分"+second+"秒星期"+week);
//获得div对象
var d1 = document.getElementById("div");
//设置DIV内的值
d1.innerText = year+"年"+month+"月"+date+"日"+hour+"时"+minute+"分"+second+"秒星期"+week;
setTimeout("f6()",1000);
}
//页面加载时启动定时器
//setInterval("f6()",1000);
function f7(t){
document.body.style.backgroundColor = t.value;
}
</script>
<style type = "text/css">
input{
font-size:30px;
}

#div{
500px;
height:30px;
font-size:30px;
border:1px solid red;
}
</style>
</head>
<body onload = "f6()">
<select name="" onchange ="f7(this)">
<option value="red" selected>红色
<option value="green">绿色
<option value="yellow">黄色
</select>
<br><br><br>
<img src="images/33.jpg" width="300" border="0" alt="" onmouseover = "this.src = 'images/32.jpg'" onmouseout = "this.src = 'images/33.jpg'">
<br>
<input type="button" value="3秒钟后打开网页" onclick="f2()">
<input type="button" value="关闭延时器" onclick="f3()">
<br>
定时器
<br><input type="button" value="每隔2秒钟打开窗口" onclick="f4()">
<input type="button" value="清除定时器" onclick="f5()">
<br>
<input type="button" value="打开一个窗口" onclick="openWin()">
<br>
<input type="button" value="关闭窗口" onclick="closeWin()">
<br>
<input type="button" value="关闭自身窗口" onclick="closeSelf()">
<br><br><br>

<div >
</body>
</html>

javaScript额外笔记

相关推荐