标签：javascript基础
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="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就是一个函数function7.日期对象
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基础
原文地址：http://12170190.blog.51cto.com/12160190/1885813
