WEB前端开发入门javascript指南

前端开发用js数组吗|angular.js前端开发|vue.js前端开发pdf

javascript 的内容,包含以下3部分:
1.ECMAScipt(核心),定义了javascript语法。
2.DOM (文档对象模型),规定了访问html和xml的接口。
3.BOM(浏览器对象模型),提供了独立于内容而在浏览器窗口之间进行交互的对象和方法。
BOM 有关的操作:
1.关闭、移动浏览器及调整浏览器窗口大小
2.弹出新的浏览器窗口
3.提供浏览器详细信息的定位对象
4.提供载入到浏览器窗口的文档详细信息的定位对象
5.提供用户屏幕分辨率详细信息的屏幕对象
6.加入ActiveObject类拓展BOM,通过javascript实例化ActiveX对象。

二、javascript 基础:
Javascript注释
// 单行注释
/**/多行注释
DOM(文档对象模型)
var i=1;//变量声明
alert(“内容”);//普通框
confirm(“内容”);//对话框
prompt(“true”,”初始化内容”);
Document.write();仅仅向文档输出写内容
Javascript 会忽略多余的空格,对大小写敏感。
Javascript 是脚本语言,逐行执行代码。
Document.write(“Hello \ world!”); 在文本字符串中使用反斜杠对代码进行换行
javascript:写入html输出
document.write(“<h1>this is a heading</h1>”);
document.write(“<p>this is a heading</p>”);
Javascript :对事件作出反应
<button type=”button” onclick=”alert(welocome)”>点击这里</button>
Javascript :改变html内容
X=document.getElementById(“demo”);//查找内容
x.innerHTML=”Hello Javascript” ;//改变内容
Javascript :改变html图像
document.getElementById(“myimage”).src=”a.gif”;
Javascript :改变html样式
x=document.getElementById(“demo”);
x.style.color=“#ff0”;
Javascript :验证输入
If isNaN(x){alert(“alert(Not Numeric)“)}

Javascirpt 函数和事件
eg: <!DOCTYPE html>
<html>
<head>

<script>
function myFunction()
{
document.getElementById(“demo”).innerHTML=”My first Javascirpt Function”;
}
<head>和<body>中的javascript
脚本可以放在<body>和<head>部分,并且不限制脚本的数量。
外部的javascript
也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。
外部javascript文件的文件扩展名是 .js;
如需使用外部文件,请在<script>标签的“src”属性中设置 .js文件;
<!DOCTYPE html>
<html>
<body>
<script src=”myScript.js”></script>
</body>
</html>
[color=Red]提示:外部脚本不能包含<script>标签。[/color]

Javascript 语句:向浏览器发出命令。告诉浏览器该做什么
Javascript 变量
变量必须以字母开头;变量也能以$和_开头;变量名称对大小写敏感 用var关键字来声明变量
Javascript数据类型
字符串、数字、布尔、数组、对象、Null、Undefined
Javascript 算数
使用+ 和=

Javascript 拥有动态类型
Javascript 拥有动态类型。这意味着相同的变量可用作不同的类型。
eg var x; //x为undefined
Var x=6; // x为数字
Var x=”BIll”// x为字符串
Javascript字符串
使用单引号或双引号。
Javascript 数字
Javascript只有一种数字类型。数字可以带小数点,也可以不带。
极大或极小的数字可以通过科学(指数)计数法来书写。
Javascript布尔 true false
Var x=true;
Var y=false;
Javascript 数组
eg var cars=new Array();
car[0]=”audi”;
car[1]=”BMW”;
car[2]=”Volvo; for(var i=0;i<cars.length;i++){document.write(cars[i]+”<br/>”);}
或者 var cars=new Array(“audi”,”BMW”,”Volvo”);
eg var cars=[“Audi”,”BMW”,”Volvo”];

