JavaWeb学习笔记（三）JavaScript

1、JavaScript简介

一、什么是JavaScript

  1. Javascript：基于对象和事件驱动的语言，应用于客户端
    • 基于对象：不同于java的new对象。js提供好了很多对象，可以直接使用
    • 事件驱动：html做网站静态效果，js动态效果
    • 客户端：专门指浏览器
      注：浏览器中的控制台可以调试js代码（区分大小写，html不区分）

二、JavaScript特点

  1. 交互性：信息的动态交互
  2. 安全性：js不能访问本地磁盘的文件
  3. 跨平台性：支持js的浏览器都可以运行

三、Java和JavaScript区别

  1. 不同公司开发的，是不用的语言
  2. Java是面向对象 ，js是基于对象的
  3. java是强类型的语言，js是弱类型的语言
  4. java需要先编译成字节码文件再执行；js只需要解析就可以执行

四、JavaScript组成部分

  1. ECMScript
    • ECMA：欧洲计算机协会
    • 由ECMA组织指定的js的语法，语句等
  2. BOM
    • brower object model：浏览器对象模型
  3. DOM
    • document objct model：文档对象模型

五、JavaScript和HTML的2种结合方式★★★

  1. 使用一个标签

    <script type="text/javascript">
		//js代码，例如：
    alert("弹窗");
</script>

  2. 使用script标签，引入一个外部的js文件

    <script type="text/javascript" src="1.js"> </script>

    注：1、这是script标签内部的代码不会被执行，所以不能再里面写代码

六、JavaScript的原始类型和声明变量

  1. 原始类型

    • string(字符串),
    • number(数字类型),
    • boolean(true和false)
    • null:获取对象的引用，null表示对象引用为空，所有对象的引用也是Object
    • undifined:定义一个未赋值的变量

  2. 声明变量：都用var

    <script type="text/javascript">
	var str = "abc";//string
	var mm = 123;//number
	var flag = true;//boolean
	var date = new Data();//null
	var x;//undifined
	alert(typeof(str));
</script>

  3. 查看变量类型：typeof（变量名）

七、JavaScript语句

  1. if 判断语句：同java中的if-else语句

  2. switch语句

    switch(a){
	case:1
		alert("2");
		break；
	case:2
		alert("2");
		break；
	default:
		alert("other");
		break；
}
    • 区别于java，js中switch支持所有的原始类型

  3. 循环语句（for,while）

    while(i>1){
	alert(i);
	i--;	
}


for(var m=0; m<=5; m++){
      alert(m);
}

八、JavaScript运算符

  • 基本操作和java相同，以下为不同的地方：
    1. 在js里面不区分整数和小数，123/1000=0.123
    2. 数字字符串：
      1. 相加的时候和java一样（“123”+1—>1231）
      2. 相减时做的是数字的相减运算（“123”-1—>122）（不是数字字符串时提示NaN）
    3. boolean类型（true会输出为1，false会输出为0）
    4. 和=的区别：★面试★
      1. ==比较的是值，
      2. ===比较的是值和类型
    5. 补充：直接向页面输出语句（可以输出变量、固定值、标签、代码）
	document.write("aaaa");
	document.write("<br/>")；
  • 注：在输出语句时，设置标签属性的值要使用单引号

九、JavaScript的数组★★★

  1. 三种定义方式★★★★★

    var arr = [1,2,“3”,true];//可以存放不同的数据类型
var arr1 = new Array(5);//使用内置对象Array对象,未存放数据
var arr2 = new Array(6,7,8);//使用内置对象Array，并存入六个元素6，7，8

  2. 数组的属性值：arr.length； //获取长度

