JS基础学习（一）

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

首先感谢 http://www.w3school.com.cn/js/index.asp

学js真的很方便，&下面的内容其实是我自己做的一个备忘

第一节大致了解
一 js基本介绍
1.轻量级脚本语言
2.可插入html，插入后可使用浏览器执行
二 js输出
document.write("中间写你要输出的东西");//在加载完全部文字后，再次使用它，会覆盖之前的内容
alert("弹出框，输入你要弹出的东西");
三 js对事件作出反应
<button type = "button" onclick = "alert('欢迎！')">点击这里</button>
（创建一个点击这里的按钮，点击后弹出对话框“欢迎”）
四改变HTML内容（包括文字图片等）
<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p> x=document.getElementById("demo"); // 找到元素
x.innerHTML="Hello JavaScript!"; // 改变内容
五其他杂七杂八
1.js中，用分号表示语句的结束是可选的
2.大小学敏感
3.无视多余的空格
4.可以换行，用“\”
eg. document.write("Hello \
World!");————————————————————true
document.write \
("Hello World!");————————————false 5.单行注释 //
6.多行注释 /* */第二节怎么写一个hello world
一 js的使用
<html>
<head>//通常把函数放在head里面
<script>
//中间写你的js代码
</script>
</head>
<body>
<script>
//中间写你的js代码
</script>
</body>
</html>第三节基础语法
一变量的声明与类型
1.所有的变量声明都是
var w;//未经赋值，是空的
var a = 123;
var b = "4560";
var c = "15", d = 16;//可以一行赋值多个 var c = "15", //可以分行赋值
d = 16;
2.注意事项
必须字母或者$ _开头
大小写敏感
（最好）在代码开始处，对所需要的变量进行声明
3.类型
js是动态类型，相同的变量可以用作不同的类型
js中，所有变量都是对象 1.字符串
var a = "123";
2.数字
var a = 12;
var a = 12.01;
var a = 12e15;
var a = 12e-15;
3.布尔
var a = true;
var a = false;
4.数组
var a = new Array();
a[0] = "1";
a[1] = "2"; var a = new Array("1", "2");
var a = ["1", "2"];
5.对象
//声明
//
var person =
{
firstName : "ABC",
lastName : "DEF",
id : "45789"
};
//
var person = new Object();
person.firstName = "ABC";
person.lastName = "DEF";
person.id = “456780”; //使用
var targetName = person.lastName;
var targetName = person["lastName"];
6.Null
可以用Null清空变量
a = null;
7.Undefined
表示不含有值声明新变量时，可使用new表明类型
var carname=new String;
var x= new Number;
var y= new Boolean;
var cars= new Array;
var person= new Object;
二 Js的对象
技术中，所有的变量都是对象
js中，对象是拥有属性和方法的数据 1.访问对象的属性的语法是
targetObject.propertyName
//对象名.属性名
2.访问对象的方法的语法
//对象名.方法名(参数)；注意，与C#不同，js的方法名常常首字母小写三函数
function 函数名(变量一, 变量二。。。。)
{
//要执行的代码 //有返回值就直接return
} eg.
function add(num1, num2)
{
var c = num1 + num2;//他是局部变量，函数运行完就会删除
return c;
//你也可以直接return；
} & var a = add(2,3);
a最终等于的是5，而不是add函数函数外面声明的变量全是全局变量，即所有位置都能够访问
全局变量在页面关闭后删除
将一个值赋给未生明的变量，他将是全局变量，即使他在函数里面
四运算符，比较符，与或非
//这个没什么好说的，与C#相同五判断语句if
if (time<10)
{
x="Good morning";
}
else if (time<20)
{
x="Good day";
}
else
{
x="Good evening";
}
//除了elseif中间加了空格，其余与C#完全相同
六选择语句
//与C#完全相同七循环
//所有循环的注意事项
//不要死循环！！！ //for 中的三个部分都输可选的
for(var i = 0; i < 100; i++)
{
document.write("hahaha" + i);
} for (var i=0,len=cars.length; i<len; i++)
{
document.write(cars[i] + "<br>");
} //遍历对象中的所有属性
for(a in person)
{
txt = txt + person[x];
} //下面两个与C#中的一样
while (i<5)
{
x=x + "The number is " + i + "<br>";
i++;
} do
{
x=x + "The number is " + i + "<br>";
i++;
}
while (i<5); break;//除了C#中的用法，还可以用在有标签的引用中
eg.
cars=["BMW","Volvo","Saab","Ford"];
list://这个是标签，进行标记，个人理解，类似于C#里面的 #region
{
document.write(cars[0] + "<br>");
document.write(cars[1] + "<br>");
document.write(cars[2] + "<br>");
break list;
document.write(cars[3] + "<br>");
document.write(cars[4] + "<br>");
document.write(cars[5] + "<br>");
} continue;//同C#八异常处理
try
{
var x=document.getElementById("demo").value;
//下面是定义错误类型
if(x=="") throw "empty";
if(isNaN(x)) throw "not a number";
if(x>10) throw "too high";
if(x<5) throw "too low";
}
catch(err)
{
var y=document.getElementById("mess");
y.innerHTML="Error: " + err + ".";
}第四节稍微高级一点的应用
一 JS HTML DOM（js，html文本对象模型）
1.JS功能
1.能够改变页面中所有的HTML元素
2.------------------------属性
3.--------------------CSS样式
4.--------------------事件作出反应 2.查找HTML元素
1.通过Id查找
var x = document.getElementById("id名字");
//如果没有找到，则x = null
2.通过标签查找
var x = document.getElementById("Id名字");
var y=x.getElementsByTagName("p");//查找<p>标签内容
//y是数组，通过数组来确定使用第几个标签中的值
3.改变html中的内容
document.getElementById("p1").innerHTML = "New text!";
//获取到内容（属性）显示在html中的东西
4.改变html中的属性
document.getElementById("image").src="landscape.jpg";
//更换图片资源
5.改变html中的样式
document.getElementById("p2").style.color="blue";
//style 是关键词
6.隐藏html中的内容
document.getElementById('p1').style.visibility='hidden'(或者visible);
7.事件
onclick//点击
onmouseover //鼠标放上
onmouseout //鼠标离开
onfocus //鼠标选中（点击）
onchange //内容改变
onload //加载页面开始
onunload //退出页面时 //定义按钮时，直接定义店家事件
<button onclick="displayDate()">点击这里</button>
//给按钮加上Id，在其他地方获取然后添加事件属性
document.getElementById("myBtn").onclick=function(){displayDate()}; 8.节点 var para=document.createElement("p");//创建元素<p>
var node=document.createTextNode("这是新段落。");//创建要添加的文本
para.appendChild(node);//将文本添加带你创建的元素中
var element=document.getElementById("div1");//找到一个已有的节点
element.appendChild(para);//将你创建的元素添加到已有的标签中 var parent=document.getElementById("div1");
var child=document.getElementById("p1");
parent.removeChild(child);//从一个父节点中移除一个子元素 var child=document.getElementById("p1");
child.parentNode.removeChild(child);//从当前所在的父节点中删除自己第五节对象
所有数据类型都是对象
一构造器
function person(firstname,lastname,age,eyecolor)
{
this.firstname=firstname;
this.lastname=lastname;
this.age=age;
this.eyecolor=eyecolor;
} var a = new person("123", "123", 15, "red"); js，面向对象语言，但不使用类
不会创建类，也不通过类来创建对象
js基于属性，而不是基于类的二数字
1.js数字均为64位
2.整数最多15位，小数最多17位
3.前缀位0，八进制；前缀位0x，十六进制
三字符串，数组，Data，Boolean，Math
这些用到现查
没有什么特殊的
四 RegExp正则
用于规定在文本中检索的内容。
var patt1=new RegExp("检索目标");//检索目标
patt1.test("The best things in life are free");//检查字符串中的指定值，返回true、false
patt1.exec("The best things in life are free");//一样是检索，不过返回的是被查找的值，没有书null
patt1.compile("d");//改变检索目标 var patt1=new RegExp("e","g");//第二个参数，表示要查找目标所有的关键词
do
{
result=patt1.exec("The best things in life are free");
document.write(result);
}
while (result!=null)