JavaScript基础精讲

转载

mb61c3f0ed6fce2 2022-01-06 16:50:30

文章标签 javascript html i++ Java 文章分类 Java 后端开发

---------------------------------------------------------------------------------------------------------------

作者：朱培

---------------------------------------------------------------------------------------------------------------

本文主要从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主要用于管理窗口与窗口之间的通讯，因此其核心对象是window
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性
BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C
BOM最初是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。把文档当做一个树状结构

JavaScript基础精讲_html

Node:DOM中一切都是节点。

Element:元素节点

Attr:属性节点

Text:文本节点

document:文档节点

5.2 Node中的常用属性和方法

JavaScript基础精讲_html_02

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

<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》。

上一篇：Java web文件上传下载

下一篇：浅谈meta标签

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