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>

 

posted @ 2016-03-10 12:02  西瓜冰镇老板  阅读(235)  评论(0编辑  收藏  举报