大数据WEB阶段（四）JavaScript

JavaScript

一、JavaScript概述

JavaScript简称js
js是干什么的？
1. HTML定义了网络的内容
2. CSS描述了网页的布局
3. js定义了网页的行为
js与java的关系
1. java与javaScript本质上没有任何关系。只是JavaScript蹭了java的热度而已。
js 的特点
1. js是脚本语言，不需要编译，世界试运行的语言。
2. js是可插入html页面的编程代码，可有所有的浏览器执行。
3. js是基于（是基于，而不是面向）对象，弱类型的语言。
4. js的学习很容易。
js优点
1. 交互性：可以与用户动态交互
2. 安全性：只能在浏览器内运行，不能访问本地硬盘或其他资源。
3. 跨平台：只要有浏览器就行，与操作环境没有关系。

二、在html中引入js代码

直接在html中编写js代码
1. 一般推荐把js代码写到head中。
```
<html><head><title>标题</title><script type="text/javascript">//js代码</script></head>
</html>
```
2. 引入外部文件
  1. 如果js代码非常多的情况下，可以将js代码抽取到一个独立的js文件中，在html中通过script标签引入js文件。
  2. 注意：如果是用script引入外部js文件，则在script便签内部你不要写js代码，并且标签不要写成自闭形式，否则可能会导致引入失败的问题。
```
<script type="text/javascript" src="demo.js"></script>
```

三、js语法

注释

1.  单行注释： //注释 内容
2.  多行注释： /*注释内容*/

数据类型
1. 基本数据类型
  1. js中基本数据类型有五种：数值型（number）、布尔型（boolean）、字符串类型（String）、 undefined类型、 null
  2. 数值类型
    1. 在js中，所有的数值底层都是浮点型，在需要时，整型和浮点型会自动进行类型转换。
      1. 例如： 2.4+3.6 = 6
    2. 特殊值
      1. Infinity 正无穷大
      2. -Infinity 负无穷大
      3. NaN (not a number) 非数字： NaN与任何数都不相等，包括他自己本身，如果要判断一个数是不是一个非数字，不能用NaN == xx 来判断，而是应该用isNaN(xx)进行判断。
    3. 在js中数值类型有对应的包装类 — Number
  3. 字符串类型
    1. 在js中字符串类型是基本数据类型的一种，可以用单引号或双引号引起来。
      1. 例如： var s1 = “a”; var s2 =’b’;
    2. 在 js中，为string类型提供了对应的包装类对象String
  4. 布尔类型
    1. boolean值为true或false
    2. 在js中，为boolean类提供了对应的包装类 –Boolean
  5. undefined
    1. undefined类型的值只有一个就是undefined ，表示变量未定义，如果声明了一个变量但是没有初始化，那么值就是undefined
  6. null
    1. null的值也是只有一个，就是null 。表示此处的值现在为空。常用了作为函数的返回值，便是返回值是一个空对象。
2. 复杂数据类型
  1. 对象（普通对象、数组、函数）
3. js中数据类型的转换
  1. 数值类型：
    1. 转换字符串类型，直接转换成对应值的字符串。 3 –>“3”
    2. 转布尔类型， 0和NaN转换成false ，其他值转换成true
    3. 在需要时会自动转化成对应的包装类 100–>new Number(100);
  2. 字符串类型
    1. 空字符串(“”)转化成数值为0 ，转换成boolean为false。
    2. 非空纯数值字符串（“123”），转换为对应的数值，转boolean为true
    3. 非空非数值字符串（“adf”），转数值为NaN ，转 boolean 为true
    4. 在需要的时候，会自动转换成对应的包装对象 “aaa”–> new String(“aaa”);
  3. 布尔类型：
    1. true ：转数值为1 ，转字符串为”true”
    2. false ：转数值为0 ，转字符串为“false”
    3. 在需要时，会自动转换为对应的包装对象
  4. undefined
    1. 转数值为NaN ，转字符串为“undefined” ，转布尔为 false ，转对象会抛异常
  5. null
    1. 转数值为0 ，转字符串为“null” ，转布尔值为false ，转对象对抛异常。
