1.javascript篇(基础)
js基础部分
js定义:
1.js是通过浏览器解析,然后由浏览器执行的一种脚本语言
2.css控制样式,而js控制行为
基本格式:
<script type="text/javascript">
基本定义:
所有类型都要用var来定义
外部样式表(CSS):
<link rel="stylesheet" href="StyleSheet1.css" type="text/css"/>
外部样式表(javascript):
<script type="text/javascript" src="JavaScript1.js"></script>
2.基本的行为方式:
1.浏览器弹窗 alert()//浏览器弹窗()后面弹窗里的内容 //注意:如果JavaScript和css在一起执行
则JavaScript先执行,因为是行为
2.confirm("提示框") //注意:js 是弱类型的语言 而c#是强类型的语言
3.prompt:收集文本字符
parseFloat:转换成小数
4.js 打开新窗口
window.open("地址","标题名");
5.初次载入
window.onload = kk;
function kk() { alert("页面加载完毕")}
6.document.getElementById(获取id);
3.流程控制
var ak12 = prompt("请输入成绩")
ak12 = parseFloat(ak12);
if (ak12 > 12)
{
alert("合格啦");
}
4.数组定义
数组的格式:var arr[];
var arr=new Arrer();
var arr = [12, 1, 122, 13];
var r = add(arr);
alert(r);
var sum = 0;
function add(arr) {
for (var i = 0; i < arr.length; i++)
{
sum = sum + arr[i];
}
return sum;
}
5.事件
<script type="text/javascript">
function fun()
{
alert("你已经被点击了")
}
</script>
</head>
<body>
<input type="button" value="测试" onclick="fun()"/>
</body>
事件2:
function show()
{
var input = document.getElementById("text");
input.value="欢迎你"
}
</script>
</head>
<body>
<input type="text" id="text" />
<input type="button" value="测试" onclick="show()" />
事件3:获取焦点 清除 window.onload = function ()
{
var input = document.getElementById("text");
input.onfocus = function ()
{
this.value = "";
}
}
事件4:点击不同方块显示不同的颜色
<style type="text/css">
div {
height:122px;
width:122px;
border:1px solid;
}
</style>
<script type="text/javascript">
window.onload = function () {
}
function changecolor(node)
{
node.style.background = "red";
}
</script>
</head>
<body>
<div onclick="changecolor(this);"></div>
<div onclick="changecolor(this);"></div>
<div onclick="changecolor(this);"></div>
</body>
</html>
事件4:动态生成方格框
window.onload = function ()
{
var divnode = document.getElementsByName("div");
for (var i = 0; i < divnode.length; i++)
{
divnode[i].onclick = function ()
{
this.style.background = "red";
}
}
}
</script>
</head>
<body>
<div></div>
<div></div>
<div></div>