JavaScript基础知识大全

2018-7-12 14:43| 发布者: admin| 查看: 19| 评论: 0

摘要: 1 定义JavaScript是由Netscape(网景)公司研发出来的一种在它的Navigator浏览器上执行的程序语言。JavaScript是一种基于对象(object-based)和事件驱动(Event Driven)的简单的并具有安全性能的脚本语言。JavaScript ...

1 定义

JavaScript是由Netscape(网景)公司研发出来的一种在它的Navigator浏览器上执行的程序语言。

JavaScript是一种基于对象(object-based)和事件驱动(Event Driven)的简单的并具有安全性能的脚本语言。

JavaScript组成

ECMAScript:JavaScript的核心

文档对象模型(DOM):DOM(文档对象模型)是 HTML 和 XML 的应用程序接口(API)。DOM 将把整个页面规划成由节点层级构成的文档

浏览器对象模型(BOM)对浏览器窗口进行访问和操作

扩展:JScript:微软推出的类似JavaScript的语言

2 特点

1.脚本语言

脚本语言是一种简单的程序,是由一些ASCII字符构成,可以使用任何一种文本编辑器编写。一些程序语言(如C、C++、Java等)都必须经过编译,将源代码编译成二进制的可执行文件之后才能运行,而脚本语言不需要事先编译,只要有一个与其相适应的解释器就可以执行。

脚本语言是指在web浏览器内有解释器解释执行的编程语言,每次运行程序的时候,解释器会把程序代码翻译成可执行的格式。

2、基于对象的语言

面向对象有三大特点(封装,继承,多态)却一不可。

通常“基于对象”是使用对象,但是无法利用现有的对象模板产生新的对象类型,也就是说“基于对象”没有继承的特点。没有了继承的概念也就无从谈论“多态”

3. 事件驱动:

在网页中执行了某种操作的动作,被称为“事件”(Event),比如按下鼠标、移动窗口、选择菜单等都可以视为事件。当事件发生后,可能会引起相应的事件响应。

4、简单性

变量类型是采用弱类型,并未使用严格的数据类型。

var a,b,c; a=123; b=“abc”; a=b;

5、安全性

JavaScript不能访问本地的硬盘,不能将数据存入到服务器上,不能对网络文档进行修改和删除,只能通过浏览器实现信息浏览或动态交互

6、跨平台性

JavaScript依赖于浏览器本身,与操作平台无关,

只要计算机安装了支持JavaScript 的浏览器(装有JavaScript解释器),JavaScript 程序就可以正确执行。

缺点

各种浏览器支持JavaScript的程度是不一样的,支持和不完全支持JavaScript的 浏览器在浏览同一个带有JavaScript脚本的网页时,效果会有一定的差距,有时甚至会显示不出来。

3与Java的区别

区别1:公司不同,前身不同

JavaScript是Netscape公司的产品,是为了扩展Netscape Navigator功能而开发的一种可以嵌入Web页面中的基于对象和事件驱动的解释性语言,它的前身是Live Script;Java是SUN公司推出的新一代面向对象的程序设计语言,特别适合于Internet应用程序开发; Java的前身是Oak语言。

区别2:基于对象和面向对象

JavaScript是脚本语言,是一种基于对象的语言。本身提供了非常丰富的内部对象供设计人员使用,但不支持继承和多态。Java是面向对象的,是一种真正的面向对象的语言,支持封装、继承和多态。

区别3:变量类型强弱不同

Java采用强类型变量检查,即所有变量在编译之前必须声明为某一指定类型。如: int x=1234;JavaScript中是弱类型变量。统一采用var声明,可赋各种数据类型值。

4JavaScript的引入方式

切记:

[1]两种引入方式如果都使用了,那么两种js代码都会执行

[2]在书写js的时候不要把两者书写二合一

JS中变量的类型

[1]变量的声明

var 变量=值;

[2]变量的使用

js中的变量区分大小写

js中的变量可以重复的,但是重复的变量会覆盖

js中分号可以省略的(不建议这样书写)

js中的双引号和单引号是不区分的

[3]数据类型

number(数字类型)

string(字符串类型)

boolean(布尔类型)

object(对象类型)

[4]特殊数据类型

undefined(未定义的)

NaN(不是一个数字) not a number

null(空对象)

var a=1;

var b=1.3;