变量的定义
1. 在js中有数据类型，但是变量不区分类型，所以称js是一门弱类型的语言。
2. 在js中通过 var关键字声明变量，变量不区分类型，可以指向任意类型的值
运算符
1. js中的运算符和java中运算符大致相同
2. js中与java运算负的不同之处：
  1. 比较运算符 “==”与“===”
    1. ==在进行比较时，如果两端的数据类型不一样，则先自动转换为同一种类型在进行比较
    2. ===在比较时更为严格，如果两端数据类型不一样则直接返回false ，，如果数据类型一样再去比较值。
  2. typeof：
    1. 用类返回变量\常量\表达式的数据类型
```
var x = 123  ; typeof x;
```
  3. delete : 用类删除数组中的元素或者删除对象中的属性或方法
```
var arr = [123,"sd",true]; delete arr[1];
```
语句
1. js中语句与java中的语句也大致相同，不做赘述。

函数

用function关键字来定义一个函数

function 函数名（参数列表）{//函数体
}

用函数表达式来定义一个函数

var 函数名 = function（参数列表）{//函数体
}

数组

通过Array()构造函数来创建数组

var arr1 = new Array();//创建一个空数组
var  arr2 = new Array(10);//创建一个初始容量为10的数组
var arr3 = new Array(11,"ddef",true);//创建一个具有指定初始值的数组

通过数组直接量来创建数组

var arr1 = [];//创建一个空数组
var arr2 = [22,"df",,true];//创建一个具有指定初始值的数组

数组中的细节问题
1. 数组的长度可以任意改变
2. 如果数组中某一位置没有元素，则值为 undefined
3. js中数组可以存放任意类型的数据

js内置对象
1. String对象
  1. 创建
```
var str1 = new String("df");
var str2 = "sd";
```
  2. 常用方法和属性
    1. str.length 获取字符串的长度
    2. str.charAt(index); 获取指定位置的字符
    3. str.indexof(subStrng , startIndex); 获取从指定位置开始子字符串第一次穿线的位置
    4. str.lastof(subString , startIndex); 获取从指定位置开始，子字符串最后一次出现的位置。
    5. str.spilt(delimiter) 将字符串按照指定字符分割为字符数组。
    6. str.slice(start ,end) 提取字符串的某个部分，含头不含尾
    7. str.substr(start , length); 返回从指定位置开始的指定长度的字符串。
    8. str.tolowerCase() 将字符串中的字符全部转为小写
    9. str.toUpperCase() 将字符串中的字符全部转为大写
    10. str.match(trgexp) 在字符串中查找指定匹配正则表达式的值
    11. str.replace(regexp , replaceText) 字符串中匹配正则表达式的值替换为其他值
    12. str.search(regexp) 查找与正则表达式匹配的第一个子字符串的位置。
2. RegExp对象（正则表达式）
  1. 创建：
```
var reg1 = new RegExp("xxxx");
var reg2 = /xxxx/;
```
  2. 标识符
    1. g ：Global 全局查找
    2. i ：IgnoreCase 忽略大小写
    3. 如果证则表达式需要从头到尾匹配，需要以”^”开头，以“$”结尾
  3. reg1.test(str) 检查此字符串是否否和该正则表达式
3. Array对象
  1. 创建：
```
var arr1 =  new Array();
var arr2 =  [];
```
  2. 常用方法和属性
    1. arr.length 后去数组中元素的个数
    2. arr.concat(arr1,arr2,arr3) 将多个数组合并成一个数组
    3. arr.join(String) 将数组中的元素按照指定的字符连接起来称为一个字符串。
    4. arr.reverse() j将数组反转
    5. arr.slice(start , end) 返回数字中的一端
    6. arr.splice(start , deleteCount ,value) 从数组中移除一个或多个元素，如果有必要的话在所移除的位置插入新的元素，并返货回所有的移除的元素。
    7. arr.pop() 移除数组中最后一个元素，并返回该元素
    8. arr.push() 在数组的末尾添加元素，并返回数组的长度
    9. arr.shift() 移除数组中的第一个元素，并返回该元素
    10. arr.unshift() 为数组的开头添加元素，并返回数组的新长度。
    11. arr.sort() 返回排序后的数组（默认字典排序）
