javascript(基础语法,BOM)

javascript:

  1. ECMAScirpt(规范了基本的语法)
  2. DOM  (文档对象模型)
  3. BOM (浏览器对象模型)

特点:
  1. 跨平台
  2. 安全性(javascript的代码不能直接访问硬盘的内容)

目录

javascript:

ECMAScirpt

变量类型

类型转换 :

运算:

控制流程:

函数:

错误捕捉

对象:

          BOM

window对象

Location(地址栏对象)

Screen(屏幕对象)

history(访问历史)



ECMAScirpt

javascript都是放在script标签中的,一旦加载,就会顺序执行

javascript代码的编写:

方式1:可以使用<script>标签体内进行编写

格式:

<script type="text/javascript">

       js代码;;

</script>

方式2:引入外部的javascript文件

格式:<script src="js文件路径" type="text/javascript"></script>

注意: 

  1. <script>是有开始标签与结束标签的,千万不要在一个标签中结束了
  2. 如果<script>已经用于引入了js文件,那么该<script>标签体就不能再写js代码

注释与 Java语言的注释相同


变量类型

声明:var 变量名 = 数据;

变量注意事项:

  1. 在javascript中声明变量是使用var关键字声明的,javascript中的变量可以存储任意的数据类型数据.
  2. javascript中变量数据类型是根据存储的值决定的,可以随时更改存储数据的类型。
  3. 定义了多个同名的变量是,后定义的同名变量是覆盖前面定义的同名变量。
  4. 声明变量的时候可以省略var关键字,但是不建议省略。

查看变量的数据类型:typeof  变量名

javascript的数据类型:

number   十进制,八进制,十六进制整数,浮点数,科学记数法

string 字符串   注意: javascript没有字符的概念,只有字符串,字符串可以写在单引号或双引号中。

boolean 布尔数据类型

undefined 声明了但未赋值

null  空对象/对象不存在 

类型转换 :

参考dom对象方法


运算:

+(加法、正数、 连接符)

/ 除法不能整除的时候结果是小数,因为没有整数数据类型

比较运算符

==        等于 (值判断)
!=        不等于

===       绝对等于 (值判断+类型判断)
!==       绝对不等于

数字与字符串进行比较,会先把字符串转换成数字再进行比较

字符串与字符串的比较规则:
情况1: 能找到对应位置上的不同字符,那么就比较第一个不同字符的大小。
情况2: 不能找到对应位置上的不同字符,这时候比较的是两个字符串的长度。

逻辑运算符

&&没有单与

三目运算符
布尔表达式?值1:值2;


控制流程

if(判断条件){
    符合条件执行代码 
}

//特殊之处: 在javascript中的if语句条件不单可以写布尔表达式,还可以写任何的数据。

number :非0为true, 0为false.
string :内容不空是true, 内容空的时候是false。
undefined:false
NaN: false

选择语句: 

switch(变量)
{
case 值1:
    break;
case 值2:
    break;
.....
default:
    break;
}

//特殊之处:在javascript中case后面可以跟常量、变量、表达式

循环:  for, while, do-while, for-each

forEach (for-in语句):类似java for增强

var x = new Array(3,1,4);
使用增强for循环遍历数组x
for(i in x){
  x[i];
}

作用:将遍历的结果放进"变量名",可通过 "遍历的目标[变量名]" 范围具体数据

  1. 可以用于遍历数组的元素。  注意: 使用for-in语句遍历数组元素的时候,遍历出来是数组的下标
  2. 可以用于遍历对象的所有属性数据。 注意: 使用for-in语句遍历对象的属性的时候,遍历出来的是对象的属性名

with语句:有了With语句,在存取对象属性和调用方法时就不用重复指定对象。

with(对象){

可不用加对象名,直接使用对象方法

}

函数:

正常方式:

function 函数名(形参列表){
     函数体 ;
}

构造器方式:var 函数名 =  new function("形参列表", "函数体 ; ")

直接量或匿名或无名方式:var 函数名 =  function(形参列表){ 函数体 ; }

javascript的函数注意细节:

  1. 在 javascript中函数定义形参是不能使用var关键字声明变量
  2. 在javascript中 的函数是没有返回值类型的,如果函数需要返回数据给调用者,直接返回即可,如果不需要返回则不返回。
  3. 在 javascript中是没有函数重载的概念,后定义的同名函数会直接覆盖前面定义同名函数。
  4. 在javascript中任何的函数内部都隐式的维护了一个arguments(数组)的对象,给函数传递数据的时候,是会先传递到arguments对象中,然后再由arguments对象分配数据给形参的。

常用的函数:

alert("显示的内容..") ;      弹出框,打断程序运行

document.write("数据") ;     向页面输出数据,可输入html等

console.log("数据");     控制台打印输出

