javaweb_day02-day03 学习笔记 —— javascript

javascript

浏览器解析的编程语言
不需要编译

一、基本语法

< script>放在< body>前，可能会报错：


报错原因：文档未加载完成调用不到函数。
则要将< script>放在< body>中的内容后面，保证文档加载后再调用函数。

1. 数据类型

typeof(变量名)：返回数据类型

• 字符串string：" " 或者 ’ ’
  str = “hello”;
  var x = “hello”;
• 数值number
  var a=2;
  b=3;
• 布尔型boolean
  var b1 = true;
  b2 = false;
  if(3){} //3表示true ,非0即为true
  if(0){} //0表示false
• undefined
  var x; // 默认值为undefined
• null
  var x = null;

2. 弱类型

• 变量不需事先定义，可直接使用
  eg: str = “hello”;
• 定义变量 var
• 变量的数据类型由值决定。

3. 运算符

同java

• == 判断值是否相同
• === 判断数据类型、值是否相同

4. 语句

同java
if、switch、for、while、do…while、break、continue

eg:

• if(3){ //非0即为true
  语句体；
  }

• for(var i= 0; i<10;i++){
  语句体；
  }

二、函数

分类：

• 自定义函数
• 系统函数

定义函数格式：
function 函数名(参数列表){ }

• 无参无返回值
  function fun1(){
  alert(“fun1”);
  }
  fun1();//调用函数

• 有参无返回值
  function fun2(x,y){ //不能加var
  alert(x+y);
  }
  fun2(2,3);

• 无参有返回值
  function fun3(){
  return “hello”;
  }
  alert(fun3());

• 有参有返回值
  function fun4(x,y){
  return x+y;
  }
  alert(fun4(4,5));

• 匿名函数
  var test = function(){
  alert(“匿名函数”);
  }
  test();

• javascript没有函数重载，会调用最后一个
  eg:
  function fun(){
  alert(fun());
  }
  function fun(x){
  alert(fun(x));
  }
  function fun(x,y){
  alert(fun(x,y));
  }
  fun(); // 结果为fun(x,y)

• arguments
  function fun2(x,y){
  //arguments表示参数列表的数组
  alert(arguments.length);//获取数组长度
  }
  fun2();// 结果为fun() 调用两个参数的函数，若小括号里只有一个参数，则会调用一个参数的函数

三、内置对象

自定义定义对象格式：
var obj = new Object();
obj.name="";
obj.study=function(){}

在JavaScript中不常用自定义对象，常用内置对象

1. 数组中的对象

数组长度可变，内存空间不固定

定义数组的四种方法：

• var arr = [1,2,3,4,5];
  var arr2 = [ [1,2],[3,4] ];
• var mycars=new Array()
  mycars[0]=“Saab”
  mycars[1]=“Volvo”
  mycars[2]=“BMW”
• var mycars=new Array(3)
  mycars[0]=“Saab”
  mycars[1]=“Volvo”
  mycars[2]=“BMW”
• var mycars=new Array(“Saab”,“Volvo”,“BMW”)

方法：

• arr.push(9);
• arr.pop();
• for(i in arr){ }
• for(i = 0;i < arr.length;i++){arr[ i ];}

2. string对象

3. Math

同java
随机数范围为>0，<1

4. Date

同java
月份是当前月份-1

5. 正则表达式

定义和使用：

• var p1 = new RegExp (“abc”);
  alert(p1.test(“111abc”)); // 返回true
• var p1 = new RegExp(“abc”,“i”);//i 不区分大小写
  alert(p1.test(“111Abc”)); // 返回true
• //完全匹配 ^ [0-9]{3}$
  var p2 = new RegExp(" ^ [0-9]{3}$");
  alert(p2.test(“999”)); // 返回true
• var p3 = / ^1(3|5)[0-9]{9}$ /;
  alert(p3.test(“13123154623”)); // 返回true

四、 事件

• 事件源：在事件中，当前操作的那个元素就是事件源。
• 事件类型（事件句柄）：onBlur、onClick、onLoad
• 处理事件：事件源添加事件句柄，由事件句柄调用函数处理事件。

常用事件：

• onClick ：按钮的点击事件处理函数
  
  

• onblur ：失去焦点事件
  
  

• onchange ：内容发生改变
  
  

• onload ：加载事件
  
  

• onmouseover、onmouseout ：鼠标事件
  
  

五、DHTML

1. BOM：浏览器对象模型

browser object model的缩写。
定义了JavaScript可以进行操作的浏览器的各个功能部件的接口。

常用浏览器对象：

• window：（内置对象）
  • alert() <=> window.alert(); 一个按钮的提示框
  • confirm()：删除提示框，两个按钮
  • setInterval(“fun()”,1000);按照指定的周期（以毫秒计）来调用函数或计算表达式
  • location属性：表示当前位置
    • location = " ";
    • location.href = " ";

2. DOM：文档对象模型

Document Object Model的缩写
描述了处理网页内容的方法和接口。
（使程序和脚本有能力动态地访问和更新文档的内容、结构以及样式的平台和语言中立的接口。）

2.1 获取节点

• 获取一个节点对象
  • var node = getElementById(“idName”);
    < input type=“text” id=“name”>
• 获取数组对象
  • var nodes = getElementsByName(“name属性值”);
    < input type=“checkbox” name=“p”>
  • var nodes = getElementsByTagName(“tagName”);
  • var nodes = getElementsByClassName(“className”);
    < input type=“text” class=“name”>

练习：

1. 多选框全选、反选
   
2. 轮播图片
   

2.2 设置样式

三种方式：

• node.style.属性名 = “属性值”;
• node.className = “类选择器”;
• node.setAttribute(“属性名”,“属性值”);
  

2.3 显示和隐藏

• display: none // 不保留隐藏的位置
  • display：block //表示显示
• visibility: hidden // 保留隐藏的位置

2.4 创建、添加和删除节点

• creatElement(“name”) ：创建元素节点
• createTextNode(“文本内容”) ： 创建文本节点
• appendChild ：添加子节点
• removeChild ：删除子节点
  

2.5 和节点相关的element属性

• childNodes 所有子节点
• firstNode 第一个子节点
• lastNode; 最后一个子节点
• parentNode; 父节点
• nextElementSibling 下一个元素节点
• previousElementSibling 上一个元素节点

练习：（二级联动、验证注册）

1. 二级联动菜单
   
2. 验证注册。用户名或密码为空时不能提交表单。

return false：表示表单不提交，否则提交

如果表单提交按钮是button，可以使用submit()提交表单。