var c="bjsxt";

var d='js学习';

var e=true;

var f=new Date();

var a=7;

js中数据的类型

//把类信息当字符串返回

alert(typeof f);

//强制转换成number类型

alert(Number(bb));

JS中的运算符

var a=10;

var b =21;

alert(b/a);//2.1

var c="123";

alert(b+a+c);//31123

var d=true;// false--0

alert(a+d);// 11

var e=1;

var e2="1";// number("1")--1

var e3=true;//--1 number(true)--1

var e4="true";//number("true")--NAN

alert(e==e2);//T

alert(e==e3);//T

alert(e==e4);//F

alert(e2==e3);//T

alert(e2==e4);//F

alert(e3==e4);//F

alert(e===e2);//F

alert(e===e3);//F

alert(e===e4);//F

alert(e2===e3);//F

alert(e2===e4);//F

alert(e3===e4);//F

算数运算符

数学运算符

+ - * / % ++ --

逻辑运算符

& | ! && || ^ > =

连接运算符

+

特殊运算

==:(等值符)

先进行数据类型的比较 类型不一致 统一转换成number 在比较内容是否一致 ---内容一致返回 T 内容不一致返回 F

===:(等同符)

先进行数据类型的比较 :类型不一致直接返回F ,类型一致在比较内容 ,内容一致返回T , 不一致返回F

JS中的控制语句

乘法表