4. date对象
  1. 创建：
```
var date1 = new Date();//当前时间
var date2 =  new Date(年， 月 ，  日，[时， 分 ，  秒]);//指定时间 ， 可以只有 年月日
注意： 指定时间时 月份是从0开始的
```
  2. 常用方法
    1. data.toLocaleString() 把日期(一个数值)转变成本地日期格式字符串
```
例如：var date2 = new Date(2008,7,8);                                  date2.toLocaleString();
// "2008/8/8 上午12:00:00"
```
    2. data.getFullYear() 获取日期对象中所表示时间的年份
    3. data.getMonth() 获取日期对象中所表示时间的月份，返回一个 0 到 11 之间的整数，0表示一月。
    4. data.getDate() 获取日期对象中所表示一个月的日期值，返回值是一个处于 1 到 31 之间的整数，代表了相应的日期值。
    5. data.getDay() 获取日期对象中所表示一个周的日期值。返回的值是一个处于 0 到 6 之间的整数，0表示周日，6表示周六。
    6. data.getTime() 返回从 1970 年 1 月 1 日至指定时间的毫秒数。
5. Math对象
  1. Math可以直接拿来用
  2. 常用方法和属性
    1. Math.PI 返回圆周率的值，约等于 3.141592653589793。
    2. Math.exp(number) 返回 e（自然对数的底）的幂。
    3. Math.abs(number) 返回数字的绝对值。
    4. Math.ceil(number) 向上取整
    5. Math.floor(number) 向下取整
    6. Math.round(number) 四舍五入到整数
    7. Math.random() 返回介于 0 和 1 之间的伪随机数。
6. 全局对象
  1. 全局对象没有语法直接调用其方法
  2. parseFloat(numString) 将字符串转换成浮点数。
```
例如：parseFloat("13.14")    // 返回number类型的13.14
```
  3. parseInt(numString) 将字符串转成整数，非四舍五入。
```
例如：parseInt("9.99")    // 返回number类型的9
```
  4. isNaN(numValue) 判断一个值是否为非数字。
```
例如： isNaN("abc")    // true
isNaN("123")    // false
```
  5. eval(codeString) 判断一个字符串并将其以脚本代码的形式执行
```
例如：eval("alert(1+2)");   //会直接将"alert(1+2)"当作代码执行，弹出3
```

自定义对象

方式一：构造函数定义对象

function Person(){}  // 定义一个空的Person对象function Person2(参数1,参数2...){对象内容...
}                                   //定义一个带参数的对象

方式二：对象直接量

var p3 = {"key1" : "value1","key2" : "value2".........
}

对象中取值：
```
P3.key1   或者   p3["key1"]
```
案例：

四、DHTML

DHTML概述
1. DHTML: Dynamic HTML 动态的 html
2. DHTML并不是一门新的技术, 而是将现有的HTML, CSS, JavaScript整合在一起, 形成了DHTML技术
3. DHTML分为BOM和DOM。
4. BOM：Browse Object Modle 即浏览器对象模型，其中封装了浏览器操作相关对象。
5. DOM：Document Object Modle 即文档对象模型，将整个HTML文档按照文档结构组织成了树形结构。

BOM

Window对象
1. 此对象为全局对象，因此，调用方法或属性时，可以省略window。
2. 常用事件：
  1. onclick事件 – 当窗口被点击时触发
  2. onfocus事件 – 当窗口获得焦点时触发
  3. onblur事件 – 当窗口失去焦点时触发
  4. onload事件 – 当整个html文档加载完之后立即触发
