java web 第二课javascript

一、javascript概述:

1、javascript:客户端脚本语言

What:运行在浏览器上,纯文本的内容

Why:可以给网页添加交互功能,省事,省时间,省流量

交互:获取页面数据--浏览器处理数据--浏览器返回处理结果提示信息。

特点:类java和c对语法

自上向下解释执行

使用文本编写,直接嵌入HTML中执行

2、Javascript应用场景:

表单验证;客户端数据计算;特效动画

3、first javascript:

1)、事件中:鼠标在浏览器中触发的操作:

如:单击,焦点转移,鼠标滑过

语法:on事件名="js语句"

缺点:不可重用;不适合复杂逻辑

2)、head中的<script>标签下:页面中专门集中放置js语句的区域。

语法:

step1:

<script>

function method1(){

js语句;

}

</script>

step2:

on事件名="方法名()"

缺点:仅当天页面可用。无法全网站公用。

3)、js文件:专门保存js脚本的独立文件。纯文本

范围:全网站公用。

步骤:Step1:新建文本文件,扩展名为js

Step2:网页中引入外部js文件

<script src="js文件路径"></script>

4、javascript调试:

When:页面加载时,或单击按钮时,希望出现的效果没有出现,说明出错!要打开错误控制台调试

How:工具-->Web开发者-->错误控制台

如IE:F12

二、基础语法:

1、变量:

动态类型:变量的类型不必提前限定,后续赋值什么类型,会自动认为是什么类型

声明:var 变量名=值

如:var count=0;

变量作用域:——同java

2、数据类型:

1)、String:表示字符串,首尾由单引号或双引号包裹

拼接:

var str="bye";alert(str+str);//byebye

var n="5";alert(n+n);//55

2)、Number:所有数字

强调:不区分整数和小数

64位浮点数格式,相当于double

计算:var n=5;alert(n+n);//10

3)、Boolean:只有两个值true和false

4)、隐式转换:

如:var s1="a"; var s2="b";

var n1=1; var n2=2;

var b1=true; var b2=false;

alert(n1+s2);//1b

强调:数字+字符串:数字转为字符串

alert(b1+b1);//2

强调:布尔类型做加法:都被转为数字计算

alert(n2+b1);//3

强调:数字+布尔:布尔类型转为数字

alert(s1+b1);//atrue

强调:字符串+布尔:布尔转为字符串

5)、显示转换:使用函数转换数据类型——直观、规范、可控

i、查看变量类型:

When:不确定变量类型时使用

语法:typeof(变量):返回类型的名称

Ii、转换为字符串:变量.toString():所有数据类型均可以转为字符串类型。

iii、转换为整数:

语法:parseInt(变量)

说明:数字或以数字开头的变量可以转为数字

如果不能转,返回NaN(not a number)

如:parseInt("6.12");//6

parseInt("");//NaN

parseInt(22.5);//22

parseInt("1234abcd");//1234

parseInt("12px")+2=14+"px"

parseInt(true);//NaN

说明:**自动去除前后空格;**自动去除数字后的字母。

iv、转换为浮点数:

语法:parseFloat

如:parseFloat("6.12");//6.12

parseFloat("6.12abcd");//6.12

6)、验证是否数字:

When:验证用户的输入是否为数字时使用

语法:isNaN(变量)

is not a number:返回true——不是数字

返回false——是数字
如:isNaN("")//false**

isNaN(22.5)//false

isNaN("10")//false 可以被强制转为整数

isNaN("1234blue")//true**

isNaN(true)//false** 可以隐式转换为1

isNaN(NaN)//true

alert(NaN==NaN)//false

**vs parseInt:

1234abcd:isNaN认为不是数字,但parseInt可以强制转换。

true:isNaN认为是数字,但parseInt,无法转换

"true":isNaN返回true,不是数字

7)、DEMO:

i、如何获取页面控件:

语法:

var 变量名 = document.getElementById("id值")

在页面中. 按id选择一个元素("id值")

ii、控件的内容:

语法:

控件对象.value:得到控件的内容文本

强调:文本框的value永远是"内容"字符串

8)、null与undefined:

i、null:空对象指针

When:主动清空一个对象时使用。但是变量还在

如:var car=null; typeof(car);//object

判断null:if(变量==null)

ii、undefined:

When:想要使用一个未声明或声明但从未赋值的变量时,会出异常undefined

typeof(sss);//undefined

var sss;

typeof(sss);//undefined

var sss=null;

