简单javascript的使用

最新推荐文章于 2024-04-08 19:14:22 发布

Importcode

最新推荐文章于 2024-04-08 19:14:22 发布

阅读量4k

点赞数 2

分类专栏： javascript 文章标签： javascript 浏览器

本文链接：https://blog.csdn.net/qq_34123420/article/details/51889427

版权

javascript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1 javascript的简介

是基于对象和事件驱动的语言，应用于客户端

基于对象：提供了好多对象，可以直接拿过来使用

事件驱动：html做网站静态效果，javascript动态效果

客户端：专门指浏览器

js的特点

（1）交互性信息的动态交互

（2）安全性 js不能访问本地磁盘的文件

（3）跨平台性只要能够js的浏览器，都可以运行

javascript和java的区别

（1 ）java是sun公司，现在oracle，js是网景公司

（2）javascript 是基于对象的，java是面向对象的

（3）java是强类型的语言，JavaScript是弱类型语言

（4）JavaScript只需解析就可以执行，java得先编译成字节码文件，在执行

JavaScript的组成

三部分组成

1 ECMAScript ECMA：欧洲计算机协会

2 BOM broswerobject model 浏览器对象模型

3 DOM document object model 文档对象模型

2 JavaScript和html结合方式（两种）

1 使用标签<scripttype="text/javascript"> ja代码；</script>

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

创建一个js文件，写js代码

使用第二种方式的时候，就不要在script标签里面写js代码了，不会执行

3 JavaScript的原始类型和声明变量

定义变量都是用关键字 var

js的原始类型（五个）

string:字符串

number：数字类型

boolean：true和false

null：var date = new Date(); 获取对象的引用，null表示对象引用为空，所有对象的引用也是object

undifined定义一个变量没有赋值 var aa;

typeof(变量名称) 可以查看数据的类型

4 js的语句

js里面的这些语句

if判断语句

switch语句支持所有的数据类型

循环语句 for whiledo-while

5 js的运算符

js里面不区分整数和小数

var str="456"alert(str-1) 相加与java相同，想减进行减法运算

提示NaN：表示不是一个数字

boolean 类型也可以操作 true相当于1 false相当于0

== 和 ===区别

做判断

==比较的只是值

===比较的是值和类型

引入知识

直接向页面输出的语句（可以把内容显示在页面上）

docment.write(内容); 可以写<br/><hr/>

可以向页面输出固定变量值，还可以输出html代码

document.write里面是双引号，如设置标签的属性需要使用单引号

7 js的数组

定义方式（三种）

第一种：var arr = [1,2,3]

第二种：使用内置对象Array var arr1 = new Array(5) //定义一个数组，数组的长度是5arr1[0]=1 .....

第三种，使用内置对象Array var arr2 = new Array(1,2,3);//定义一个数组，数组元素是12 3

数组有一个属性length 数组的长度数组的长度是可变的，可以存放不同类型的数据

8 js的函数

在js里面定义方法(三种方式) 函数的参数列表里面需要写var 直接写参数名称

第一种方式：

使用一个关键字funtion

funtion方法名（参数）{

方法体

返回值可有可无（根据实际需要）

}

例：funtion test(){

Alert(“qqqq”);

}

test();

有参数：funtion add1(a,b){

varsum = a+b;

returnsum;

}

第二种方式

匿名函数：funtion(参数列表){}

var add2=funtionadd1(a,b){

varsum = a+b;

returnsum;

}

调用add2(1,2)

第三种方式（用的少）

使用js里面的一个内置对象 Funtion

Varadd=new Funtion(“参数列表”,”方法体和返回值”)

9js的全局变量和局部变量

全局变量：在script标签里面定义一个变量，这个变量在页面js部分都可以使用，方法内外部，另外的script标签都可以使用

局部变量：在方法内部定义一个变量，只能在方法内部使用，如果在方法外部调用会出未定义的错误

Ie自带调试工具，F12

10script标签的位置存放

建议把script标签放在</body>后面

如果有这样的一个需求：

在js里面需要获取到input里面的值，如果把script标签放到head

里面会出现问题

Html解析时从上到下解析的，script标签放到的是head里面，直接

在里面取input里面的值，因为页面还没有解析到input那一行，所以取不到。

11js的重载方法名相同，参数不同

js的重载是否存在？不存在，可以通过别的方式模拟存在(arguments)

调用最后一个方法

会把传递的参数保留在arguments数组里

12总结

1什么是JavaScript基于对象和事件驱动的语言，应用于客户端

2特点：交互性，安全性，跨平台性

3JavaScript和java的区别

4组成 ECMAScriptbom dom

5Js和html的结合方式（两种）1<sctipt type=”text/javascript”></script>

2<script type=”text/javascript” src=”js路径”></script>

6js的数据类型

五种原始类型 stringnumber Boolean null undefined

定义变量使用 var

7js的语句 if switch for while do-while

8js的运算符

字符串的操作相加：连接相减：执行相减运算

Boolean类型相加 true：1 false：0

==和===区别 ==：判断数值 ===：判断数据类型和数值

9js的数组

三种定义方式

vararr = [1,2,”3”];

vararr1=new Array(9);

vararr2 = new Array(1,2,3);

属性 length：数组的长度

10js的函数

funtionadd(a,b){方法体和返回值;}

varadd1=function(m,n){方法体和返回值;}

varadd2 = new Function(“a,b”,”方法体和返回值”)

11js的全局变量和局部变量

全局变量：在页面中任何js的部分，都可以使用

局部变量：方法体内部定义一个变量，这个变量只能在方法内部使用

12script标签改革位置

13js的重载

13 js的string对象

创建String对象

var str = “abc”;

方法和属性（文档）

属性：length

方法

1 和html相关的方法

bold() 加粗