3. 常用方法：
  1. alert() – 消息对话框
  2. confirm() – 确认对话框
location对象
1. 属性：href 获取或设置浏览器地址栏的url

案例：

<!-- BOM --><script type="text/javascript">//window对象//1.在按钮点击时弹出提示框function clickfn(){alert("按钮被点击");}//2.输入框1获得焦点时弹出提示框function focusfn(){alert("输入框1获得焦点 ");}//3.输入框2失去焦点时弹出提示框function blurfn (){alert("输入框2失去焦点");}//4.弹出输入框3中的value值onload=function(){//获取输入框3的input按钮var inp = document.getElementById("input3");alert(inp.value);}//5.点击删除商品按钮，弹出提示是否删除,如果确定，则弹出商品已删除，否则弹出商品还在function delfn(){if(confirm("确认删除商品？")){alert("商品已删除");}else{alert("商品还在");}}//location对象//1.弹出当前urlalert(location.href);//2.将页面url设置为"http://www.baidu.com"alert("此页面将跳转到tmooc");location.href = "http://www.baidu.com";</script>

DOM

获取元素
1. document.getElementById(“id值”); 通过id值获取指定id的元素
2. document.getElementsByName(“name属性值”); 通过name属性获取指定name值的所有元素组成的集合数组
3. document.getElementsByTagName(“元素名”); 通过元素的名称获取指定元素名的所有元素组成的集合数组
4. value属性：获取或设置输入框的value值
5. innerText： (部分浏览器不支持) 获取或设置元素内的文本内容
6. innerHTML：获取或设置元素的html内容
元素的增删改
1. docuemnt.createElement(“div”); 创建一个div元素
2. body.appendChild(oDiv); 往body中追加一个子元素
3. body.removeChild(oDiv); 删除oDiv子元素
4. body.replaceChild(oNewDiv, oDiv); 用oNewDiv替换已有的子元素oDiv
5. body.insertBefore(oDiv1, oDiv); 往body中插入一个子元素oDiv1, 子元素是插入在oDiv的前面
6. oDiv.cloneNode([boolean]); 克隆
7. oDiv元素, 参数默认值为false, 表示只克隆元素本身, 不克隆oDiv内的所有子孙元素, 如果希望克隆元素还克隆元素内容所有子孙元素, 可以传入参数true！！！

案例1：

