首页 资讯 社群 我的社区 搜索

JavaScript基础精讲

zhupei
2018-10-11 09:51:30

  本文主要从javascript简介开始,分享Js语法、JS函数、BOM编程和DOM编程的相关知识。

 一、JS简介

  1.1 简介
  JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。它的解释器被称为JavaScript引擎,为浏览器的一部分,广泛用于客户端的脚本语言,最早是在HTML(标准通用标记语言下的一个应用)网页上使用,用来给HTML网页增加动态功能。

  1.2 组成部分

  核心(ECMAScript) :数据类型、语句、声明等;核心对象
  文档对象模型(DOM) :Document Object Model(XML DOM和HTML DOM)
  浏览器对象模型(BOM):BrowserObject Model(核心对象:window、location等)

  1.3 编写方式
  直接通过事件调用:
onClick="alert('hello');"

  内部编写方式:

<script  type="text/javascript" >
alert("hello good mi");
</script>

  外部方式:

<script type="text/javascript"  src="1.js" ></script>

 二、JS语法

  2.1 基本语法

  js的语法很多都与java差不多,但是又有所不同,值得一提的就是java和javascript是完全不同的两个概念,就像雷锋和雷锋塔一样。下面来看看常用的一些变量和数据类型。
·var 合法的变量名;
        变量名不能使用关键字。多个变量可以用逗号分隔。
      ·运算符号与Java中相同
      · if(表达式){}
          else{}
      · for(初始化;条件;增量或减量){}
      ·while(条件){}
      ·switch(表达式)
          {case 常量值1:JavaScript语句;
            case 常量值2:JavaScript语句;
            default:JavaScript语句;}
       •类型:number/null/boolean/string/object/undefinde
       •类型转换:掌握parseFloat()和parseInt()函数。
       •重点定义函数:function 函数名(参数列表){}
              注:也可以没有参数
              调用函数:事件名="函数名()"
               获取表单数据:document.表单名.表单元素名.value
示例:

<script type="text/javascript" >                                                                                                                          var v2="abc";
alert(typeof v2);
var v3=100;
alert(typeof v3);  //number类型
var v5=new Date();
alert(typeof v5);  //object类型 </script>

  2.2  数据类型

变量、函数、运算符区分大小写。
变量是弱类型的,var a=10;
注释://和/* */
5种原始数据类型:Underfined、Null、Boolean、Number、String
JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型.
JavaScript 只有一种数字类型。数字可以带小数点,也可以不带。
对象由花括号分隔。在括号内部,对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔:


JavaScript中的基本数据类型有数字型、字符串型和布尔值三种,除了基本数据类型之外,JavaScript还支持对象、数组、函数、null和undefined数据类型。JavaScript与其他语言一样,也支持常量与变量,不过JavaScript中的变量是无类型的,即可以存储任何一种数据类型的数据。

JavaScript中的运算符比较多,可以分为算术运算符、关系运算符、字符串运算符、赋值运算符、逻辑运算符、逐位运算符和其他运算符七大类。在使用
JavaScript中的运算符时,要注意不同运算符的优先次序。


 三、JS函数

  3.1基本函数

 形式参数:定义函数时为函数定义的参数,它代表参数的类型和位置。
        实际参数:调用函数时传递给函数的参数值。
        调用时:把实参的值传递给形参。
        函数名严格区分大小写。
        多个参数用逗号隔开,要调用函数时,必须为逗号隔开的每个参数指定类型兼容的值。
        如果需要返回结果,使用return语句。

书写格式:


方式1

function 函数名([参数]){ 函数体 }

有返回值,直接return

方式2
var 函数名=function([参数]){ 函数体 }

方式3
var 函数名=new function([参数],函数体);
  3.2 常用函数方法


Array是可变长数组。
contact();链接多个数组,返回一个新数组
join:链接数组元素,用指定的字符。
pop,push,栈结构
valueOf(),返回数组的原始值
sort(),按字符排序

  3.3 示例
var arr1=["a","b","c"];
alert(arr1.length);
var arr2=new Array(); //无元素
alert(arr2.length);
arr2[0]="a";
alert(arr2.length);
*/
//构建数组是,给定元素
/*var arr4=new Array("a","b","c");
for(var i=0;i<arr4.length;i++){
alert(arr4[i]);
}
*/
//contact();链接多个数组,返回一个新数组
/*var arr1=["a","b"];
var arr2=["b","d"];
var arr3=arr1.concat(arr2);
for(var i=0;i<arr3.length;i++){
document.write(arr3[i]+"<br />");
}
*/
//join:链接数组元素,用指定的字符。
/*var arr1=[2016,6,2];
var result=arr1.join("-");
document.write(result);
*/
//pop、push
//定义了一个比较器
/*function comp(a,b){
return a-b;
}
var arr1=[1,3,100,5,4,9,7];
arr1.sort(comp);
for(var i=0;i<arr1.length;i++){
document.write(arr1[i]+"<br />");
}
*/
/*var v1=" ";
if(v1){
alert("true");
}else{
alert("false");
}
*/
/*var now=new Date();
document.write(now.toLocaleDateString()+"<br />");
document.write(now.getTime());
*/
/*for(var i=0;i<100;i++){
document.write(Math.random());
}
*/
/*var s1="abc"+"ddd";
document.write(s1.bold());
*/
/*var s1="jbjlnxln";
alert(s1.substr(1,3));
alert(s1.substring(2,9));
*/
//var reg1=new RegExp("^\d+$");
/*var s1="1234";
var s2=s1.match(reg1); //返回s1中符合条件的内容
alert(s2);
var reg1=/^d+$/;
*/


 四、BOM基础

  4.1 Bom简介
  BOM是browser object model的缩写,简称浏览器对象模型BOM提供了独立于内容而与浏览器窗口进行交互的对象由于BOM主要用于管理窗口与窗口之间的通讯,因此其核心对象是windowBOM由一系列相关的对象构成,并且每个对象都提供了很多方法与属性BOM缺乏标准,JavaScript语法的标准化组织是ECMA,DOM的标准化组织是W3CBOM最初是Netscape浏览器标准的一部分window对象是BOM的顶层(核心)对象,所有对象都是通过它延伸出来的,也可以称为window的子对象
