03-JavaScript

1、介绍

JavaScript

JavaScript:一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,
内置支持类型。它的解释器被称为 JavaScript 引擎,为浏览器的一部分,广泛用于客户端的脚本语言。

组成部分:

  • ECMAScript: JS 基础语法(规定 关键字 运算符 语句 函数等等…)
  • BOM: 浏览器对象模型
  • DOM: 文档对象模型

作用:修改html页面的内容;修改html的样式;完成表单的验证。

注意:JS 可以在页面上直接写,也可以单独出去;JS 的文件的后缀名 .js

JS 和 HTML 的整合:

  • 方式1:在页面上直接写,将 js 代码放在 <script></script> 标签中,一般放在head 标签中

    1
    2
    3
    4
    5
    <script type="text/javascript">
    funtion fuc1(){
    alert(111);
    }
    </script>
  • 方式2:独立的 js 文件,通过 script 标签的src属性导入。eg:<script type="text/javascript" src="test.js" ></script>

2、JavaScript 基础

JS 中的变量声明:

  • var 变量名=初始化值;
  • var 变量名; 变量名=初始化值;

注:var可以省略,建议不要省略;一行要以分号结尾,最后一个分号可以省略,建议不要省略。

JS 的数据类型:

1、原始类型(5种)

  • Null
  • String
  • Number
  • Boolean
  • Undefined

通过 typeof 运算符可以判断一个值或者变量是否属于原始类型,若属于原始类型,还可以判断出属于那种原始类型。typeof 变量|值;

若变量为 null,使用 typeof 弹出的值 object

使用 typeof 的返回值:

  • undefined - 如果变量是 Undefined 类型的
  • boolean - 如果变量是 Boolean 类型的
  • number - 如果变量是 Number 类型的
  • string - 如果变量是 String 类型的
  • object - 如果变量是一种引用类型或 Null 类型的

2、引用类型

运算符:

  • 关系运算符:

    • 两边值都是字符,比较 ascii 码
    • 两边都是数字,和 java 一样
    • 一边是数字,一遍是字符串形式的数字 eg:3>"2" 可以比较,将字符串形式的数字转换成数字在进行比较。
    • 一边是数字,一遍是普通字符串 eg:3>"hello" 可以比较,值永远是 false
  • 等性运算符:== 只判断值是否相同;=== 不仅判断是否相同,还要判断类型是否相同

    1
    2
    "66"==66  true
    "666"===666 false

JS 的语句:

if、while、for 等和 java 一样,switch 和 java 一样(区别:switch 后面跟字符串,还可以跟变量)

JS 操作:

获取元素:var obj=document.getElementById("id值");
获取元素的value属性:var val=document.getElementById("id值").value;
设置元素的value属性:document.getElementById("id值").value="sdfsdf";
获取元素的标签体:var ht=document.getElementById("id值").innerHTML;
设置元素的标签体:document.getElementById("id值").innerHTML="ssss";

定义函数:

  • 方式1:function 函数名(参数列表){函数体}
  • 方式2:var 函数名=function(参数列表){函数体}

    注意:函数声明的时候不用声明返回值类型;参数列表上不要写参数类型;通过return 结束方法和将值返回;函数调用的时候:函数名(参数)

事件:

  • onclick 单击
  • onsubmit 表单提交,加在 form 表单上的 onsubmit="return 函数名()" ,函数返回值为boolean类型
  • onload 页面加载成功或者元素加载成功

事件和函数绑定:

  • 方式1:通过元素的事件属性,<xxx onxxx="函数名(参数列表)">,若参数为 this 是将当前的 dom 对象传递给了函数

  • 方式2:给元素派发事件(相当于给元素绑定事件)

    1
    2
    document.getElementById("id值").onxxx=function(){...};
    document.getElementById("id值").onxxx=函数名;

    注意:内存中应该存在该元素才可以派发事件,怎么理解?因为网页是从前往后解析,如果把派发事件写在页面元素的前面,而HTML页面其实还没加载完毕,在这之前获取元素是获取不到,即不能派发事件。

    做法:

    1. 将 js 代码放在html页面的最下面
    2. 在页面加载成功之后在运行 js 代码 onload 事件.

      3、BOM(浏览器对象模型)

所有的浏览器都有 5 个对象。

  • window:窗口
  • location:定位信息 (地址栏)
  • history:历史