fontcolor(color) 设置字符串的颜色

fontsize(); 设置字体的大小

link(url) 将字符串显示成超链接 str.link("hello.html")

sub() sup() 上标和下标

2 与java相似的方法

concat() 连接字符串

charAt（）返回指定位置的字符串

indexOf() 返回字符串位置

split() 切分字符串，成数组

replace() 替换字符串传递两个参数第一个参数是原始字符第二个为要替换的字符

substr() 两个参数，表示从第几位开始向后数几位截取

substring() 同java一样，从第几位开始到第几位结束，但不包括最后一位。

14 js的Array对象

创建数组

var arr = [1,2,3];

var arr2 = new Array(3);//长度为3

var arr3 = new Array(1,2,3); //数组的元素是1,2,3

属性 length

方法 concat() 数组的连接

join() 根据指定的字符分割数组

push(元素) 想数组末尾添加元素，返回数组的新的长度。如果添加的是一个数组，这个时候把数组当做一个整体字符串添加进去

pop() 删除最后一个元素，返回最后一个元素

reverse() 颠倒数组中元素的顺序

15 js的Data对象

js里面获取当前时间

var data = new Data();

方法

toLocalString() 转成习惯的格式

getFullYear() 获取当前的年（四位数字）

getMonth()+1 获取当前的月，因为返回的是0-11月

getDay() 获取当前的星期返回[0-6] 把星期日作为第一天，星期日返回的是0

getData() 得到当前的天 [1-31]

getHours() 获取当前的小时

getMinutes() 得到当前的分钟

getSeconds() 得到当前的秒

getTime() 返回的是1970 0101 至今的毫秒数

应用场景：使用毫秒数处理缓存的效果（没有缓存）http://www.baidu.com?毫秒数

16 js的Math对象

数学的运算里面都是静态方法，使用时可以直接Math.方法();

ceil(x) 向上舍入

floor(x) 向下舍入

round(x) 四舍五入

random() ;得到随机数（伪随机数）

得到0-9的随机数 Math.floor(Math.random()*10)

pow(x,y) x的y次幂

属性 PI 圆周率

17 js的全局函数

由于不属于任何一个对象，直接写名称使用

eval(); 执行js代码（如果字符串是一个js代码，可以直接执行）

var str = "alert(1234);" eval(str);

encodeURI() 和 decodeURI() 对字符串进行编码与解码

encodeURICompanent() 和 decodeURIComponent() 对字符串进行解码与编码（与上面长度不同）

isNaN(); 判断当前字符串是否为数字是数字为false 不是数字为true

parseInt() 类型转换，解析一个字符串并返回一个整数

18 js的bom对象

bom： broswer object model: 浏览器对象模型

属性：

navigator 获取客户机的信息 navigator.appName

screen 获取屏幕的信息

location 请求的URL地址属性href ：获取到请求的url地址location.href，设置url地址 location.href = "地址"

history 请求的url的历史记录

到访问的上一个页面 history.back(); 或者history.go(-1)

到访问的下一个页面history.forward(); 或者history.go(1)

window(重点)

窗口对象顶层对象（所有的bom对象都是在window里面操作的）

属性：opener获取创建这个窗口的窗口的引用

方法：

window.alert() window可以不写

confirm(message); 确认框有返回值 true false

prompt(); 输入对话框可传两个参数提示内容与默认值 window.prompt("请输入内容","0")

open(“打开新的窗口的地址”,"","窗口特征，比如宽度，高度") 打开一个新的窗口

close() 关闭窗口（浏览器兼容性较差）

做定时器

setInterval("js代码","时间"); 1秒=1000毫秒例 window.setInterval("alert('123');","3000") 每三秒调用一次

setTimeout("js代码","时间") 在毫秒数之后执行，但是执行一次

clearInterval(setInterval的返回值) 清除setInterval设置的定时器

clearTimeout(setTimeout的返回值); 清除clearSetTimeout

19 js的dom对象文档对象模型

文档：超文本标记文档

对象：属性和方法

模型：操作使用属性和方法操作超文本标记型文档

可以使用js里面的dom里面提供的对象，使用对象的属性和方法，对标记型文档进行操作

想要对标记型文档进行操作，首先需要对标记型文档里面所有内容封装成对象

需要把html里面的标签，属性，文本内容都封装成对象

document对象：整个html文档

element对象：标签对象

属性对象：

文本对象：

Node节点对象：是这些对象的父对象，如果其他对象找不到方法，到这个对象里找

解析过程：

根据html的层级结构，在内存中分配一个树形结构，需要把html中的每部分封装成对象

DHTML ：是很多技术的简称 html css dom JavaScript

20 document对象表示整个文档

常用方法

write()方法：

1 向页面输出变量

2 向页面输出html代码

getElementById(); 通过id得到元素（标签）进而可以得到该标签的其他属性以及给属性赋值

getElementsByName(); 通过name属性得到对象的集合（数组），之后可以通过数组循环得到集合中每一个对象

传递的参数是标签里面name的值

getElementsByTagName("标签名称") 返回的也是一个集合（数组）

注意：只有一个标签，这个标签只能使用name/Tag获取到，如果只有一个元素，这个时候不需要遍历，只需要加一个下标就可以例：var a = getElementsByName("name")[0];

21 案例：在末尾添加节点

第一步：获取到标签

第二步：创建li标签 document.createElement(“标签名称”)

第三步：创建文本 document.createTextNode("文本内容")

第四步：把文本添加到li下面使用appendChild方法

第五步：把li添加到ul末尾使用appendChild方法

22 元素对象（element对象）

要操作element对象，首先必须获取到element

使用document里面相应的方法获取

方法

获取属性里面的值 getAttribute("属性")

设置属性的值 setAttribute("属性","值")