typeof(sss);//object

iii、undefined判断:

语法:if(变量===undefined)

强调:

===严格相等:类型必须一样,内容也要一样

3、严格相等:

var a="10";  var b=10;

if(a==b) 判断a是否等于b

if(a===b) 判断a的类型是否等于b而且内容也等于b

if(a!==b) 只要a和b的数据类型或值有一个不一样就返回true

4、DEMO:

1)、失去焦点事件:

当光标离开控件时,控件失去焦点,触发事件

语法:onblur(this)

其中:this:谁触发事件,this就代表谁

使用this.value可以一次获得当前控件的内容。

三、javascript内置对象:

1、什么是内置对象:

封装了常用的功能和属性,可以快速调用,来解决开发中重复的关键问题。

2、String对象:

1)、查找和替换:

语法:查找子字符串:

字符串对象.indexOf("子字符串")

返回:子字符串第一次出现的位置

从指定位置开始查找子字符串:

字符串对象.indexOf("子字符串”,开始位置)

如果未找到:返回-1

替换:

字符串对象.replace("子字符串","目标字符串");

说明:只替换第一次出现的匹配子字符串

一般都与indexOf配合循环使用

2)、String中使用正则表达式:

语法:字符串对象.函数(/正则表达式/属性后缀)

三个函数:

str.match(/正则表达式/属性后缀)

What:获得字符串中匹配的子字符串数组

如果不加属性后缀,则默认只得到第一个

如果加属性后缀:g,后去全局中匹配的所有项,保存在数组中

如果加属性后缀:i,表示忽略大小写

如果没有找到:返回0个元素的数组

str.replace(/正则表达式/属性后缀,"目标字符串")

3)、正则表达式对象:

When:对字符串进行格式、长度等模式匹配时使用。

创建:方法一:

var 变量名=/正则表达式/gi;

方法二

var 变量名=new RegExp("^正则表达式$","gi");

强调:如果使用第二种方式证明正则表达式

双引号中的如\d,必须转义为\\d

4)、表单验证:

验证格式匹配:

语法:var regEx = /正则表达式/

regEx.test(要验证的内容);

返回:true:验证通过

false:验证失败

补充:^:表示必须以正则表达式内容开始

$:表示必须以正则表达式内容结束

^正则表达式$:必须完全匹配

5)、Math对象:用于执行数学计算

强调:无需赋值,直接调用。

常用属性:Math.PI

保存了数学计算常用的常量

常用方法:如三角函数、反三角函数等

随机数:

语法:Math.random():默认生成0-1之间的随机数。可能为0,但绝不会为1

如:60-100之间的随机数

60+(100-60)*Math.random()

min+(max-min)*Math.random();

看图:6_Math fun.png

乘方计算:

Math.pow(底数,次方):

如:Math.pow(0.85,3) 0.85的3次方

6)、Number对象:

number.toFixed(小数位数):按指定小数位数四舍五入

说明:如果number的小数位数超过则四舍五入

如果number的小数位不足,用0补齐

7)固定资产折旧:

10000:8500

8500*(1-15%)

8500*(1-15%)*(1-15%)

10000*Math.pow(0.85,year)

3、Array对象:

1)、创建:

语法:var 变量名 = new Array(元素个数);

元素个数可以省略

初始化:

var 变量名 = new Array(元素1,元素2,元素3...)

强调:数组中的元素,不限定类型:

如:var test = new Array(100,"a",true);

简写:var 变量名 = [元素1,元素2,...];常用

访问元素:

数组变量名[下标]

二维数组:

var test = new Array(7);

test[0] = new Array(2);

**区分:new Array(7):有7个元素的数组

**7不是最大上限,可以超过

new Array([7]):只有一个元素的数组,第一个元素是7.

new Array():0个元素的数组,但是后续可以初始化任意多个元素

2)、方法和属性:

回顾:str.match(/js/g); 返回一个数组

返回值.length:数组中元素的个数

i、获取数组中元素个数:.length

ii、打印所有元素:

数组.toString():默认使用都好分割每个元素

自定义连接符:

数组.join(‘连接符‘):使用自定义的连接符分割每个元素。

3)、连接数组:把两个数组连接起来。返回连接后的新数组

语法:

数组.concat(元素1,元素2,元素3):直接将元素追加到数组后,形成新数组

或数组A.concat(数组B):将数组B的元素追加到数组后,形成新数组

强调:原数组均不变。

4)、获取子数组:

