首页 > 代码库 > Javascript 基础知识整理

Javascript 基础知识整理

2024-08-29 04:18:35   219人阅读

1.Javascript的作用

JavaWeb里面 

html: 负责网页架构，显示内容、数据。

css: 负责样式、格式的显示。

javascript: 负责完成页面的交互、网页的行为。



2.Javascript的三种写法


1).直接在html里面写。

<a href="javascript:alert(‘东方闪电‘)">超链接</a>
<h4 onclick="javascript:alert(111)">点击</h4>

2).<script>标签  可以写在head body 里面 或html外面。


3).使用外部文件引入的方式：首先 新建一个js文件 demo.js 记住：所有外部JavaScript文件的后缀  .js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        alert("Hello JavaScript!");
    </script>
</head>

<body>

<!--javascript 写法2:<script>标签  可以写在head body 里面 或html 外面-->

<!--javascript 写法3:使用外部文件引入的方式 -->
<script src="http://www.mamicode.com/demo.js"> </script>

</body>
</html>

<script>
    alert("Hello World!");
</script>



3.javascript 常用的输入输出方式


1).Alert("Hello!") 弹窗输出。


2).confirm("你确定你是男的？") 选择弹窗，返回 boolean值. 


3).prompt("请输入：");输入弹窗  



4.Javascript 数据类型 Javascript是一个弱语言，在使用的时候确定是什么类型

String，number，boolean，Array，Object，null  


1).如何看你的变量是什么类型， 使用 typeof 关键字。对于数组等对象而言，typeof 只会显示object

如果要判断是否为array， 使用 alert(as instanceof Array); 结果为true 则为array类型。


2).undefined 未定义的类型，表明你这个变量没有被初始化或使用。undefined类型是false。


3).特别注意：在JS中除了NaN， undefined，0 这三个数是false，其余皆是true。

可以判断一个变量有没有赋值。如果赋值了就是true 没有赋值就是undefined是 false；



5.数据类型的强制转换


1).数字转换为字符串

//             数字转换为字符串
        var a=456;
        alert(typeof a);
        a=a.toString();
//        a=456+"";
        alert(typeof a);


2).字符串转换为数字

var b="11";
alert(b+1);
alert(Number(b)+1);


3).注意：如果强制转换一个非数字的值转换为Number会得到一个NaN的值；

使用parseInt可以将字符串开头的几个数字转换为int，如果开头不是数字，那么只会得到NaN。

如 var b="12px";

alert(parseInt(b)); 可以得到12，用于更改字体大小等。



6.Javascript 的对象

//创建一个Person的对象
function Person(name,age){
	this.name=name;
	this.age=age;
	this.address="四川成都";
	//如果没有用this声明，这个变量仅仅是一个局部变量，不是类的属性。
	var m=10;
	//创建方法
	this.say=function(){
	alert(this.name+","+this.age);
	}
}

//实例化一个对象
var p1=new Person("张飞",12);
alert(p1.name);
alert(p1.name+","+p1.address)
alert(p1["name"]+","+p1["address"]); //也可以用

alert(typeof p1);   //得到object
alert(p1 instanceof Person); //得到true 

//在JS中对于对象而言，可以通过for in 来获得对象的属性,用框架的时候可以通过它来看里面有什么属性。
for(var a in p1){
	alert(a);
	//alert(a+":"+p1[a]);
}

//函数的另一种定义方式：
var x=function(){
	alert("x")
}
//此时x就是一个函数function



7.日期对象

var d=new Date();
document.write(d.getFullYear()+"年"+(d.getMonth()+1)+"月"+d.getDate()+"日"+"星期"+d.getDay())



8.字符串

var str1=new String("abc");
var str2="abc";
alert(str1==str2);  //结果为true  没有equals

var s=str2.concat("hello","world");



9.数组

1).

var as=new Array();
as.push(11);
as.push(12);

2).

var mycars=new Array();
mycars[0]="Saab";
mycars[1]="Volvo";
mycars[2]="BMW";

3).

var as=new Array(11,12,13,14,15,222,"15");

4).

var as=["11",12,1,2];



10.with 函数

with(document){
	//此时花括号中的所有代码都是基于document作为根对象，当使用write(xxx)就等于document.write(xxx);
	write();
	write();
	write();
	write();
	//使用alert也是允许的
	alert("abc");
}



11.事件处理

<!DOCTYPE html>    
<html lang="en">    
<head>    
<meta charset="UTF-8">    
<title>Title</title>    
<script>    
//点击试试    
function clickd(obj){    
alert(obj.innerHTML)    
}    

//鼠标移过来    
function moused(obj){    
//设置对象的颜色，在js中设置文本的样式均通过xx.style.样式名称    
obj.style.color="red";    
//移上来字体变大. 当使用代码来设置样式的时候，如果在css中通过-表示的，都有驼峰标识，font-size-->fontSize    
obj.style.fontSize="18px";    
}    
//鼠标移走恢复字体颜色和大小    
function outd(obj){    
obj.style.color="#000";    
obj.style.fontSize="16px";    
}    
//小于5号字体时点击变大，大于30号字体时点击变小    
var big=true;    
function bigger(obj){    
var cs=parseInt(obj.style.fontSize);    
if(cs){    
if(cs>=30){    
big=false;    
obj.innerHTML="点击变小";    
}    
if(cs<=5){    
big=true;    
obj.innerHTML="点击变大";    
}    
if(big){    
cs+=2    
}else{    
cs-=2    
}    
obj.style.fontSize=cs+"px";    
}else{    
obj.style.fontSize="14px";    
}    
}    
function cd(){    
//在3秒之后会执行autoBig这个函数，setTimeout的意思就是间隔一段时间来执行某个函数，仅仅执行一次。    
//如果重复执行则，用setInterval,表示每隔一段时间调用一次函数    
//          setTimeout("autoBig()",1000);    
setInterval("autoBig()",1000);    
}    
function autoBig(){    
//获取html中节点的id为txt的节点    
var node=document.getElementById("txt")    
var size=parseInt(node.style.fontSize);    
if(size){    
size+=10;    
}else{    
size="14";    
}    
node.style.fontSize=size+"px";    
}    
</script>    
</head>    

<body>    
<h2>事件处理</h2>    
<div onclick="clickd(this)" style="cursor:pointer"> 点击试试</div>    
<br/><br/><br/>    

<div onmouseover="moused(this)" onmouseout="outd(this)">鼠标移过来</div>    
<br/><br/><br/>    

<div onclick="bigger(this)" style="cursor:pointer">点击变大</div>    
<br/><br/><br/>    

<div id="txt" style="cursor:pointer">开始</div>    
<br/>    
<div onclick="cd()" style="cursor:pointer">点击开始操作</div>    
</body>    
</html>










Javascript 基础知识整理


联系
我们