Javascript 对象
对象由花括号分割。在括号内部,对象的属性以名称和值对的形式(name:value)来定义。属性由逗号分割。
Var person={firstname:”bill”,lastname:”Gates”,id:5566};
上面例子中的对象(person)有三个属性:firstname、lastname以及id.
对象属性由2种寻址方式
Eg name=person.lastname;
name=person[“lastname”];
Underfined和Null
Undefined这个值表示变量不含有值。
可以通过将变量的值设置为null来清空变量。Cars=null;
声明变量类型
[color=Red]当您声明新变量时,可以使用关键词“new”来声明其类型。[/color]
eg var carname=new String;
var x=new Number;
var x=new Boolean;
Var cars=new Array;
var person=new Object;
Javascript 中的所有事物都是对象:字符串、数字、数组、日期,等等。
在javascript中,对象 拥有属性和方法。

在javascript中,对象 拥有属性和方法。
属性: 汽车的属性包括名称、型号、重量、颜色等。 属性是与对象相关的值。
汽车的方法可以是启动、驾驶、刹车等。 方法即动作。

Javascript 中的对象
Var txt=“hello”;
属性 txt.length=5;
方法 txt.indexOf();
txt..replace();
txt.search();

创建javascript对象
创建名为“person”的对象,并为其添加4个属性。
eg person=new Object();
person.firstname=”Bill”;
person.lastname=”gates”;
person.age=”56”;
person.eyecolor=”blue”;
访问对象的属性
访问对象属性的语法是:
objectName.propertyName

Eg var message=”hello world!”;
Var x=message.length;
执行后x的值是12.
访问对象的方法
语法:
objectName.methodName()
Eg var message=”hello world!”;
Var x=message.toUpperCase();
执行后x的值是; HELLO  WORLD!
Javascript 函数语法
函数就是包裹在花括号中的代码块,前面使用了关键词function;
function functionname(){
这里是要执行的代码
}
关键词function必须是小写的,还可以调用带参数的参数。
eg <button onclick=”myfunction(‘bill gates’,’ceo’)”></button>
<script>
function myfunction(name,job){
alert(“welcome”+name+”,the”+job);
}
</script>
带有返回值的参数
eg1 function myfunction(){
Var x=5;
Return x;
}
还可以 document.getElementById(“demo”).innerHTML=myfunction();
demo 元素的innerhtml将成为5,也就是myfunction()所返回的值。

eg2 计算2个数字的乘积,并返回结果。
Function myfunction(a,b){
Return ab;
}
document.getElementById(“demo”).innerHTML=myFunction(4,3);
局部javascript 变量
在函数内var声明的变量。局部变量会在函数运行以后被删除。
全局javascript变量
在函数外var声明的变量。全局变量会在页面关闭后被删除。
如果您把值付给未声明的变量,该变量将被自动作为全局变量声明。
Javascript 运算符
算术运算符 + —
/ % ++ —
赋值运算符 += -= *= /= %=
用于字符串的+运算符起连接作用。
若插入一个空格,需要把空格插入到一个字符串中。
eg txt1=”what”;
txt2=”girl”;
txt3=txt1+” ”+txt2;
[color=Red]对字符串和数字进行加法运算
规则是:如果把数字与字符串相加,结果将成为字符串
Javascript 比较和逻辑运算符 用于测试true和false
比较运算符[/color]
== 等于
=== 全等(值和类型)
!= 不等于

大于
< 小于

