javaScript核心基础

Posted 2021-02-10

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();

 

 

 本地对象（本地对象: Array、Boolean、Date、Math、Number、String、Global(内置对象)

 Js和java一样 有个顶层对象 是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

boolean newmethod.js:23: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浏览器对象模型（BOM是browser 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() ：取消定时器

 

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

 

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

 

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