confirm(确认框);   prompt(输入框);

网页获取的数据都是字符串类型的,一般需要字符串转数字

IsNaN()   判断该字符串是否是一个数字,不是数字返回true,是数字返回false

 

错误捕捉

<script>
function f1(){
  //函数f1是存在的
}
try{
   document.write("试图调用不存在的函数f2()<br>");
    f2();  //调用不存在的函数f2();
}
catch(err){
   document.write("捕捉到错误产生:");
    document.write(err.message);
}
 
document.write("<p>因为错误被捕捉了,所以后续的代码能够继续执行</p>");
</script>

 


对象:

对象 :有着属性和方法的一种特殊数据类型。 

伪对象:javascript中即便是基本类型,也是伪对象,所以他们都有属性和方法。

 

Number对象

创建方式:
    方式1:var 变量=  new Number(数字)
    方式2:var 变量 = 数字;

属性
    MIN_VALUE        最大值
    MAX_VALUE        最小值
    NaN              不是数字

方法:
    toFixed(n)        返回一个数字的n位小数
    toExponential()   返回一个数字的科学计数法表达
    valueOf()         返回一个数字对象的基本数字类型
    toString()  把数字转换成指定进制形式的字符串。 toString(2);   toString(8);   toString(16);
    toFixed()   指定保留小数位,而且还带四舍五入的功能

String对象

创建方式:
    方式1:new String("字符串的内容");
    方式2:var str = "字符串的内容";

属性:
    length        字符串长度

常用方法:
    anchor()    生产锚点
    blink()    为元素添加blink标签
    charAt()     返回指定索引位置处的字符。
    charCodeAt()      返回指定位置上字符的 Unicode 编码。
    fontcolor()      给字符串添加带有 COLOR 属性的一个 HTML <FONT> 标记
    indexOf()      返回 String 对象内第一次出现子字符串的字符位置
    italics()      把 HTML <I> 标记放置在 String 对象中的文本两端。
    link()      把一个有 HREF 属性的 HTML 锚点放置在 String 对象中的文本两端。
    replace()      返回根据正则表达式进行文字替换后的字符串的复制
    split()      切割
    Substr()      截取子串
    toUpperCase()     转大写
    toLowerCase()     转小写

Array数组对象:

创建方式
    方式1:var 变量名 = new Array();     创建一个长度为0的数组。
    方式2:var 变量名= new Array(长度)    创建一个指定长度的数组对象。
    方式3:var 变量名 = new Array("元素1","元素2"...);     给数组指定元素创建数组的对象。
    方式4:var 变量名 = ["元素1","元素2"...];
        注意细节:在javascript中数组的长度是可以发生变化的。

属性
     length    	数组长度

方法
    concat()	连接数组  
    //arr3 = arr1.concat(arr2); concat把arr1与arr2的数组元素组成一个新的数组返回
    join("")	使用指定分隔符 把数组中的元素拼装成一个字符串返回
    pop()       在最后的位置获取数据(获取后删除)
    push()      在最后的位置插入数据,并返回数组的新长度值
    shift()     最开始的位置获取数据(获取后删除)
    unshift()   最开始的位置插入数据 
    sort()    	对数组的内容进行排序
    reverse()	对数组的内容进行反转
    slice(start,end)	根据开始索引值与结束索引值截取数组的元素,返回子数组
    splice(1,2,"1","2","3"···)    第一个参数是开始删除元素的索引值,第二参数是删除元素的个数,往后的数据就是插入的元素

Math对象

属性
    E   自然对数 2.718281828459045
    PI	圆周率 3.141592653589793

方法
    abs()	绝对值
    min() max()	最小最大
    pow()	求幂
    round()	四舍五入
    random()  随机数方法,产生的伪随机数介于 0 和 1 之间(含 0,不含 1),
    ceil() 向上取整
    floor() 向下取整

日期对象(Date)

创建
    var date = new Date(); //获取到当前的系统时间

年:date.getFullYear()
月:date.getMonth()+1
日:date.getDate()
时:date.getHours()
分:date.getMinutes()
秒:date.getSeconds()
毫秒:date.getMilliseconds

格式化输出时间:date.toLocaleString()

定时方法:window.setInterval("代码",毫秒数); 第一个参数要指定调用的代码,第二参数是每隔指定的毫秒数调用参数一的代码。

类型转换:

toString() / String()  转换为字符串
/*对null的处理
String()会返回字符串"null"
toString() 就会报错,后续无法执行*/

