javaScript核心基础

JavaScript 是属于网络的脚本语言!

JavaScript 作用:被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies(js也可创建cookie,在浏览器里面创建),以及更多的应用。

 

引入使用JavaScript的方式

标签内部引用  例: <a href="javascript:alert(0);">点击我</a>

 

html页面引用   <script type="text/javascript">

 

外部引用   <script type="text/javascript" src="index.js"></script>  好处:责任分离,可以让很多页面都来使用这个js文件

 

 

 

引入JavaScript的位置    把引入js文件放到<div>之后

全局函数使用

encodeURI()--编码 decodeURI()--解码

encodeURIComponent()编码 decodeURIComponent()解码

 

编码与编码

 

var url = "http://百度.com";

 

var urlEncode = encodeURI(url);

 

console.debug(urlEncode);

 

//  http://%E7%99%BE%E5%BA%A6.com

②isNaN() 判断一个值是否不是数字

isNaN(23) -> false  isNaN(“23”) -> false   isNaN(“sdf”) -> true

 

③将值转换成一个int----parseInt()

 

eval计算 JavaScript 字符串,并把它作为脚本代码来执行

 

eval("alert(2+1)");

 

强大之处:里面是一个字符串,放到eval可以直接运行;

全局属性()

方法

描述

FF

IE

Infinity

代表正的无穷大的数值。

1

4

NaN

指示某个值是不是数字值。

1

4

undefined

指示未定义的值。

1

5.5

 



 js对象

1.创建一个对象

2.给对象添加属性

3.构造函数与this

 4值和引用传递分析:

引用传递

<script language="javascript">

function Person(name,age){

this.age = age;

this.name = name;

}

function change(p1){

p1.name = "李四";

}

var person1 = new Person("张三",18);

change(person1); //传递地址

    console.debug(person1);//Person { age=18, name="李四"}

</script>

值传递 

<script language="javascript">

 

function changeValue(x){

 

x = 5;

 

}

 

var x = 3;

 

changeValue(x);

 

alert(x);//3值传递

 

</script>

 

 

 继承实例分析(有难度,不要求掌握)

1.继承实例分析(有难度,不要求掌握)

function ClassA(name){

this.name = name;

this.sayHello = function(){

alert("hello,"+name);

};

}

//继承

function ClassB(name){

this.newMethod = ClassA;

this.newMethod(name);//相等于 ClassA(name)

}

var obj = new ClassA("小明");

obj.sayHello();

var obj = new ClassB("小张");

