功能：
处理HTML页面元素的数据。实现用户在客户端进行交互。
1：JS的变量
在JS中声明变量用的技术是：
var name = “jack”;//声明一个字符串类型的 - 没有数据类型
name=445; //如果name是String类型也可以被赋值为number类型。则name成了number类型。
<script type="text/javascript">
var name = "Jack";
var age =90;
console.log("name is:"+name+",age is:"+age);
</script>
JS中的数据类型：
| 类型 | 值 | 示例 |
| string | Name=”jack” |
|
| number | 45.5,23,100 |
|
| object | New Object,new String, New ....Array |
|
| function | 函数类型 方法 Function abc(){ } | typeof(abc) = |
2:控制语句
If/while/for/do..while/break/contain/return...
3:变量的作用域
在JS里面所声明的变量<script>里面的变量，都叫全局变量。
如果在函数function,控制语句也声明了变量 但是没有使用 var关键字。则也是全局变量。
<script type="text/javascript">
function f1() {
for( i = 0; i < 10; i++) { //在<scrpt>里面声明的变量i,此时的id是全局的
addr = "JSXZ"; //
}
}
f1();//调用f1
console.log("i is:" + i + ",addr is:" + addr); //10
</script>
4:函数如何定义
代码的集合，通过一个名称以后可以调用。
<script type="text/javascript">
//声明一个函数
function say(nm,age,addr){
console.log("name is:"+nm+","+age+","+addr)
}
//必须要先定义才可以调用
say();//在调用时传递多少参数 - 如果没有参数，则参数的值为undefined
say("Jerry",21,'jsxz',"更多的数据");
</script>
5:JS函数的功能 - 事件
Onclick - 鼠标点击一下
<body>
<input type="button" οnclick="show1();" value="第一个按扭" />
</body>
<script type="text/javascript">
function show1(){
alert('Hello..你好');//弹出的对话框
}
</script>
Onblur - 当失去光标时执行
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="button" οnclick="show1();" value="第一个按扭" />
<input type="text" name="name1" value="" οnblur="_blur(this);"/>
<input type="text" name="name2" />
</body>
<script type="text/javascript">
function show1(){
alert('Hello..你好');//弹出的对话框
}
function _blur(ele){
//获取这个元素中的值
var val = ele.value;
//放到
//根据名称类似于xml一样，获取这个元素
document.getElementsByName("name2")[0].value=val;
}
</script>
</html>
Onfocus - 获取光标的时执行的脚本
Onchange -修改数据时
Onkeydown - 键盘上的key按下时
防止用于用户非数字
<body>
年龄：<input type="text" name="name" οnkeydοwn="return _keydown(this);"/>
</body>
<script type="text/javascript">
function _keydown(obj){
//1:获取用户的按的是什么值
var code = event.keyCode;
//将code值转成字符
var str = String.fromCharCode(code);
console.log(str);
var p = /\d/;
if(p.test(str) || code==8){//如果是数字\d一个数字
return true;
}
return false;
}
</script>
Onkeyup - 键盘上的键弹起以后
6:JS中的两个对象
1:location属性
function _open(){
window.location="http://www.baidu.com";
}
2:history属性历史记录
<!--在a这个超连接里面也可以带有脚本-->
<a href="javascript:window.history.go(-1);">返回..</a>
DOM - Document Object Model - 文档对象模型 - 指的是<body>部分的内容
7:dom对象document
1：从页面上选择元素 - 根据id
<button οnclick="show();">删除</button><br>
<input type="text" name="xm" id="xingming" value="张三">
<script type="text/javascript">
function show(){
var name=document.getElementById("xingming");
alert(name.value);
}
</script>
2：根据name来选择如果根据name来选择元素，则获取到的是一个元素的数组集合
<button οnclick="show();">删除</button><br>
<input type="text" name="xm" id="xingming" value="张三">
<script type="text/javascript">
function show(){
var name=document.getElementsByName("xm").value;
alert(name);
}
</script>
3：创建新的元素
function show(){
//1:创建一个新的超连接
var aa = document.createElement("A");
aa.innerHTML="这是新元素";//就是向<a>元素中间写文本
aa.href="../index.html";
//将aa添加到body
document.body.appendChild(aa);
}
356
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