语法:数组.slice(开始位置,结束位置)

强调:结束位置省略,表示获取从开始位置先后所有元素

   **前包含后不包含

5)、数组排序:

i、默认排序:按元素转化为字符串后进行排序

语法:数组.sort()

强调:**排序会直接修改原始数组

ii、自定义排序:

语法:

Step1:定义排序逻辑

排序函数:

function 函数名(参数1,参数2)

{

比较逻辑;

return 大于0或小于0的数;

}

Step2:

数组.sort(函数名)

说明:所有浏览器无论采用什么办法,都只有从小到大的排列。把小的数放签名,把大的数放后边

人为颠倒逻辑,就好像骗过浏览器,让他以为原来的a-b>0;其实是-(a-b)>0;

如果比较逻辑相反:即为倒叙

6)、数组元素颠倒:把原数组所有元素前后颠倒

语法:数组.reverse()

4、Date对象:

1)、创建:var now = new Date();

说明:实例化一个日期对象

同时默认获得当前系统时间

var date2 = new Date("2013/3/20 11:12");

2)、常用的方法:

i、日期处理:

日期对象.getDate():获得时间中,日期部分。

日起对象.toLocaleString();包含日期和时间的完整格式化。自动转化为浏览器系统格式

.toLocaleDateString():只显示日期部分

.toLocaleTimeString():只显示时间部分

说明:无24小时转12小时的函数,要自己计算和拼接字符串

修改日期:日期对象.setDate(天数):根据天数和现在的日起对象,自动计算出新的日期

如:4.25.setDate(44)=4.44=>5.14

ii、小时处理:

语法:.getHours():日期中小时部分

总结:日期的每个组成部分,都有get方法对应

日期中的每个组成部分,都对应有set方法。

set方法都会自动判断时间进位。

5、Function对象:

1)、现象:同名,不同参数两个函数,无论调用时传递多少个参数,永远只执行最后一个。

原因:javascript中一切都是对象。方法也是对象

实际上:javascript方法是:

var 变量名/方法名 =

new Function(

"参数1","参数2",...."参数n",

"方法体"

);

简写:var 变量名/方法名 =

function(参数列表){

方法体

}——时髦

2)、Function对象的常用属性和方法:

length属性:获得方法的参数个数

.toSrting()方法:打印完整方法内容

3)、arguments:函数内部悄悄保存所有传入参数的数组。

所有function中都隐含着arguments数组,可以直接使用。

i、强调:javascript中方法定义不用声明形参列表,就可任意传参。

所有传入的参数,自动被arguments数组全部保存。

所有参数都可以使用arguments数组的下标访问。

6、全局函数:不用赋值和实例化,即可直接使用的函数

常用:parseInt/parseFloat isNaN

1)、编码解码:

When:使用URL向服务器传递表单参数时,如果包含多字节字符,会出现乱码。

解决:需要在发送前对内容进行编码

编码:把多字节文字转换为单字节编码

接收方需要解码后才能看到正常内容

解码:把单字节编码还原回多字节内容

encodeURI(带汉字的字符串):编码

返回的是编码后的ASCII字符串

decodeURI(编码后的ASCII字符串):解码

返回的是转换后的带汉字的字符串

2)、eval函数:可以计算表达式的值,还可以执行字符串中的javascript语句

When:执行一条字符串形式的语句时使用

强调:eval函数如果接受的字符串是非法的js语句,则抛出异常,需要做异常处理!

var r = 2+3;

var r = eval("2+3");

错误:

var r = 2+3=;

var r = eval("2+3=");

以上两句都有报语法错误

异常处理:

try{

eval语句;

}catch(error){显示error}

其中error包含的就是异常的信息,可以直接显示

时间: 2024-09-29 20:46:26

java web 第二课javascript的相关文章

Jquery第二课 Javascript基础

基础知识 网页由三个部分组成:HTML.CSS和JavaScript.它们分别完成不同的功能,其中HTML描述页面内容.CSS负责内容的展示.JavaScript添加交互功能和动态效果.三者一起组成一个完整的Web页面. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>长沙戴维营教育jQuery教程 第二课</title> <!-- CS

Web前端学习-第二课JavaScript篇

Q3:怎么检测数据类型?有哪些方式?其原理是什么? Typyof检测基本数据类型,,返回值是一个代表数据类型的字符串,而且是小写的:instanceof检测对象类型(原理是获取某一对象实例).Constructor检测对象的已有属性类型或者基本数据类型:object.prototype.toString()得到一个表示对象的类型的字符串.此方法可有效判断数组,函数,正则表达式,等对象类型(引用类型)可判断null和undefined: 描述一下Typeof和instanceof在判断类型的时候,