/* --通过ID获取并弹出用户名输入框的值-- */function demo1(){//根据ID获取用户名输入框，un即代表整个输入框var un = document.getElementById("username");alert(un.value);//可以自己设置value值un.value = "兰姐";}/* --通过name属性获取并弹出密码输入框的值-- */function demo2(){//根据name属性获取密码输入框，因为name属性可以重复，所以获取的是一个集合数组var pwarr = document.getElementsByName("password");//在数组中获取第一个元素var pw = pwarr[0];alert(pw.value);}/* --通过元素名称获取并弹出确认密码输入框的值-- */function demo3(){//根据标签名获取确认密码输入框，同样，获取的是一个数组var inparr = document.getElementsByTagName("input");//获取第三个元素var pw2 = inparr[2];alert(pw2.value);}   /* --获取元素内容-- */function demo4(){var oP = document.getElementById("pid");//获取p标签中的文本内容 innerText(部分浏览器不支持)alert(oP.innerText);//获取p标签中的所有html内容 innerHTML(绝大部分浏览器都支持)alert(oP.innerHTML);//设置p标签中的html内容oP.innerHTML = "<font color='blue'>我要变身了...!</font>";}

案例2：

/* --添加节点: 添加一个div元素到body的最后面-- */function addNode(){//获取父元素 //var oBody = document.getElementsByTagName("body")[0];//body是document的子对象，所以可以直接获取var oBody = document.body;//创建一个游离div元素var oNewDiv = document.createElement("div");//给div中添加内容oNewDiv.innerHTML = "我是新来的....!";//将div元素挂载到父元素上oBody.appendChild(oNewDiv);}/* --删除节点: 删除body中id值为 div_3 的div元素-- */function deleteNode(){//获取父元素bodyvar oBody = document.body;//获取要删除的元素div_3var oDiv_3 = document.getElementById("div_3");//解除父子关系oBody.removeChild(oDiv_3);}/* --更新节点: 用新节点替换id值为 div_2 的div元素  -- */function updateNode(){//创建一个新节点var oNewDiv = document.createElement("div");oNewDiv.innerHTML = "我是来替换的~!";//获取被替换的元素var oDiv_2 = document.getElementById("div_2");//获取父元素, 并通过父元素替换子元素var oBody = oDiv_2.parentNode;oBody.replaceChild(oNewDiv, oDiv_2);}/* --克隆节点、插入节点到指定元素的前面--*/function copyNode(){//获取指定元素var oDiv_4 = document.getElementById("div_4");//克隆元素var oCloneDiv = oDiv_4.cloneNode(true);//false 默认值, 只克隆元素本身, 不克隆元素内容//获取父元素bodyvar oBody = document.body;var oDiv_2 = document.getElementById("div_2");//将克隆元素插入到指定位置oBody.insertBefore(oCloneDiv,oDiv_2);}

大数据WEB阶段（四）JavaScript相关推荐

大数据WEB阶段 TransientDateAccessResourceException
大数据WEB阶段 TransientDateAccessResourceException 一 . 分析如果数据库保存的字段有时间 , 但是没有给该字段赋值时 ,则该字段默认是0000-00-00 ...
大数据WEB阶段（九）Servlet+Request
Servlet与Request 一.概述 Servlet 是sun公司提供的一门用于开发动态web资源的技术按照这套规范写出来的servlet可以放置在web应用中在servlet容器中运行 . 开 ...
大数据WEB阶段（六）MySql详解（一）
MySql(二) 一.概述什么是数据库数据库(Database)是按照数据结构来组织.存储和管理数据的仓库,简而言之就是存储数据的仓库. 数据库的分类层次式数据库.网络式数据库.关系型数据库数 ...
大数据WEB阶段Spring框架（四）Spring-MVC
Spring-MVC 零.目录 Spring-MVC介绍 Spring-MVC入门案例使用注解形式简化Cotroller 配置资源解析器三种方式获取页面传递过来得参数获取参数时的乱码问题日期获 ...
大数据WEB阶段（十四）JavaEE开发模式
JavaEE开发模式零.目录开发模式发展历程 MVC设计思想的出现 JavaEE经典三层架构经典三层架构解耦一.开发模式发展历程 Servlet是JavaEE开发中一种动态web资源开发技术 ...
大数据WEB阶段Maven安装配置与使用
Maven 零.目录 Maven简介 Maven 的安装与配置创建Maven工程创建maven-web工程搭建私服使用本地资源库阿里私服 maven命令上传本地工程到私服中 maven-w ...
大数据WEB阶段总结
一.概述 HTTP协议 web容器 - Tomcat 静态web资源 - 本质上是文件 html css js 图片音频视频 flash- 动态web资源 - 本质上是程序 Servelt JSP ...
大数据WEB阶段（十三）JSP（二）JSP标签、EL表达式、JSTL
JSP标签.EL表达式.JSTL (一)JSP标签技术一.JSP标签技术概述 jsp本质上是一种动态web资源开发技术 , 看起来像是html , 但其中可以写java代码 , 非常方便用来开发动态 ...
大数据WEB阶段（十）Response、ServletConfig、ServletContext、资源跳转三种方式
Response.ServletConfig.ServletContext.资源跳转三种方式 - (一)Response 一.Response概述在doGet和doPost方法的参数中,HttpSe ...

大数据WEB阶段（四）JavaScript

JavaScript

一、JavaScript概述

二、在html中引入js代码

三、js语法

四、DHTML

大数据WEB阶段（四）JavaScript相关推荐

最新文章

热门文章