目录
1.怎样学习JavaScript
首先我们知道JavaScript有这三部分构成
ECMAScript，描述了该语言的语法和基本对象。
文档对象模型（DOM），描述处理网页内容的方法和接口。
浏览器对象模型（BOM）wondows，描述与浏览器进行交互的方法和接口。
2:JavaScript语法和基本对象
2.1 ECMAScript（此部分跟Java语法很相识）
js作为一种语言，我们按照学习其他编程语言例如Java的思路来，js的也是有语法，数据类型，方法，事件，运算符，逻辑语句等组成。这些就是ECMAScript
--------------------------------js数据类型，方法，事件，运算符，逻辑语句案例---------------------------------------------------------------------
JavaScript数据类型：
JavaScript数值类型分为基本数据类型和引用数据类型
基本数据类型分为：【字符串】【数字类型】【布尔类型】【Null】【Undefined】
引用数据类型分为：【数组Array】【对象Object】【函数function】
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<h1>JavaScript数值类型分为基本数据类型和引用数据类型</h1>
<br>
<br>
<br>
<br>
<h2>1基本数据类型分为【字符串】【数字类型】【布尔类型】【Null】【Undefined】</h2>
<h3>1.1---------------【字符串】---------------</h3>
<p id="String"></p>
<button type="button" onclick="String()">String点击</button>
<h3>1.2---------------【数字类型】---------------</h3>
<button type="button" onclick="Ints()">Int点击求和</button>
<input type="text" name="a" id="a">
<input type="text" name="b" id="b">
<p id="int"></p>
<h3>1.3---------------【布尔类型】---------------</h3>
<button type="button" onclick="bools()">布尔类型点击</button>
<input type="text" id="b1" placeholder="输入布尔类型">
<p id="int"></p>
<h3>1.4---------------【Null类型】和【Undefined】---------------</h3>
<button type="button" onclick="Nulls()">空类型点击</button>
<br>
<br>
<br>
<br>
<br>
<br>
<h2>2引用数据类型分为【数组Array】【对象Object】【函数function】</h2>
<h3>2.1---------------【数组Array】---------------</h3>
<button type="button" onclick="Arrays()">数组类型点击</button>
<h3>2.2---------------【对象object】---------------</h3>
<button type="button" onclick="objects()">对象类型点击</button>
<p id="obj"></p>
<p id="obj1"></p>
<h3>2.3---------------【函数function】---------------</h3>
<button type="button" onclick="functions('小白',20)">方法类型点击1</button>
<button type="button" onclick="functions('小黑',18)">方法类型点击2</button>
<button type="button" onclick="functionss('小红',22)">返回值方法点击3</button>
<script type="text/javascript">
function functionss(a,b){
//调用返回方法
var a=returns(a, b);
alert(a);
}
//含有返回值的方法
function returns(a,b){
console.log("进入返回方法")
return "姓名是："+a+"年龄是："+b;
}
function functions(a,b){
alert("姓名是："+a+"年龄是："+b);
}
function objects(){
alert("进入对象类型方法：");
document.write("对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：<br>");
var users={
name:"张三",
age:23,
address:"北京海淀区"
};
document.write("姓名是："+users.name);
document.write("年龄是："+users.age);
document.write("住址是："+users["address"]+"<br>");
var users1=new Object();
var users1={
name:"企鹅",
age:3,
address:"泳池"
};
document.write("姓名是："+users1.name);
document.write("年龄是："+users1.age);
document.write("住址是："+users1["address"]+"<br>");
var users3=new Object();
var users3={
name1:"狮子",
age1:15,
address1:"非洲大草原",
get:function(input){
document.write("姓名是："+this.name1+"爱："+input);
}
};
document.getElementById("obj").innerHTML=users3.get("吃肉<br>");
document.getElementById("obj1").innerHTML=users3.get;
}
function Arrays(){
alert("进入数组类型方法");
var array1=["aa","bb","cc","aa"];
for(i=0;i<array1.length;i++){
document.write(array1[i]+"<br>")
}
document.write("==============数组用[]来放====================<br>");
var array2=new Array();
array2[0]="魔力";
array2[1]="nike";
array2[2]="adidas";
array2[3]="魔力";
for(i=0;i<array2.length;i++){
document.write(array2[i]+"<br>")
}
document.write("=============获取数组第4位指定值=====================<br>");
document.write(array2[3]);
}
function Nulls(){
alert("进入null类型方法");
var a=null;
var b;//Undefined 未定义
alert("a的值是："+a);
alert("b的值是："+b);
}
function bools(){
alert("进入布尔类型方法");
var a=document.getElementById("b1").value;
/* var b=Boolean(a);
alert("b的值为:"+b); */
//第一条：if(a) a的值只要不为空，if(a)均为true 如果a的值为空，则if(a)均为false
//第二条：Boolean(a) a的值只要不为空，Boolean(a)均为true 如果a的值为空，则Boolean(a)均为false
//所以最好比较字符串是否相等
if(a=="true"){
alert("布尔值为真");
}else{
alert("布尔值为假");
}
}
function Ints(){
var d=new Number(444);
alert("进入数字类型方法:"+d);
var a=document.getElementById("a").value;
var a1=Number(a);//类型强制转化
var b=document.getElementById("b").value;
var b1=parseInt(b);//方法转化
var sun=a1+b1;
document.getElementById("int").innerHTML=a+"+"+b+"="+sun;
//document.write("姓名："+name+"----今年："+age+"岁-----家住："+address);
}
function String(){
var aa=new String("吹吹打打");
alert("进入字符串类型方法"+aa);
//创建方法
var name='张三';
var address='北京';
var age='23';
var doc;
doc=document.getElementById("String");
doc.innerHTML="姓名："+name+"----今年："+age+"岁-----家住："+address;
//document.write("姓名："+name+"----今年："+age+"岁-----家住："+address);
}
</script>
</body>
</html>--------------------------------Js注册验证两次密码否相同，邮箱是否合格--------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form action="跳转.html" name="myfrom" method="post" onsubmit="return aa()">
账户：<input type="text" name="name" placeholder="请输入账户" required="required"><br>
密码：<input type="password" name="password" placeholder="请输入密码" required="required"><br>
确认密码：<input type="password" name="password1" placeholder="请输入密码" onblur="check()" required="required"><br>
邮箱：<input type="text" name="email" placeholder="请输入邮箱" onblur="check()" required="required"><br>
<input type="submit" id="submit" value="注册"><br>
<p id="p1">
</form>
<script type="text/javascript">
//鼠标离开之前就验证
function check(){
var name=document.myfrom.name.value;
var password=document.myfrom.password.value;
var password1=document.myfrom.password1.value;
if(password==password1){
//alert("鼠标离开密码相同");
document.getElementById("p1").innerHTML="两次密码一致";
document.getElementById("submit").disabled = false;
}else{
alert("鼠标离开两次密码不一致！");
document.getElementById("p1").innerHTML="两次密码不一致";
document.getElementById("submit").disabled = true;//disabled = true表示禁用该标签
}
}
//点击验证
function aa(){
var name=document.myfrom.name.value;
var password=document.myfrom.password.value;
var password1=document.myfrom.password1.value;
var email=document.myfrom.email.value;
var a=email.indexOf("@");
var b=email.indexOf(".");
//789@qq.com
//0123456789
if(a<1||b<a+2||b+2>=x.length){
alert("邮箱不合格！");
return false;
}
if(password==password1){
alert("密码相同");
document.getElementById("p1").innerHTML="两次密码一致";
return true;
}else{
alert("两次密码不一致！");
//document.getElementById("p1").innerHTML="两次密码不一致";
return false;
}
}
</script>
</body>
</html>以上之是就简单案例粗略的运用到了js的数据类型，运算符，方法，事件，逻辑语言等的基本操作。
2.2文档对象模型（DOM）
同时呢js还有一个重要的功能就是让远古时代的静态html动起来，怎么能让html动起来呢，这就需要通过HTML DOM（文档对象模型），当网页被加载的时候，将整个html的head,body里边的所有标签加载进来，(就像Java的dom4j解析xml一样)，将整个HTML生成DOM树结构，方便我们去访问修改，并且对标签事件产生反应。
--------------------------------Js的dom模型通过document获取指定标签，然后修改值--------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JavaScript学习1</title>
</head>
<body>
<p id="p1">这是一个段落</p>
<img id="img1" src="before.png" width="600" height="200">
<button type="button" onclick="xiugai()">点击修改段落</button>
<button type="button" onclick="xiugai1()">点击修改图片</button>
<script type="text/javascript">
function xiugai() {
var a="段落修改后";
document.getElementById("p1").innerHTML=a;
}
function xiugai1() {
document.getElementById("img1").src="after.png";
}
</script>
</body>
</html>2.3浏览器对象模型（BOM）
浏览器对象模型（Browser Object Model）是JavaScript有能力与浏览器对话，主要定于JavaScript跟浏览器交互的。Window 对象，所有浏览器都支持 window 对象。它表示浏览器窗口。所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。全局变量是 window 对象的属性。甚至 HTML DOM 的 document 也是 window 对象的属性之一；例如最常用弹窗语法：windows.alert("这是一个浏览器对象模型弹窗");
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
window.alert(window.innerWidth+":"+window.innerHeight)
</script>
</body>
</html>3：JavaScript结语
JavaScript作为一门依托于浏览器的脚本语言，学习过程中可以参考其他的语言，就跟其他语言一样，也有自己的数据结构和语法以及各种各样的运算符，方法，逻辑运算，触发条件等基本元素，同时作为脚本JavaScript也有其独有的地方就是DOM（文档对象模型，用于是编辑修改html，结合其他的语法从而使html动起来）和BOM(浏览器对象模型，用于和浏览器交互)。这就是JavaScript的基本框架，但是鉴于JavaScript作为一种语言在每一个组成部分下，都有很多的细节，本章节不做过多例子。同时也讨论不过来，详情细节请参考官方文档，同时结合实际项目引用到这些细节时学习会十分高效。总之就是在心中先形成js语言的框架结构。细节随着经验，学习而逐渐完善。
扫一扫
1719
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