Java反射第二课 动态加载类

在第一节课中我们讲的第三种方法 Class.forName("类的全称"); 不仅表示了类的类类型,还代表了动态加载类 请大家区分编译,运行 编译时刻加载类是静态加载类,运行时刻加载类是动态加载类 现在的开发工具比如eclipse把编译过程给隐藏了 下面做一个实验 比如用记事本编写下面的Office.java文件 class Office { public static void main(String[] args) { if(("Word").equals(ar

【设计模式】Java设计模式第二课之单例模式

单例模式是自打我知道设计模式这个名词之后,第一个听说的一个具体的设计模式.它的使用情景是有一些关键性资源只允许产生一个实例.如果有多个实例产生的话,就会对我们的实际情况产生许多干扰. 以下是我在看书的过程中总结的几个要点: 确保一个类只有一个实例,并提供一个全局访问实例. 在Java中实现单例模式需要一个私有的构造方法,一个静态方法和一个静态实例. 确定在性能和资源上的限制,然后小心的选择适当的方案来实现单例,以解决多线程问题(我们必须认定所有的程序都是多线程的) 如果使用了多个类加载器,可能导

java程序设计第二课

抽象基类和接口 能够使用keywordabstact来创建抽象类,该抽象类不能被实例化 也能够使用keywordabstact来描写叙述一个尚未被详细实现的方法,该方法不能包括方法体 一个抽象方法仅仅能在抽象类中创建,当该类被继承时,抽象方法必须有详细实现,或者继承类声明为抽像类 interfacekeyword比abstact类更进一步,不同意有方法定义 接口提供了接口与实现完美分离,java不支持多继承,但能够通过实现多个接口来达到这一目的. C++把对象置于堆栈或静态存储区 java提供被

【Web探索之旅】第二部分第二课:服务器语言

内容简介 1.第二部分第二课:服务器语言 2.第二部分第三课预告:框架和内容管理系统 第二部分第二课:服务器语言 介绍了Web的客户端,我们来谈谈Web的服务器端. 既然客户端有客户端的编程语言(HTML,CSS和JS),那么我们服务器端岂能逊色呢,对吧. 服务器端也有不少种编程语言.这些编程语言写成的程序会在服务器端的电脑上被执行. 如果说客户端的语言编写的程序决定了我们的网页的外观,那么服务器端的语言编写的程序决定了网页的功能和如何与用户交互. 你也许会问:"既然我们可以用HTML,CSS和

Kali Linux Web 渗透测试视频教程— 第二课 google hack 实战

Kali Linux Web 渗透测试— 第二课 代理简介 文/玄魂 课程地址: http://edu.51cto.com/course/course_id-1887.html 目录 shellKali Linux Web 渗透测试—... 1 第二课代理简介... 1 课程目录... 2 Proxy基本原理... 2 正向代理(Forward Proxy)3 反向代理(reverse proxy)... 3 透明代理(transparente proxy)... 3 Kali linux中的代

OSChina 技术周刊第二十期 —— 使用 Docker 搭建 Java Web 运行环境

每周技术抢先看,总有你想要的! 移动开发 [软件]移动端web框架 Frozen UI [博客]Android各种Adapter的用法 服务端开发/管理 [翻译]2014 Docker 的竞争随即而来 [翻译]Docker 和 PID 1 僵尸进程问题 [软件]Node.js 串口读写包 node-serialport [软件]Nginx 模块 Nginx-Clojure [博客][Web安全之实战] 跨站脚本攻击XSS [博客]Tiny框架应用实践之Tiny社区 [博客]Laravel大型项目

全端Web开发 使用JavaScript与Java 阅读笔记

计算机科学领域只有两大难题:缓存失效和命名. REST(Representational State Transfer)技术,他建议一种Web服务消息传递的风格. 第一章:因变而变 企业家总在寻求变化,他们适应变化,并把它当作一种机遇. J2EE和JSP经过完善变成了JEE和JSF. 现代的客户端-服务器架构里,服务器更大程度上负责相应客户端的请求,提供资源的访问方式(通常使用XML 和JSON交换信息).在过去的服务器驱动模型中,页面(和与之相关的数据)都在服务器端生成完毕,一起返回客户端在浏