Windows 对象详解

如果文档包含框架(frame 或 iframe 标签),浏览器会为 HTML 文档创建一个 window 对象,并为每个框架创建一个额外的 window 对象。

PS:若是 window 对象的属性和方法,调用的时候可以省略 window

  • 常用的属性:通过 window 可以获取其他的四个对象

    • window.location 等价于 location
    • window.history 等价于 history
  • 常用的方法:

    • 消息框:
      alert("....") 警告框
      confirm("你确定要删除吗?")确定框,返回值:boolean
      prompt("请输入您的姓名") 输入框,返回值:你输入的内容
    • 定时器:
      设置定时器:setInterval(code,毫秒数):周期执行;setTimeout(code,毫秒数):延迟 多长事件后 只执行一次,例如:setInterval(showAd,4000);serInterval("showAd()",4000);
      清除定时器:clearInterval(id):clearTimeout(id):

    • 打开和关闭:open(url) 打开;close() 关闭

location 对象:定位信息,地址栏

常用属性:

  • href 获取或者设置当前页面的 url(定位信息)
  • location.href; 获取 url
  • location.href=”…”;设置 url,相当于 a 标签,超链接

history 对象:操作历史*

  • back(); 后退
  • forward(): 向前
  • go(int)

    • go(-1) 相当于 back()
    • go(1) 相当于 forward()

4、DOM(文档对象模型)

就是我们的 HTML 代码加载到内存中会形成一颗 document 树。

节点:

  • 文档节点 document
  • 元素节点 element
  • 属性节点 attribute
  • 文本节点 text

获取一个元素节点:通过 document 获取
操作元素的属性:dom对象.属性
操作元素的标签体:dom对象.innerHTML

5、其他及注意

1、在方法中 (function()) this 指代的是当前的元素(当前的 dom 对象)
例如:

1
2
3
4
5
<input type="text" name="username" id="username" onblur="loseFocus(this.value)">
方法:
function loseFocus(obj){
alert(obj);
}

2、事件总结:

常见事件:

  • 焦点事件★:onfocusonblur
  • 表单事件:onsubmitonchange 改变
  • 页面加载事件★:onload
  • 鼠标事件(掌握):onclick
  • 鼠标事件(了解):ondblclick 双击、onmousedown 按下、onmouserup 弹起、onmousemove 移动、onmouserover 悬停、onmouserout 移出
  • 鼠标事件(理解):onkeydown 按下、onkeyup 弹起、onkeypress 按住

3、阻止默认事件的发生;阻止事件传播

4、引用型类似总结:

  • 原始类型中的 String Number Boolean 都是伪对象,可以调用相应的方法
  • Array:数组
  • String:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    语法:
    new String(值|变量);//返回一个对象
    String(值|变量);//返回原始类型
    常用方法:
    substring(start,end):[start,end)
    substr(start,size):从索引为指定的值开始向后截取几个

    charAt(index):返回在指定位置的字符。
    indexOf(""):返回字符串所在索引

    replace():替换
    split():切割

    常用属性:length
  • Boolean:

    1
    2
    3
    4
    语法:
    new Boolean(值|变量);
    Boolean(值|变量);
    非0数字 非空字符串 非空对象 转成true
  • Number:语法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    语法:
    new Number(值|变量);
    Number(值|变量);
    注意:

    null====>0
    fale====>0 true====>1
    字符串的数字=====>对应的数字
    其他的NaN
  • Date:

    1
    2
    3
    new Date();
    常用方法:
    toLocalString()
  • RegExp:正则表达式

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    语法:
    直接量语法 /正则表达式/参数
    直接量语法 /正则表达式/

    new RegExp("正则表达式")
    new RegExp("正则表达式","参数")
    参数:
    i:忽略大小写
    g:全局
    常用方法:
    test() :返回值为boolean
  • Math:

    1
    2
    3
    Math.常量|方法
    Math.PI
    Math.random() [0,1)
  • 全局:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    decodeURI() 解码某个编码的 URI。 
    encodeURI() 把字符串编码为 URI。

    Number():强制转换成数字
    String():转成字符串

    parseInt():尝试转换成整数
    parseFloat():尝试转换成小数

    eval() 计算 JavaScript 字符串,并把它作为脚本代码来执行。
觉得文章对您有帮助请我喝杯咖啡吧^_^
0%