javascript简介
javascript是什么
1.javascript是一种描述语言，基于对象和事件驱动的脚本语言。
2.javascript在客户端上运行。
3.javascript被设计为向HTML页面添加交互行为。
为什么用javascript
在以前服务器的容量和处理速度都比较小，并且从注册表单的输入数据从全国来看，输入错误的次数较多，如果都交给服务器来处理，那么服务器负荷较大，所以需要在本地设置一个东西来简单地即时检验输入的表单数据是否符合规范。javascript就出现了。
javascript的组成
1.ECMAScript（核心）
2.DOM（文档对象模型）
3.BOM（浏览器对象模型）
用javascript写hello_word
javascript的引用
1.在HTML标签中引用
<p onclick="javascript:alert("123")"></p>
2.script标签中直接书写
<script type="text/javascript">
//java代码
</script>
3.通过script标签的src属性引入外部JS文件
javascript的弹窗
1.alert()弹窗
alert("你好 alert");
注意：当执行到该语句时，浏览器处于阻塞状态 代码在alert这个位置停止并等待。
2.prompt()弹窗
var userName = prompt("请输入用户名称：",666);
注意：接受2个参数，第一个是提示字符，第二个是输入框默认的值。点击确认后，返回输入框中的String数据类型的值。
3.confirm()弹窗
var flag=confirm("确定提交吗？");
注意：根据选择，它会返回true或false的布尔类型的值。
代码
<html>
<head>
<title>js支持的三种弹框，实现和用户交互</title>
<script type="text/javascript">
alert("你好 alert");
var userName = prompt("请输入用户名称：",666);
alert(typeof userName);
var flag=confirm("确定提交吗？");
alert(flag);
</script>
</head>
<body>
<h1>你好 html</h1>
</body>
</html>
javascript的基础语法
变量
变量的声明和赋值
JS的变量声明，是通过var语句来声明的，无需指定数据类型。
var t1="刘德华"；
var t2=23;
注意： 最好在每条语句后都加上分号；。
变量、对象和函数的名称有意义，最好使用驼峰式命名。
可以重复付给变量不同类型的值。
变量的数据类型
1.undifined
- 只有一个值，即undifined。当变量为赋值时，即表现为该类型。
2.null
- 只有一个值null。当给变量赋值null时，会表现为该类型。
3.number
- 有分为整数和浮点数。
4.boolean
- 值只有true和false.
5.string
- 一组被引号（单引号或双引号）括起来的文本.
6.object
- 标签元素或数组一般用该类型的变量接收。
- 该类型的变量或值可以去访问属性和调用方法。
使用tyoeof运算符可以获得变量的返回值数据类型。
var aa = 12;
console.log(typeof aa );
aa = "12";
console.log(typeof aa );
var u ; //当你声明了一个变量的时候 ， js自动复制undefined
var uu=null;
console.log(uu);
变量的作用域
与java相似，变量分为全局和局部
全局变量的定义
bb = "bb";
window.bb = "bb";
全局变量在任何范围内都可已使用。
局部变量的定义
var aa = "aa";
出了相应的代码块后，该变量被销毁。如果还继续使用，会报aa not definied的错误。
注意： 应该尽量避免全局变量的使用，一面团队开发变量冲突。
控制流程
条件，循环控制语句和java类似
只有for循环略有不同
for(变量a ： 对象obj){
//对象obj是一个数组，每次循环按顺序将元素赋值给变量a
}
函数
函数是什么
一组可以随时随地运行的语句。将脚本编写为函数以避免页面载入时执行该脚本。
系统函数
1.parseInt()
解析一个字符串并返回为整数。
var u = parseInt("12");
//u为整数类型 12
var u2 = parseInt("12ddd");
//parseInt会自动去掉后面的字符，u2位整数类型 12
2.parseFloat()
解析一个字符串并返回为浮点数
3.isNaN()
检查某个值是否为数字，并返回true/false
如果是true，则表示不是数字
如果是false，则表示是数字。
isNaN(12)//返回false
isNaN("12")//返回false
isNaN("12ddddd")//返回true
4.eval()
计算JavaScript字符串，并把它作为脚本代码来执行。
document.write("最终结果是："+eval("alert('aa');console.log('bb')"));
自定义函数
// 函数的声明方式1
function alertName(userName){
alert(userName);
}
// 函数的声明方式2 声明一个匿名函数将地址传递给变量
var alertName = function(userName){
alert(userName);
}
//匿名函数的声明
function(){
alert(userName);
}
函数通过return关键字返回值。
函数的调用
函数可以通过其名字加上括号中的参数进行调用。
匿名函数可以如下调用。
function(){
alert(userName);
}();
声明在调用之后就无法被调用了。除了上述第一种方式声明的函数，因为存在js函数提升器，js会先声明这种方式声明的函数，再依次执行代码。
事件
页面中的常用事件
| 事件名称 | 描述 |
|---|---|
| onload和onunload | 当用户进入或离开页面时就会触发onload和onunload事件 |
| onfocus,onblur和onchange | 主要与form表单里的文本域或下拉框配合使用 |
| onsubmit | form表单提交时发生 |
| onmouseover和onmouseout | 鼠标移至对象上和离开时发生 |
| onclick和ondbclick | 对象被点击/双击时发生 |
事件与函数配合使用
//第一种方式
<script type="text/javascript">
function aa(item){
console.log(item.value);
item.value="不要按我";
}
</script>
<input type="button" value="按我" onclick="aa(this);" />
//第二种方式
标题：<input type="text" id="tt" /><br />
内容：<textarea id="ttt"></textarea><br />
<input type="button" value="提交" id="btn" />
<script type="text/javascript">
//1 获取元素
var title1=document.getElementById("tt");
var value1=document.getElementById("ttt");
var btn1=document.getElementById("btn");
//2 操作元素
// 绑定事件
btn1.onclick=function(){
if(confirm("确定提交吗？")){
console.log(title1.value);
console.log(value1.value); //innerHTML和value的区别
}
}
</script>
document对象
1.一般用于获取标签元素的对象
2.获取元素对象的方法有
| 方法 |
|---|
| getElementById() |
| getElementsByName() |
| getElementsByClassName() |
| 注意： 后两个方法均返回数组 |
<ul>
<li name="ll1">苹果</li>
<li>葡萄</li>
<li name="ll1">西瓜</li>
</ul>
<script>
//1 获取元素
var lis = document.getElementsByTagName("li");
var names = document.getElementsByName("ll1");
//2 操作元素
lis[2].innerHTML="橘子";
for(var i=0;i<lis.length;i++){
console.log(lis[i].innerHTML);
}
注意：
如果元素具有id 浏览器会自动在加载完成之后 自动创建为一个对象模型 名字就是这个id 前提是你必须保证 这个id在html中是唯一的。
1011
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