for(var i=1;i

for(var j=1;j

//直接打印到浏览器上

document.write(i+"*"+j+"="+i*j+" ");

}

document.write("

")

}

js中的控制语句

条件语句

if(){}

if(){}else {}

if(){}else if(){}..else{}

选择语句

switch (a){

case 10:

alert(a);

break;

case 20:

alert(a);

break;

case 30:

alert(a);

break;

default:

break;

}

循环语句

while(){}

do{}while()

for(){}

函数的声明

java声明函数的方式

public String aa(){

}

/*js函数声明的方式一*/

function a(){

alert("我是函数A");

}

/*函数声明方式二*/

varb=function (){

alert("我是函数声明B");

}

/*函数声明方式三 函数本身就是对象 (了解)*/

var c=new Function("alert('我是函数声明C')");

/*****参数的传递*********/

function d(aa,bb){

//输出到浏览器的控制台中

console.log(aa+"---"+bb);

}

d(1,2);

d(123); //123---undefined

d(1,2,3);//1---2

/*js中形参的个数和实参的个数可以不一致*/

/*******函数的返回值******/

function e(){

console.log("方法e");

return 2;

}

//每一个函数没有定义返回值默认返回undefined

// alert(e());

function f(t){

console.log(t());

}

var uu=function(){

alert("我是uu方法");

}

f(uu);

[1]函数声明的方式

方式一:

function 函数名(){

函数体

}

方式二:

var 变量名=function(){

函数体

}

方式三:

var 变量名=new Function("函数体");

[2]函数参数的传递

js中形参的个数和实参的个数可以不一致

[3]函数的返回值

每一个函数如果没有定义返回值默认返回undefined

[4]函数的执行符 ()

数组的使用

/*数组的声明*/

function demo1(){

//数组声明方式一

var arr=newArray();

//数组声明方式二 5-长度

var arr2=new Array(5);

//数组声明方式三

var arr3=new Array(1,1.2,"bjsxt",true,newDate());

//数组声明方式四(常用)

var arr4=[1,1.2,"bjsxt",true,new Date()];

console.log(arr4);

}

/**数组的使用*/

function demo2(){

var arr=[];

arr[0]=123;

arr[1]=true;

arr[2]="你好";

arr[6]="bjsxt";

arr[10]=new Date();

//js中数组下标是可以不连续的, 如果没有定义指定的下标内容是empty

console.log(arr);

}

/***数组的扩充**/

function demo3(){

var arr=[1,1.2,"bjsxt",true,new Date()];

console.log("前:"+arr);

//数组的缩小

//arr.length=3;

//数组长度的扩充

arr.length=7;

console.log("后:"+arr);

}

/*****数组的遍历***************/

function demo4(){

var arr=[1,1.2,"bjsxt",true,new Date()];

for(var i=0;i

console.log(arr[i]);

}

for(var i in arr){

//i是数组的下标

console.log(arr[i]);

}

}

/**数组中常用的方法**/

function demo5(){

var arr=[1,1.2,"bjsxt",true,new Date()];

//删除最后一个元素,返回元素

//var p= arr.pop();

//在最后添加元素返回的是数组的长度

//var p=arr.push("你好");

console.log(arr);

//删除 从下标为1开始 删除两个

//arr.splice(1,2);

//添加 添加的下标 删除的个数(0) 添加的元素

arr.splice(1,0,false);

console.log(arr);

}

demo5();

[1]数组的声明

[2]数组的使用

[3]数组的扩充

[4]数组的遍历

[5]数组中常用的方法

常用对象学习

/*****Date日期对象*********/

function demo1(){

var date=newDate();

//118 1900到现在的时间

console.log(date.getYear());

//6 从0-11 月份

console.log(date.getMonth());

//5 日期几号

console.log(date.getDate());

//4 星期几 0:代表星期天

console.log(date.getDay());

//2018 全年

console.log(date.getFullYear());

//2018/7/5 下午4:47:54

console.log(date.toLocaleString());

}

/********Math 对象**************/

function demo2(){

//范围是0-1 不包含1

var ran=Math.random();

//4位随机的整数1000-9999 验证码

var a=ran*9000+1000;

//向下取整

console.log(Math.floor(a));

//向上取整

console.log(Math.ceil(12.3));

//四舍五入

console.log(Math.round(12.4));

}

/******字符串对象**************/

function demo3(){

var a="星-期-四";

var b=newString("123");

//期-四

console.log(a.substr(2));

//-期 开始index size

console.log(a.substr(1,2));

//期-四

console.log(a.substring(2));

//- 开始的index 结束的index

console.log(a.substring(1,2));

//字符串的分割 "-" 返回的是一个新的数组

console.log(a.split("-"));

}

/*****Global对象的学习*****/

function demo4(){

var a="123";

var b ="var c=1";

//可以把字符串转化成可以执行的js代码

eval(b);

//console.log(c);

var f="123a";

alert(Number(f));

//检查某个值是否是数字。 如果不是返回 T

var flag= isNaN(f);

alert(flag);

}

demo4();

js中的事件

1.什么是事件

事件是可以被 JavaScript 侦测到的行为

网页中的每个元素都可以产生某些可以触发 JavaScript 函数的事件。比方说,我们可以在用户点击某按钮时产生一个 onClick 事件来触发某个函数

事件通常与函数配合使用,这样就可以通过发生的事件来驱动函数执行

生活案例:

电动车、汽车报警器

燃气泄漏探测器、火灾烟雾探测器

2.有哪些事件

3.事件的触发

JS中事件的使用

function demo1(){

console.log("我的demo1");

}

function demo2(){

console.log("鼠标移动");

}

function demo3(){

console.log("键盘弹起");

}

function demo4(){

console.log("内容改变");

}

function demo5(val){

console.log(val);

}

function demo6(){

console.log("页面加载完成");

}

.div1{

width: 200px;

height: 200px;

border: 1px solid red;

}

中国1

中国2

中国3

总结事件的一般使用情况:

onclick、ondblclick、按钮使用(按钮是绝对不会结合onchange、onblur事件)

onchange、onkeydown、onkeyup onblur、onfocus、结合单行文本框和多行文本框

onchange:下拉框

onload:作用body

onmouseover、onmouseout、onmousemove:某些块元素上结合使用

什么是BOM

BOM是Browser ObjectModel的简写,即浏览器对象模型。

BOM由一系列对象组成,是访问、控制、修改浏览器的属性的方法

BOM没有统一的标准(每种客户端都可以自定标准)。

BOM的顶层是window对象

什么是DOM

DOM是Document ObjectModel的简写,即文档对象模型。

DOM用于XHTML、XML文档的应用程序接口(API)。

DOM提供一种结构化的文档描述方式,从而使HTML内容使用结构化的方式显示。

DOM由一系列对象组成,是访问、检索、修改XHTML文档内容与结构的标准方法。

DOM标准是由w3c制定与维护。DOM是跨平台与跨语言的。

DOM的顶层是document对象

蓝色框内是归DOM管的,红色框内归BOM管的;也可以说DOM也是归BOM管的

BOM 是为了操作浏览器出现的 API,window 是其根对象。

DOM 是为了操作文档出现的 API,document 是其根对象。

BOM中常用对象

/*location对象的学习*/

function demo1(){

//127.0.0.1:8020

//127.0.0.1

//http://127.0.0.1:8020/05JS/03JS%E4%B8%ADBOM%E5%B8%B8%E7%94%A8%E5%AF%B9%E8%B1%A1.html

//8020

//console.log(host+"--"+hostname+"---"+urll+"---"+port)

/**实现页面的跳转*/

// window.location.href="http://www.bjsxt.com";

//*重新加载网页

}

/*History对象学习*/

function demo2(){

//返回浏览器历史列表中的 URL 数量。

// console.log(len);

//前进按钮

//window.history.forward();

//后退

//window.history.back();

//正数前进 负数:后退 0:刷新

}

/*****Screen对象*******/

function demo3(){

console.log(wi+"---"+hi);

}

/****Navigator对象学习*******/

function demo4(){

//用户代理对象

console.log(us);

}

1.什么是DOM

2.DOM节点分类node

元素节点 element node 我的链接

属性节点 attribute node href="链接地址"

文本节点 text node 链接地址 我的链接

3.DOM节点关系

父子关系(parent-child):元素作为父级, 和 元素作为子级

兄弟关系(Sibling):和

元素就是兄弟关系;和 元素并不是兄弟关系

4.DOM操作的内容

1.查询元素(进行操作元素、或者元素的属性、文本)

2.操作文本

3.操作属性

4.操作CSS样式(一个特殊的属性style)

5.操作元素

直接获得对象的方式

/*直接获得*/

function demo1(){

//获得id名称是span1的节点对象--获得单个对象

var span = document.getElementById("span1");

alert(span);

}

function demo2(){

//根据标签的名称获得对象---获得的多个对象

var spans=document.getElementsByTagName("span");

//获得具体的某一个对象

alert(spans[2]);

}

function demo3(){

//通过class获得元素对象---获得的多个对象

var sp=document.getElementsByClassName("sp");

alert(sp.length);

}

function demo4(){

//通过name属性获得元素的对象---获得的多个对象

varinp=document.getElementsByName("inp");

}

间接获得元素对象的方式

function demo1(){

//获得div对象

var div=document.getElementById("div1");

//获得子节点--空白的文本也是一个节点

var chi= div.childNodes;

//只是获得span标签

var sp= div.getElementsByTagName("span");

alert(sp.length);

}

function demo2(){

//获得span对象

var span =document.getElementById("span1");

//获得父节点元素

var div= span.parentNode;

alert(div);

}

function demo3(){

//获得指定的span标签

var span=document.getElementById("span1");

//获得上一个节点 --包含空白文档Text

//var sp= span.previousSibling;

//获得上一个节点 --不包含空白文档Text

//var sp=span.previousElementSibling;

//获得下一个节点 --包含空白文档Text

//var sp=span.nextSibling;

//获得下一个节点 --不包含空白文档Text

var sp=span.nextElementSibling;

alert(sp);

}

北京尚学堂

北京尚学堂

北京尚学堂

北京尚学堂

function demo1(){

//操作元素的节点属性

var inp=document.getElementById("inp");

//获得元素的属性

//alert(inp.type+"---"+inp.name+"---"+inp.value);

//改变元素的属性

inp.type="button";

inp.value="测试一下";

}

function demo2(){

//操作元素的样式

var div=document.getElementById("div1");

//获得样式--只是支持行内样式的书写

//alert(wi+"---"+he);

/*操作css方式一*/

/*操作css的方式二 --通过增加calss属性添加样式*/

div.className="di";

}

/*#div1{

width: 200px;

height: 200px;

border: 3px solid green;

}*/

.di{

width: 300px;

height: 300px;

background-color: pink;

}

JS操作元素的文本内容

function demo1(){

//获得div对象

var div =document.getElementById("div1");

//只是获得节点对象的内容,纯文本的内容

//alert(div.innerText);

//获得节点的文本内容+html标签

//alert(div.innerHTML);

//赋予对象节点的文本内容

//div.innerText="bjsxt";

//会识别HTML对应的代码

//div.innerHTML="bjsxt";

//实现内容的累加

div.innerHTML+= "bjsxt";

}

function demo2(){

//获得input对象

var inp=document.getElementById("inp");

var val= inp.value;

alert(val)

}

function demo3(){

var sel=document.getElementById("sel");

//如果option选项没有value属性,获得的值是对应的文本内容

var val= sel.value;

alert(val);

}

function demo4(){

//获得多行文本框的对象

var tex=document.getElementById("tex");

alert(tex.value);

}

我们都爱笑

javaSE

javaEE

javaME

123

总结:

innerHTML,innerText ,value使用的情景

innerHTML,innerText:通常使用到双标签上

例外(select、textarea)获得值的时候也是用的value属性

value:通常是单标签 :input

JS操作元素的节点对象

function insertNode(){

//创建节点对象

var p = document.createElement("p");

p.innerHTML="照片:";

var inp1=document.createElement("input");

//操作节点对象的属性

inp1.type="file";

var inp2=document.createElement("input");

inp2.type="button";

inp2.value="删除";

inp2.onclick=function(){

//移除子节点的操作

/* p.removeChild(inp1);

p.removeChild(inp2);

//移除所有的节点

p.remove();

}

//指定元素的对应关系 appendChild:添加到现有元素对象之后

//document.body.appendChild(p);

//获得添指定元素对象

var p1=document.getElementById("p_1");

//在指定元素之前添加对象

p.appendChild(inp1);

p.appendChild(inp2);

}

//只会执行一个事件 ,,执行后者绑定的事件

window.onload=function(){

alert("页面加载完成");

}

window.onload=function(){

alert("页面加载完成2");

}

姓名:

照片:

节点操作的方法

document.createElement("标签名");

父节点.appendChild(子节点);

父节点.insertBefore(新节点,指定之前的节点);

父节点.removeChild(子节点);

父节点.remove();

function checkName(){

//获得输入的值

var val=document.getElementById("zh").value;

//获得span标签对象

var span=document.getElementById("span_name");

if(val==""||val==null){

span.innerHTML="× 用户名不能为空";

return false;

}else{

span.innerHTML="√ 用户名合法";

return true;

}

}

//判断表单内容是否提交

function sub(){

var flag=checkName();

if(flag){

//进行表单数据的提交

}

}

账号:

密码:

readonly和disabled

共同点:是文本框不可以更该内容

区别:readonly中对应的数据可以提交到后台

disabled中对应的数据是无法提交到后台

表单提交的形式

[1]

*

onsubmit="return checkName()"

[2]

body{

background-image: url("img/bb.jpg");

background-repeat: no-repeat;

background-size: 1360px 700px;

}

table{

margin-top: 90px;

margin-left: 200px;

}

var imgs;

//游戏的时间是10s

var time=10;

var showI,stopT,leaT;

var count=0;

//游戏开始

function begin(){

showI=window.setInterval("showImg()",1500);

//开始计时的操作

stopT=window.setInterval("stopTime()",1000);

}

//展示图片

function showImg(){

//获得所有的img对象

imgs=document.getElementsByTagName("img");

//产生随机的下标 0-24

var index=Math.floor(Math.random()*25);

imgs[index].src="img/01.jpg";

//间隔2s后调用地鼠的离开的操作

leaT=window.setTimeout("leaveImg("+index+")",2000);

}

//地鼠回去的操作

function leaveImg(ind){

imgs[ind].src="img/00.jpg";

}

//打击地鼠的操作

function change(ts){

//点击的图片的路径是01.jpg

//http://127.0.0.1:8020/05JS/img/00.jpg

// alert(ts.src);

if(imgU=="01.jpg"){

ts.src="img/02.jpg";

count++;

}

}

//停止计时

function stopTime(){

if(time>0){

time--;

document.getElementById("div1").innerHTML=time;

}else {

gameOver();

}

}

//停止游戏的操作

function gameOver(){

//清除所有的定时器

window.clearInterval(showI);

window.clearInterval(stopT);

window.clearTimeout(leaT);

//图片回归之前的操作

for(var i in imgs){

imgs[i].src="img/00.jpg";

}

//统计结果

alert(count);

}


鲜花

握手

雷人

路过

鸡蛋

相关阅读

发表评论

最新评论

Archiver|手机版|小黑屋|谭兴才自媒体

GMT+8, 2018-8-20 15:54 , Processed in 0.132198 second(s), 25 queries .

谭兴才 ©版权所有

© 2018 TanXingCai.com

返回顶部