1.obj.sayHello();

 本地对象(本地对象: ArrayBooleanDateMathNumberStringGlobal(内置对象)

 Jsjava一样 有个顶层对象 是Object

主要属性:

constructor-对象的构造函数--上面已经学习了

prototype-使您有能力向对象添加属性和方法(原类型)--后面讲

Boolean

 var x = new Boolean(true);//不用
console.log(typeof x);
var x = true;//推荐的使用
console.log(typeof x);
console.log(x);

 object newmethod.js:21:1

true

 Date

 

Math

console.debug(Math.ceil(5.1));

console.debug(Math.floor(5.1));

console.debug(Math.round(5.1));

console.debug(Math.max(5,7,3,56,-4));

document.write(Math.max(7.25,7.30)); //7.3

 Math.min(4,56);

 产生随机数 0.0 ~ 1.0 之间的一个伪随机数。

Math.random();

Number

 String

String表示字符串,学习里面的属性和方法

length :(属性) 可以拿到字符串的长度

var str = "abcde";

console.debug(str.length);//5-

②substr(begin,length)

substr:截取字符串(返回这截取后的字符串,原来的不变)

 *  第一个参数:从哪开始(从0开始算)

 *  第二个参数:截取多少个(如果没有这个参数,就全部截取)

var str="Hello world!";

console.debug(str.substr(3));  // lo world!

console.debug(str.substr(3,2)); //lo

 ③substring(begin,end)

var str="Hello world!";

console.debug(str.substring(3));  // lo world!

console.debug(str.substring(1,3)); //el

concat(str1,str2)

var str1 = "hello";

var str2 = "world";

var str3 = str1.concat(str2);

console.debug(str3);//helloworld

split("分隔符")

var str1 = "张三,李四,后帝";

console.debug(str1.split(","));// ["张三", "李四", "后帝"]

charCodeAt(index)返回指定位置的unicode

var str1 = "abcde";

console.debug(str1.charCodeAt(0));//取到对应索引处的unicode

 数组

1 数组的声明

 var arr4 = ["大娃","二娃","三娃","七娃"];

2 数组的类与方法

length : 拿到数组的长度

join("$"):将数组转化成字符串   

var arr = ["大娃","二娃","三娃","七娃"];

console.debug(arr.join("$"));  //大娃$二娃$三娃$七娃(默认用,隔开)

splice() 方法用于插入、删除或替换数组的元素。  

var arr = ["大娃","二娃","三娃","四娃","七娃"];

   1.start:从哪个位置开始(必需)

 * 2.deletecount:删除几个元素(必需)

 * 3.items:添加的元素

 */

arr.splice(3,1); //删除了四娃

/arr.splice(4,0,"五娃","六娃"); //添加

arr.splice(3,1,"水娃"); //修改

console.debug(arr);

 for..in

for(var key in person){

console.debug(key);

console.debug(person[key]);

}

 prototype

prototype-使您有能力向对象添加属性和方法(原类型)

可以往类上面添加方法

 

 

运用:有一个Date类,但是Date打印的效果不是我们想要的想要的效果,

但是Date类里面 没有format方法,那我们就可以给他添加一个原型的方法

 BOM浏览器对象模型(BOMbrowser object model的缩写,简称浏览器对象模型

 

console.debug(document);//可以拿到document对象

console.debug(window.document);//和前面一样,window是顶级对象,默认不写

 ②连接对象 links

 

 document.anchors

 

④表单对象 forms

console.debug(document.forms[0]);

Window对象

js里面消息三大交互

①alert(‘信息’):消息框

//alert("你好1");

②prompt(‘提示信息’,默认值) 显示可提示的用户输入框,让用户输入

//var inputText = prompt("请输入你的名字","如:孙悟空");

  Console.debug(inputText);

③confirm( )  : 确认框

var flag = window.confirm("你确定要删除数据");

console.debug(flag);

<a href="http://www.baidu.com" onclick="javascript: return confirm('亲,你确定删除吗?')">删除</a>

 打开与关闭窗口

①window.open()方法:打开一个新窗口

window.open("http://itsource.cn/");

 

 浏览器的位置与窗口大小

moveBy(dx, dy)-移动偏移量

moveTo(x, y)-移动到指定座标

resizeBy(dw, dh)-窗口大小改变

resizeTo(w, h)-窗口大小改变

例:

//往右移10个像素,往下移20个像素

window.moveBy(10, 20);

//把窗口大小变成宽150,高300像素

window.resizeTo(150, 300);

//改变窗口的宽变为150,高度不变

window.resizeBy(150, 0);

//称到屏幕左上角,屏幕坐标 (0,0)

window.moveTo(0, 0);

IE

screenLeft -获得窗口所在X坐标值

screenTop -获得窗口Y坐标值

Mozilla(其它浏览器)

screenX -获得窗口所在X坐标值

screenY -获得窗口Y坐标值

-----------------------------------------

//兼容浏览器最佳方法

var x = window.screenX || window.screenLeft;

var y = window.screenY || window.screenTop;

alert("X坐标=" + x + ", Y坐标=" + y);

  history(历史对象)

①history.back()函数,后跳;

<a href="javascript:window.history.back()">向后跳</a>

 ②history.forward()函数,前跳;

  <a href="javascript:window.history.forward()">向前跳</a>

③history.go(index)函数,在浏览器历史记录中跳转,正数为前跳,负数为后跳

  history.go(1) 向前跳一个页面,go(2)向前跳两个页面

  history.go(-1) 向后跳一个页面

 location(位置对象)

var loc = window.location;

for(var name in loc){

    console.debug(name,loc[name]);//查看对象信息(了解内容)

//跳转到某一个页面

window.location.href = "my.html";

navigator(浏览器的信息对象-了解)

属性名称 说明

appCodeName 产品名称

appName 应用名称

appVersion 版本号

cookieEnabled 是否允许使用cookie

language 语言

oscpu 操作系统名称

platform 操作系统平台

product 产品代号或名称,比如Gecko

productSub 产品发布日期20100701

userAgent 客户端详细信息,比如:Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1.11)

Gecko/20100701

Firefox/3.5.1

documet对象

①显示文章标题

  document.title=”杨呜呜”;--》可以去修改页面的标题

②改变页面背景色 document.bgColor=”blue”;

③document.write("1*1");显示到页面上

定时器(掌握)

① setTimeout()到了多少时间后执行(只执行一次)--定时炸弹

     clearTimeout() :取消定时器

setInterval():周期性定时器,每隔多长时间执行(不断执行)

  clearInterval() :取消定时器

//每隔多长时间执行(不断执行)

//第一个参数:执行的方法

//第二参数:时间(毫秒)

 

 

原文地址:https://www.cnblogs.com/wzscom/p/10409844.html