十、JavaScript的函数

  1. 三种定义方式

  • 使用到关键字function

    function 方法名(参数名称1,参数名称2,...) {
	方法体;
	【返回值;】
}

  • 匿名函数

    var add1 = function(参数名称1，参数名称2，...){
	方法体；
}

  • 使用到js里面的内置对象：Function

  •   var add2 = new Function("参数名称1，参数名称2，..."，“方法体和返回值”)；
  1. 方法的重载：★面试题★

  • js的函数不存在重载，会调用方法名相同的最后一个方法

  • 但是可以通过用arguments数组实现模拟重载

    function add(){//所有传入的参数都会存到arguments数组中
	if(arguments.length==2)//传入参数为2个
			return arguments[0]+arguments[1];
	else if(arguments.length==3)//传入参数为3个
			return arguments[0]+arguments[1]+arguments[2];
	else
		return 0；
	}
	add(1,2);  //3
	add(1,2,3);  //6
	add(1,2,3,4);  //0

十一、JavaScript的全局变量和局部变量

  • 全局变量：在script标签里面定义的一个变量，这个变量在页面中js部分都可以使用（其它的script标签也可以使用）
  • 局部变量：在方法内部定义的一个变量，只能在方法内部使用

十二、Script标签的位置

  1. 一般放在</body>后面，以免产生对象为空的错误。因为：浏览器是顺序解析，可能还未解析到js中所使用的对象的那一行

2、JavaScript常见对象

注：最重要的不是记住这些对象的方法，而是学会查阅文档√√√√

一、string对象

  1. 创建String对象：var str = “abc”;
  2. 获取其长度(属性)：str.length
  3. 两类常用方法：

  • 与html相关的方法（设置数据样式的方法）

    方法解释
    bold（）加粗字符串
    fontcolor（“red”）字符串颜色
    fontsize（1-7）字体大小
    link（1.html）将字符串设置为超链接到1.html
    sub（）、sup（）设置为下标、上标

  • 与java相似的方法

    方法解释
    str1.concat(str2)字符串连接
    charAt(i)返回指定位置的字符
    indexOf(“a”)返回a所在位置
    split(",")根据逗号“，”切分字符串，并返回一个字符数组
    replace(“a”,“A”)替换
    substr(5,3)从5开始向后截取三个字符
    substring(3,5)截取[3,5)的字符

二、Array对象

  1. 创建数组：参考上文（三种方法）

  2. 获取其长度(属性)：arr.length

  3. 常用方法：

    方法解释
    concat（）拼接
    join（“-”）用“-”分割数组的每个元素（默认使用的是逗号）
    push（）向数组末尾添加元素，返回新长度(添加数组时，数组整体也会被当做一个元素，长度也是+1，遍历的时候也是作为一个元素)
    pop（）删除最后一个元素，返回删除的元素
    reverse（）反转

三、Date对象

  1. 获取当前时间：var date = new Date(); //Fri Apr 17 10:40:46 UTC+0800 2016

  2. 转换为习惯的格式：date.toLocaleString（）;

  3. 常用方法：

    方法解释
    getFullYear()年
    getMonth（）+ 1月（范围是0-11）
    getDate（）日
    getDay（）星期几（0-6：周天到周六）
    getHours（）、
    getMinutes（）、
    getSecond（）    		时分秒
    getTime（）1970-1-1至今的毫秒数
    可以用于处理缓存

四、Math对象

  1. 都是静态方法，直接使用Math.方法（）

  2. 常用方法：

    方法解释
    ceil（）、floor（）向上取整、向下取整
    round（）四舍五入
    random（）0-1之间的伪随机数
    pow（x，y）x的y次方

五、全局函数

  1. 全局函数：不属于任何一个对象，通过方法名称直接使用

  2. 常用方法：

    方法解释
    eval（str）如果字符串中有js代码，就按照js代码执行
    encodeURI（）
    decodeURI（）    		对字符进行编码/解码
    encodeURIComponent（）
    decodeURIComponent（）    		同上
    isNaN（）是数字返回false，不是数字返回true
    parseInt（）字符串—>整数

3、JavaScript中的bom和dom对象