<=
eg if(age<18)document.write(“Too young”);
逻辑运算符
&& || !
条件运算符
Variablename=(condition)?value1:value2
条件语句基于不同的条件来执行不同的动作。
条件语句
If语句
If、、、、、else语句
If、、、、else if….else语句
Switch语句
Switch(n)
{
Case1:
执行语句代码块1;
Break;
Case1:
执行语句代码块1;
Break;
Cas21:
执行语句代码块2;
Break;
Case3:
执行语句代码块3;
Break;
Default:代码块
}
eg 如果今天不是周六或周日,则会输出默认的消息。
var day=new Date().getDay();
Switch(day)
{
case 6;
X=”Today it’s Saturday”;
Break;
case 0:
X=”today it’s sunday”;
Break;
Default:
X=”Looking forward to the Weenend”;
}
Javascript 循环
For(var i=0;i<cars.length;i++)
{
Document.write(cars[i]+”<br>”);

}
不同类型的循环
For
For/in
While
Do/while
eg var person={发那么:“jhon”,iname:”doe”,age:25}
for (x in person)
{
Txt=txt+person[x];
}
Break语句用于跳出循环。
Continue用于跳出循环中的一个迭代。
eg for(i=0;i<10;i++)
{ if(i==3)
{
break;
}
x=x+”The number is”+i+”<br>”;
}
Eg for(i0;i<=10;i++)
{if(i==3)continue;
x=x+”the number is”+i+”<br/>”
}
Javascript 错误———Throw、Try和Catch
try语句测试代码块的错误。
catch语句处理错误。
throw语句创建自定义错误。
错误一定会发生
当javascript引擎执行javascript代码时,会发生各种错误;
可能是语法错误,通常是程序员造成的编码错误或错误字。
可能是拼写错误或语言中缺少的功能(可能由于浏览器差异);
可能是由于来自服务器或用户的错误输出而导致的错误。
当然,也可能由于许多不可预知的因素。

Javascript抛出错误
Javascript测试和捕捉
try语句允许我们自定义在执行时进行错误测试的代码块。
catch语句允许我们定义当try代码块发生错误时,所执行的代码块。
Javascript语句try和catch是成对出现的。
语法
try
{
//在这里运行的代码
}
catch(error)
{
//在这里处理错误
}

eg function message()
{
try{adddlert(“Welcome guest!”);}
catch(err)
{txt=”本页有一个错误。\n\n ”;
txt+=”错误描述:”+err.message+”\n \n”;
txt+=”点击确定继续。\n\n”;
aert(txt);
}
}
<body>
<input type=”button” value=”查看消息” onclick=“messsage()”/>
<body>
效果是:

Throw语句
Throw语句允许我们创建自定义错误
正确的术语是:创建或抛出异常(exception)。
如果把throw与try 和catch一起用,那么您能够控程序流,并且生成自定义的错误消息。
语法:
Throw exception
异常可以是javascript字符串、数字、逻辑值或对象。
eg 本实例检测输入变量的值。如果值是错误的,会抛出一个异常(错误)。Catch会捕捉到这个错误,并显示一段自定义的错误消息。
eg
<script>
Function myfunction(){
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.getElenmentById(“mess”);
y.innerHTML=“Error :”+err+”.”;
}
}

</script>
<h1>my first javascript</h1>
<p> plaease input a number between 5 和10 :</p>
<input id=”demo” type=”text”>
<button type=”button” onclick=”myfunction()”>Test input</button>
<p id=”mess”></p>
效果是:

[color=Red] Js验证
javascript 表单验证[/color]
Javascript可用来在数据被送往服务器前对html表单中的这些输入数据进行验证。
被 javascript 验证的这些典型的表单数据有:
。用户是否已填写表单中的必填项目
。用户输入的邮件地址是否合法?
。用户是否已输入合法的日期?
。用户是否在数据域(numeric field)中输入了文本?
必填(或必选)项目
下面的函数用来检查用户是否已填写表单中的必填(或必选)项目。假如必填
或必选项为空,那么警告框会弹出,并且函数的返回值为false,否则函数的返回值则为true(意味着数据没有问题)
function validate_required(field,alerttxt){
With(field)
{
If(value==null||value=””)
{ alert(alerttxt);return false}
else{return true}
}
}

java前端开发的工具包|前端开发json的作用|基于nodejs前端开发案例

» 本文来自:前端开发者 » 《WEB前端开发入门javascript指南》
» 本文链接地址:https://www.rokub.com/5272.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!