javaScript核心基础
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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 |
代表正的无穷大的数值。 |
1 |
4 |
|
指示某个值是不是数字值。 |
1 |
4 |
|
指示未定义的值。 |
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);
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() :取消定时器
//每隔多长时间执行(不断执行)
//第一个参数:执行的方法
//第二参数:时间(毫秒)
以上是关于javaScript核心基础的主要内容,如果未能解决你的问题,请参考以下文章