一、bom对象

  1. bom：broswer object model（浏览器对象模型）

  2. 常用对象（使用方法：对象名.属性/方法）

    对象解释常用属性常用方法
    navigator获取客户机（浏览器）信息appName
    screen屏幕信息width
    length
    location请求url地址href：获取/设置请求的url地址
    history请求过的url地址back（）
    forward（）
    go（-1or1）

  3. window对象的方法★★★

方法解释
alter（）弹窗
confirm（）★确认提示框，返回值为true和false
prompt（显示提示内容，输入框默认值）
open（URL，name，features）★
close()关闭窗口提示，
【笔试】setInterval(“js代码”，毫秒数)★每隔X毫秒就执行一次js代码
【笔试】setTimeout(“js代码”，毫秒数)★在X毫秒之后执行js代码
clearInterval(id)★清除setInterval设置的定时器（定时器会返回id值）
clearTimeout(id)★清除setTimeout设置的定时器（定时器会返回id值）

二、dom对象

  1. dom:document object model（文档对象模型）
  • 文档：专门指的是超文本标记文档
  • 对象：提供了属性和方法
  • 模型：使用属性和方法来操作超文本文档
  1. 作用：可以通过使用dom里面提供的对象，使用这些对象的属性和方法（★★★），对标记型文档进行操作
  • 对标记型文档进行操作：要想进行操作文档，首先把文档里的所以内容（包括：标签、属性、文本内容）封装成对象

  1. dom解析html的原理：
    根据html的层级结构，会在内存中分配一个树形结构

  2. DHTML

  • DHTML:多种技术综合的简称
  • 包含的技术：
    • html：封装数据
    • css：使用属性和属性值设置样式
    • dom：操作html文档
    • javascript：专门指的是js的语法语句。即ECMAScript
  1. document对象
常用方法解释举例
write（）向页面输出内容或html代码
getElementById（）★★★通过标签id得到标签对象得到标签对象后可以通过属性输出或设置相应的值
getElementsByName（）★返回所有和name值相同的标签对象的数组
getElementsByTagName（）★返回所有和标签名相同的标签对象的数组
  1. element对象

  • element对象获取方法：通过document对象里面的方法获取

  • element对象中的常用方法：

    • getAttribute(“属性名”); //获取属性值
    • setAttribute(“属性名”，“属性值”); //设置属性的属性值
    • emoveAttribute(“属性名”); //删除属性，不能删除

  • 补充：获取列表标签下的子列表标签：唯一有效方法是getElementsByTagName（）

    <ul id="ulid1">
	<li>aaaa</li>
	<li>bbbb</li>
	<li>cccc</li>
</ul>
<spript type="text/javaspript">
	var ull1 = document.getElementById("uliid1");
	var lis = ull1.childNode;//返回element对象ull1下子类标签的数组（Node对象中的方法，兼容性差）
	var lis1 = ull1.getElementsByTagName("li");//唯一有效方法
</spript>
  1. Node对象

  • Node对象的属性一：

    • nodeType
    • nodeName
    • nodeValue

  • 标签、属性、文本分别对应的值

    标签属性文本
    nodeType123
    nodeName大写的标签名称属性的名称#text
    nodeValuenull属性的值文本的内容

  • Node对象的属性二

    • 父节点
      • parentNode：获取父节点
    • 子节点
      • firstChild：获取第一个子节点（兼容性差）
      • lastChild：获取最后一个子节点
    • 同辈节点
      • nextSibling：：获取下一个同辈节点
      • previouSibling：获取上一个同辈节点
  1. innerHTML标签属性★★★
  • 不是dom的组成部分，但大多数浏览器都支持的属性（因此多用这个）
  • 作用：
    • 获取文本内容
    • 向标签里面设置内容（内容是html代码）
posted @ 2020-10-16 23:40  不知老之将至  阅读(140)  评论(0)  编辑  收藏  举报