由于window是顶层对象,因此调用它的子对象时可以不显示的指明window对象。

  4.2 示例1:通过点击按钮有弹窗操作

在demo4.html中
<script type="text/javascript">
/*function chose(){
var rtValue=window.showModalDialog("demo3.html","","dialogHeight:100px,dialogwidth:100px");
document.getElementById("name").value=rtValue;

}*/
function chose(){
window.showModalDialog("demo3.html",window,"dialogHeight:100px,dialogwidth:100px");
}


</script>

<body>

<input type="text" id="name" name="name" value="" />
<input type="button" value="选择" onclick="chose()" />


</body>

在demo3.html中:

<script type="text/javascript">
function rtValue(inputObj){
/*var v=inputObj.value;
window.opener.document.getElementById("name").value=v;
window.close();
*/

/*window.returnValue=inputObj.value;
window.close();
*/

var rtValue=inputObj.value;
window.dialogArguments.document.getElementById("name").value=rtValue;
window.close();
}
</script>

<body>
<input type="radio" name="type" value="金牌会员"
onclick="rtValue(this)" />金牌会员<br />
<input type="radio" name="type" value="铜牌会员"
onclick="rtValue(this)"/>铜牌会员<br />
<input type="radio" name="type" value="钻石会员"
onclick="rtValue(this)"/>钻石会员<br />
<input type="radio" name="type" value="白金会员"
onclick="rtValue(this)"/>白金会员<br />

</body>
  4.3 示例2:网页时间的动态显示
<script type="text/javascript">
/*function showTime(){
var date=new Date();
document.getElementById("time").innerHTML=date.toLocaleString();
window.setTimeout("showTime()",1000);
}
window.setTimeout("showTime()",1000);
*/

function showTime(){
var date=new Date();
document.getElementById("time").innerHTML=date.toLocaleString();
}
var i1=window.setInterval("showTime()",1000);

function stop(){
window.clearInterval(i1);
}
function start(){
i1= window.setInterval("showTime()",1000);
}

</script>

<body>
当前时间是:<span id="time" ></span>
<input type="button" value="停止" onclick="stop()" />
<input type="button" value="开始" onclick="start()" />

</body>

  4.4 history对象
  即网页中的下一步,或者返回到上一个网页的内容。
<script type="text/javascript">

function jump(){
window.location.href="http://www.tianfang1314.cn";
}
</script>

<body>

<a href="javascript:window.history.back()" >返回</a>
<a href=" javascript:window.history.forward()">前进</a>
<input type="button" value="跳转" onclick="jump()" />

 五、DOM基础

  5.1 Dom的结构
DOM(Document Object Model)标准是W3C。把文档当做一个树状结构

Node:DOM中一切都是节点。

Element:元素节点

Attr:属性节点

Text:文本节点

document:文档节点

 5.2 Node中的常用属性和方法


示例:网页中的全选和反选

<script  type="text/javascript">
window.onload=function(){
document.getElementById("b1").onclick=function(){
//根据name获取checkbox对象
//XMLDOM方法
/*var hobbyNodes=document.getElementsByName("hobby");
for(var i=0;i<hobbyNodes.length;i++){
hobbyNodes[i].setAttribute("checked","checked");
}*/

//HTML DOM
var hobbyNodes=document.getElementsByName("hobby");
for(var i=0;i<hobbyNodes.length;i++){
hobbyNodes[i].checked=true;
}
}
document.getElementById("b2").onclick=function(){
var hobbyNodes=document.getElementsByName("hobby");
for(var i=0;i<hobbyNodes.length;i++){
hobbyNodes[i].checked=false;
}
}
document.getElementById("b3").onclick=function(){
var hobbyNodes=document.getElementsByName("hobby");
for(var i=0;i<hobbyNodes.length;i++){
hobbyNodes[i].checked=!hobbyNodes[i].checked;
}
}
document.getElementById("c1").onclick=function(){

var hobbyNodes=document.getElementsByName("hobby");
for(var i=0;i<hobbyNodes.length;i++){
hobbyNodes[i].checked=this.checked;
}
}

}

</script>
<body>
请选择您的爱好:<br />
<input type="checkbox" id="c1" />全选/全不选<br />
<input type="checkbox" name="hobby" value="fb" checked="checked"/>足球
<input type="checkbox" name="hobby" value="bb" />篮球
<input type="checkbox" name="hobby" value="ppb" />乒乓球
<input type="checkbox" name="hobby" value="ymb" />羽毛球
<br />
<input type="button" id="b1" value="全选" />
<input type="button" id="b2" value="全不选" />
<input type="button" id="b3" value="反选" />

</body>

  总结:整个javascript的知识比较琐碎也比较精彩,官方文档其实是我们必不可少的工具,学会查看文档并正确使用文档是一个开发者必备的技能!想进一步学习的可以关注我的博客,同时也可以查阅下列推荐的好书:《JavaScript权威指南》、《JavaScript DOM编程艺术》、《锋利的JQuery》、《深入浅出Node.js》。

用户评论