parseFloat() 可以把一个字符串转换成小数。
Number() 用来转换成数字 
//当转换的内容包含非数字的时候,Number() 会返回NaN(Not a Number)
parseInt()  可以把一个字符串转换成整数。
/*如果以非数字开头,则返回NaN
如果接收的字符串含有非数字的字符,那么会从字符串的首个字符开始寻找,一直找到非数字字符为止,然后就使用前面的数字字符转换成数字。
如果一个字符串是以0x开头,那么会把字符串中的内容当成十六进行的数据处理的
如果首位是0,那么就想祛除0再进行转换*/

Boolean()  转换为Boolean值
    /*当转换字符串时:非空即为true
    当转换数字时:非0即为true
    当转换对象时:非null即为true*/

自定义对象:

在javascript没有类的概念,只要有函数即可创建对象。在JavaScript中可以自定义对象,添加新的属性,添加新的方法

方式1通过new Object()创建一个对象

<script>
var hero = new Object();  //创建hero对象
hero.name = "盖伦";       //定义一个属性name,并且赋值
hero.kill = function(){   //定义一个函数kill
  document.write(hero.name + " 正在杀敌" ); 
}
hero.kill();  //调用hero对象的kill函数

//问题: 每创建一个对象,都得重新定义属性和函数 
</script>

方式2通过function设计一个对象

   1.1使用无参的函数创建对象

function Hero(){}
var H = new Hero();    //创建了一个Hero对象
H.id = 001;
H.name = "盖伦";

   1.2使用带参的函数创建对象

function Hero(name){
  this.name = name;
  this.kill = function(){
     document.write(this.name + "正在杀敌<br>");
  }
}
 
var gareen = new Hero("盖伦");
gareen.kill();

方式3:使用字面量的方式创建

var H = {id:001,name:"盖伦",
    kill:function(){
        alert(this.name+" 正在杀敌");
    }
}

 

Prototype原型属性

是javascript实现继承的主要手段。为已经存在的对象增加新的方法

1.prototype是函数(function)的一个必备属性(书面的说法是"保留属性")(只要是function,就一定有一个prototype属性)

2.prototype的值是一个对象

3.可以任意修改函数的prototype属性的值。

4.一个对象会自动拥有prototype的所有成员属性和方法

例:把自己编写的getMax方法添加到内置的Array数组对象上
//找数组最大值getMax方法
Array.prototype.getMax = function(){
	var max = this[0];
	for(var index = 1; index<this.length ; index++){
		if(this[index]>max){
		max = this[index];	
		}	
	}
	return max;
}
//相当于以下代码:
	functoin Array(){
	this.prototype = new Object();
	this.getMax = function(){······};
	}
	

BOM

( Browser Object MOdel 浏览器对象模型) 

浏览器对象模型中把浏览器的各个部分都是用了一个对象进行描述,如果要操作浏览器的一些属性,我就可以通过浏览器对象模型的对象进行操作。

全局对象window【窗口】
全局变量: location【浏览器地址】, history【访问历史】, navigator【浏览器】, screen【客户端屏幕】
全局方法:alert()警告框; confirm()确认框; prompt()输入框; open(); close();

 

window对象

属性:

innerheight、innerwidth  只读属性,文档显示区域的高度和宽度
outerWidth、outerHeight  外部窗体的宽度和高度

方法:

open()    打开一个新的窗口。
resizeTo()    将窗口的大小更改为指定的宽度和高度值。
moveBy()    相对于原来的窗口移动指定的x、y值。
moveTo()    将窗口左上角的屏幕位置移动到指定的 x 和 y 位置。
setInterval("代码",毫秒数)    每经过指定毫秒值后就会执行指定的代码。
clearInterval()    根据一个任务的ID取消的定时任务。
setTimeout()    经过指定毫秒值后执行指定 的代码一次。

//注意: 使用window对象的任何属性与方法都可以省略window对象不写的。

Location(地址栏对象)

location.href   设置及获取地址栏的对象
location.assign("路径")   跳转页面,与href不同:会添加记录到浏览历史
location.reload()    刷新当前的页面

location.protocol    协议
location.hostname    主机名
location.port        端口号 (默认是80,没有即表示80端口)
location.host        主机加端口号
location.pathname    访问的路径
location.hash        锚点
location.search      参数列表 

Screen(屏幕对象)

只有属性没有方法

availHeight    获取系统屏幕的工作区域高度,排除 Microsoft Windows 任务栏。
availWidth    获取系统屏幕的工作区域宽度,排除 Windows 任务栏。
height    获取屏幕的垂直分辨率。
width    获取屏幕的水平分辨率。

history(访问历史)

history.back();  返回上一次访问
history.go(-2);   -1表示上次,-2表示上上次访问,以次类推
//浏览器产品名称
navigator.appName
//浏览器版本号
navigator.appVersion
//浏览器内部代码
navigator.appCodeName
//操作系统
navigator.platform
//是否启用Cookies
navigator.cookieEnabled
//浏览器的用户代理报头
navigator.userAgent

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值