JavaScript的理解2

最新推荐文章于 2022-04-02 22:02:57 发布
最新推荐文章于 2022-04-02 22:02:57 发布
阅读量171 收藏 1
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/j_better/article/details/80764491
版权

1）js中的Array对象 

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>js中的Array对象</title>
  <script type="text/javascript">
   /**
    * 1)在JavaScript中数组中可以存在各种类型的值
    * 2)在javaScript中不会发生角标越界的现象
    */
  //方式1：创建Array对象,动态方式
   var arr=new Array(3);
           alert(arr.length);
    arr[0]="hello";
    arr[1]=23;
    arr[2]=false;
    //当实际输入的值大于数组的长度时，依旧可以输出不会发生角标越界的现象
   // arr[3]='a';
   
   //也可以直接给数组中添加元素
   //var arr=new Array("hello",10,false);
   
   for(var x=0;x<arr.length;x++){
        document.write(arr[x]+"<br />");
   }
        document.write("<hr />")
  //方式2：直接赋值，静态方式：
  var array=[10,true,"hello"];
        document.write(array.length+"<br />");
  for(var x=0;x<array.length;x++){
        document.write(array[x]+"<br />");
   }
  
  //数组中方法：
  /**
   * join：将数组中的元素用一个符号进行拼接，返回新的一个字符串
   */
  var a=["hello","world","java","javaSE"];
  /*a=a.join("-");
      document.write(a);*/
      document.write("<hr />");
  /**
   * reverse：将数组中的元素进行反转
   */
      document.write("反转前：");
  for(var i=0;i<a.length;i++){
      document.write(a[i]+" ");
  }
      document.write("<hr />")
  a=a.reverse();
      document.write("反转后：");
  for(var i=0;i<a.length;i++){
      document.write(a[i]+" ");
  }
  </script>
  
     </head>
 <body>
 </body>
</html>

运行结果： 

hello
23
false

3
10
true
hello

反转前：hello world java javaSE 

反转后：javaSE java world hello

2）js的自定义对象 

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>js中的自定义对象</title>
  <script type="text/javascript">
   
  //方式1：有参的形式创建对象
   function Person(name,age){
        this.name=name;
        this.age=age;
        this.speak=function(){
             alert("这是说话的功能...")
        }
   }
   //创建Person对象
   var person =new Person("迪丽热巴",25);
       document.write(person.name+"<br />");
       document.write(person.age+"<br />");
   //调用speak方法
       person.speak();
  //方式2：无参的形式创建对象
       function Student(){
    
       }
   //创建对象
   var stu=new Student();
   //追加属性和方法
       stu.name="高雯";
       stu.age=24;
       stu.eat=function(){
    alert("这是吃饭的功能...");
   }
       document.write(stu.name+"<br />");
       document.write(stu.age+"<br />");
   stu.eat();
  //方式3：自定义Object对象
   function Object(){
    
   }
   //创建对象
   var obj=new Object();
   //追加属性和方式
   obj.name="张三";
   obj.age=23;
   obj.play=function(){
        alert("这是玩的功能...");
   }
       document.write(obj.name+"<br />");
       document.write(obj.age+"<br />");
       obj.play();
  //方式4：json的方式
  /**
   * json的格式：
   *   "属性名"：值,
   *   "属性名"：值,
   *   "方法名":function(){
   *    方法内容
   *   }
   */
   var p={
    "name":"李四",
    "age":22,
    "shopping":function(){
         alert("这是购物的功能...");
    }
   };
       document.write(p.name+"<br />");
       document.write(p.age+"<br />");
       p.shopping();
   </script>
 </head>
 <body>
 </body>
</html>

运行结果： 

迪丽热巴
25
高雯
24
张三
23
李四
22

3）有关自定义对象的练习 

<!DOCTYPE html>
<html>
 <head>
  <!--
   设计一个数组工具对象，例如ArrayUtil对象，该对象提供以下两个方法：
         search(array,target): 传入指定的数组和指定的字符串，返回指定字符串所在的位置
            max(array): 传入指定的数组，返回该数组中的最大值
  -->
  <meta charset="UTF-8">
  <title>js的自定义练习</title>
  <script src="Util.js"></script>
  <script type="text/javascript">
   //定义一个数组
       var arr=[23,34,45,56,67];
   //创建ArrayUtil对象
       var util=new ArrayUtil();
   //调用方法
       document.write("该元素返回的索引值是："+util.search(arr,56)+"<br />");
   
       document.write("该数组中的最大值是："+util.max(arr));
  </script>
 </head>
 <body>
 </body>
</html>

运行结果： 

该元素返回的索引值是：3
该数组中的最大值是：67

4）js中的原型（prototype） 

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>js中的原型</title>
  <script type="text/javascript">
   /**
    * JavaScript中每一个内置对象都有一个prototype原型属性
    * 原型属性的作用：
    *    就是为了给内置对象追加方法使用的
    *   原型属性是可以直接被内置对象调用然后追加方法
    */
   Array.prototype.search=function (target){
    //遍历数组
    for(var i=0;i<this.length;i++){//this代表的是当前的Array对象
         if(this[i]==target){
              return i;
             }
        }
        return -1;
   }
   Array.prototype.max=function(){
        var max=this[0];
    //遍历数组
    for(var i=0;i<this.length;i++){
         if(this[i]>max){
          max=this[i];
         }
    }
    return max;
   }
   //定义一个数组
   var arr=[12,23,34,45,56];
   var index=arr.search(34);
       document.write("该元素返回的索引值是："+index+"<br />");
   var max=arr.max();
       document.write("该数组中的最大值是："+max);
  </script>
 </head>
 <body>
 </body>
</html>

运行结果： 

该元素返回的索引值是：2
该数组中的最大值是：56

5）js中BOM编程的window对象 

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>BOM编程中的window对象</title>
  <script type="text/javascript">
   /**
    * BOM编程是基于浏览器对象的模型编程
    * js将浏览器主要划分成以下几个部分：
    *   1)窗口：window对象
    *   2)地址栏对象：location对象
    *   3)历史记录：history对象
    *   4）屏幕手表：screen对象
    */
   function testopen(){
        window.open("多余的网页.html","_blank");
   }
       var IntervalId;
   //定时器SetInterval
       function testSetInterval(){
        IntervalId=window.setInterval("testopen()",2000);
   }
   //清除和SetInterval相关的定时器
   /**
    * 这个方法括号里是输入一个任务Id
    * 所以我们要在需要停掉的任务前定义一个id，将定时器任务赋值给id
    * 然后再添加到清除定时器中就可以了
    * 在执行的时候，建议先清除浏览器中的历史记录和cookie数据，不然有可能会无法执行
    */
   function testClearInterval(){
        window.clearInterval(IntervalId);
   }
   //定时器SetTimeOut
   /**
    * 这个定时器方法只执行一次
    */
   var TimeOutId;
   function testSetTimeOut(){
        TimeOutId=window.setTimeout("testopen()",3000);
   }
   //清除SetTimeOut定时器的方法
   /**
    * 这个清除的方法和清除SetInterval定时器的方法时一样的
    * 都是先定义一个任务Id，然后将任务赋值给ID
    * 最后调用清除方法即可
    */
   function testClearTimeOut(){
        window.clearTimeout(TimeOutId);
   }
   
   /**
    * 和弹框有关的方法
    * alert方法
    * confirm方法
    */
   function testAlert(){
        alert("今天可能要下雨...")
   }
   
   function testConfirm(){
    var flag=window.confirm("您确定要删除吗？一旦删除，将无法回复");
    if(flag){
         alert("删除数据成功！")
    }else{
         alert("删除数据失败！")
    }
   }
   //prompt:提示对话框，带有一条消息和一个输入框
   function testPrompt(){
        var flag=window.prompt("请输入您的账户密码：");
    if(flag){
         alert("密码输入正确！");
    }else{
         alert("密码输入错误！");
    }
   }
  </script>
 </head>
 <body>
      <input type="button" value="open" οnclick="testopen()"/>
      <input type="button" value="SetInterval" οnclick="testSetInterval()" />
      <input type="button" value="Clearinterval" οnclick="testClearInterval()" />
      <input type="button" value="SetTimeOut" οnclick="testSetTimeOut()"/>
      <input type="button" value="clearTimeOut" οnclick="testClearTimeOut()" />
      <input type="button" value="alert" οnclick="testAlert()"/>
      <input type="button" value="confirm" οnclick="testConfirm()"/>
      <input type="button" value="prompt" οnclick="testPrompt()" />
 </body>
</html>

6）js中BOM编程中的location对象 

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>BOM中的location对象</title>
  <script type="text/javascript">
  function testHref(){
       //alert(window.location.href);
   //或者我们可以直接给后面添加网页地址
       window.location.href="多余的网页.html";
  }
  function testReload(){
       window.location.reload();
  }
  //function testSettimeout(){
       window.setTimeout("testReload()",1000);
  //}
  </script>
 </head>
 <body>
      <input type="button" value="href" οnclick="testHref()"/>
      <input type="button" value="刷新" οnclick="testSetTimeOut()" />
 </body>
</html>

7）js中BOM编程之history对象 

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>BOM编程中的history对象</title>
  <script type="text/javascript">
   /**
    * history对象的三个重要方法：
    *   forward：跳转到前一个URL地址
    *   back：跳转到后一个URL地址
    *   go：1和-1也可以代表forward和back
    */
   function testforward(){
        //window.history.forward();
        window.history.go(1);
   }
  </script>
 </head>
 <body>
      <a href="多余的网页.html">跳转</a>
      <input type="button"  value="前进" οnclick="testforward()"/>
 </body>
</html>

8）js中BOM编程中的screen对象 

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>BOM编程中的screen对象</title>
  <script type="text/javascript">
   /**
    * screen对象主要有四个方法进行对象
    * availHeight:屏幕的高度，其中不包括窗口的任务栏
    * height：屏幕的高度，包括窗口的任务栏高度
    * availWidth：屏幕的宽度
    * width：屏幕的宽度  值不变
    */
       document.write("availHeight："+window.screen.availHeight+"<br />");
       document.write("height："+window.screen.height+"<br />");
       document.write("availWidth："+window.screen.availWidth+"<br />");
       document.write("width："+window.screen.width);
  </script>
  
 </head>
 <body>
 </body>
</html>

运行结果： 

availHeight：728
height：768
availWidth：1366
width：1366

9）js中的事件编程之点击事件 

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>js中的点击事件</title>
  <script type="text/javascript">
   function testOnClick(){
        alert("试试就试试!")
   }function testOndblclick(){
        alert("真的要点击两次呢")
   }
  </script>
 </head>
 <body>
      <input type="button" value="点我试试" οnclick="testOnClick()" />
      <input type="button" value="要点我两次哦" οndblclick="testOndblclick()"/>
 </body>
</html>

10）js中的事件编程之焦点事件 

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>事件编程之焦点事件</title>
  <script type="text/javascript">
   /**
    * 获取焦点
    */
   function testonfocus(){
    /**
     * 获取焦点首先我们应该在标签中设置一个id
     * 因为id是唯一的
     * 我们可以通过id获取它的标签，从而去连接它的value值
     */
        var username=document.getElementById("username");
        username.value="";
   }
   /**
    * 失去焦点
    */
   function testonblur(){
    //获取用户在文本中输入的值
        var user = document.getElementById("username").value;
   //获取span标签的id
        var sp = document.getElementById("sp");
   if(user=="scir"){
    //如果验证成功，向span标签中添加内容
        sp.innerHTML="校验成功，格式正确".fontcolor("#00ff00");
   }else{
        sp.innerHTML="格式错误请重新输入".fontcolor("red");
   }
   }
  </script>
 </head>
 <body>
  <input type="text" id="username" value="请输入6到12个字母或数字" 
       size="25" οnfοcus="testonfocus()" οnblur="testonblur()"/><span id="sp"></span>    
 </body>
</html>

11）js中的选项卡练习 

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>选项卡的练习</title>
  <script type="text/javascript">
    function testchange(){
    //获取省份的id
           var address=document.getElementById("address").value;
    //获取城市的id
           var city=document.getElementById("city");
   //给city标签中先添加个空值，后面的数据就不会出现叠加的现象了
           city.innerHTML="";
   if(address=="广东"){
            var arr=["广州","深圳","珠海"];
            for(var i=0;i<arr.length;i++){
     //双引号里只能有单引号，单引号里可以有双引号
            city.innerHTML += "<option value='"+arr[i]+"'>"+arr[i]+"</option>" ;
        }
   }
   if(address=="陕西"){
        var arr=["西安","延安","宝鸡"];
    for(var i=0;i<arr.length;i++){
         city.innerHTML+="<option value='"+arr[i]+"'>"+arr[i]+"</option>";
    }
   }
   if(address=="山西"){
        var arr=["大同","太原","运城"];
    for(var i=0;i<arr.length;i++){
         city.innerHTML+="<option value='"+arr[i]+"'>"+arr[i]+"</option>";
    }
   }
  }
  </script>
 </head>
 <body>
  请选择您的省份：
  <select οnchange="testchange()" id="address">
       <option value="请选择">请选择</option>
       <option value="广东">广东</option>
       <option value="陕西">陕西</option>
       <option value="山西">山西</option>
  </select>
  城市：
  <select id="city">
   
  </select>
 </body>
</html>

12）js中的鼠标事件和加载事件 

<!DOCTYPE html>
<html>
 <head>
  <!--
         鼠标事件：
          onmouseover：鼠标经过
          onmouseout：鼠标离开事件
         加载事件：
          onload：一般用在body中，当body中的内容加载完成后就会触发这个事件
        -->
  <meta charset="UTF-8">
  <title>js中的鼠标事件</title>
  <style type="text/css">
   #mouse{
        width: 100px;
        height: 100px;
        border: solid;
   }
  </style>
  <script type="text/javascript">
   function testmouseover(){
        alert("鼠标经过了...");
   }
   function testmouseout(){
        alert("鼠标离开了...")
   }
   function testonload(){
        alert("网页中的body部分已经加载完成了...")
   }
  </script>
 </head>
 <body οnlοad="testonload()">
      <!--
         先做一个div块
        -->
        <div id="mouse" οnmοuseοver="testmouseover()" οnmοuseοut="testmouseout()">
         
        </div>
 </body>
</html>

j_better
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript的理解，JS的初步认识（一）
yycnf的博客
11-18 1610
什么是 JavaScript 语言？ JavaScript 是一种轻量级的脚本语言。脚本语言指的是它不具备开发操作系统的能力，而是只用来编写控制其他大型应用程序的“脚本”。 JavaScript 是一种嵌入式（embedded）语言。它本身提供的核心语法不算很多，只能用来做一些数学和逻辑运算。JavaScript 本身不提供任何与 I/O（输入/输出）相关的 API，都要靠宿主环境（host）提供，所以 JavaScript 只合适嵌入更大型的应用程序环境，去调用宿主环境提供的底层 API。宿主环境最常
理解Javascript
03-02
01_理解内存分配在正式开始之前，我想先说两句，理解javascript系列博文是通过带领大家分析javascript执行时的内存分配情况，来解释javascript原理，具体会涵盖javascript预加载，闭包原理，面象对象，执行模型，...
对javascript理解
云计算?
07-21 148
近期在给学校做一个项目（作业提交审核系统），本人以前都是采用Jquery来实现前台的各种脚本效果，但是本项目想采用javascript来实现一下，从而使得自己也对javascript更加的了解。在使用javascript的时候最头痛的是跨浏览器的问题，本人一般是在Firefox下测试，一般的情况下，FX对javascript的支持是最好的，因为它是严格按照W3C标准的浏览器，但是由于在国内使用F...
javascript理解
zhangyonghan的博客
03-21 3585
JavaScript 是一种轻量级的解释执行的而非编译的脚本语言。1.特点 :（ 1 ）脚本语言 : 解释型语言，不需要先预编译而是在程序运行的过程中逐行解释并执行。(2)  简单 :  采用的弱类型的变量类型 ·,  对使用的数据类型未作出严格的要求。类似 Java 基本语句和控制的脚本语言。（ 3 ）动态性 :  采用事件驱动的脚本语言。它不要进过 WEB 服务器就可以对用户的输入做出响应。(...
JavaScript的理解
weixin_42608188的博客
09-05 169
个人对JavaScript的理解 web开发离不开html，css和JavaScript。html作为页面最基础的骨架，css则是起到修饰的作用，相当于是页面的皮囊，而js则是使得页面能够与用户进行交互，使得页面具有了“生命”，可以称为是页面的灵魂。三者缺一不可，以目前的技术html/css完全是可以通过计算算法分析图片直接生成出来，而js目前还是无法直接生成出来的，所以他们的重要性孰轻孰重可想而知。想要做好web开发，js是重中之重。 学习js最好买一本工具书，目前我使用的是《JavaScript高级程序
深入理解JavaScript
最新发布
06-27
基于对象很好理解，毕竟在 JavaScript 中⼀切都是对象，我们随时可以使⽤点号操作符来调 某个对象的⽅法。但是⼗多年前，我们编写 JavaScript 程序时，都是像 C 语⾔那样使⽤函数来组织我们的程序的，只有在论坛的...
深入理解JavaScript 5分
12-07
深入理解JavaScript深入理解JavaScript深入理解JavaScript
JavaScript的基本理解
weixin_43885704的博客
12-26 601
什么是JavaScript? 1.脚本语言(可以用来编程并且直接执行源代码的语言)， 2.弱类型语言(没有类型声明，它的变量不必具有一个明确的类型)， 3.解释型语言（运行时直接将程序翻译成机器的语言），1995年网景公司设计出来， 4.运行在客户端，对用户的响应采用事件驱动，基于对象 #JS组成部分： 1.ECMAScript 核心，描述了该语言的语法和基本对象 2.DOM ...
简单理解javascript
孙晴
05-19 144
概念 javascript是一种具有面向对象能力的、解释性的程序设计语言。它是基于对象和事件驱动并具有相对安全性的客户端脚本语言。该语言不需要在一个语言环境下运行，只需要支持他的浏览器即可。该语言的主要作用就是验证发往服务器端的数据、增加web互动、加强用户体验度等。 特点 松散性 javascript语言核心与C、C++、Java相似，比如条件判断、循环、运算符等，但它却是一种松散类...
关于JavaScript的理解以及一些基本用法
weixin_54401885的博客
04-02 939
JavaScript: 由布兰登·艾奇10天完成，来自网景通信公司，原本名称为：LiveScript，后续因为网景公司与sum公司合作改名为JavaScript 后续微软和Nombas也分别开发了JScript和ScriptEase两种脚本语言。 但是3者之间没有统一的标准，所以不能互用，所以在后来ECMA（欧洲计算机制造商协会）的调谐下，以JavaScript为基础定制了标准ECMAScript。 ECMAScript也是一门脚本语言，缩写为ES，通常看做JavaScript的标准化规范。 本质
对JavaScript的理解
weixin_44570949的博客
08-18 480
1. JavaScript介绍 JavaScript是互联网上最流行的脚本语言，这门语言可以用于HTML和web，更可广泛用于服务器、PC、笔记本电脑、平板电脑、和智能手机等设备。JavaScript是一种轻量级的编程语言，也是可插入HTML页面的编程代码，JavaScript插入HTML页面后，可由所有的现代浏览器执行。 2. JavaScript用法 在HTML中的脚本必须位于 之间的代码行包含了 JavaScript: 不需要知道上面的代码，只需要明白，浏览器会解释标签中的JavaScript：
JavaScript进阶之理解篇
weixin_30587927的博客
05-22 83
一、函数声明与函数表达式 1、函数声明之后，可以在声明之前调用，也可以在声明之后调用，因为所有的函数声明(包括var声明的变量)都会在代码执行之前就加载到作用域中，函数名其实是一个Function类型的对象的引用，声明函数时函数名其实也就被赋值了；2、而函数表达式则不同，函数表达式是将函数赋值给一个变量，只有当代码执行到那一行的时候，函数才真正的有定义，因此这个变量只有在表达式之后才能使用，否则...
认识JavaScript
我的博客
07-24 676
1.JavaScript是什么 JavaScript是一种运行在客户端的脚本语言 脚本语言：不需要编译，运行过程由js解释器（js引擎）逐行来进行解释和执行 现在也可以基于node.js技术进行服务端编程 HTML/CSS标记语言 - 描述类语言 JS脚本语言 - 编程类语言 2.JavaScript的作用 表单动态验证（js最初的目的） 网页特效 服务端开发（node.js） 桌面特效（Electron） App（Cordova） 控制硬件-互联网（Ruff） 游戏开发（coco
全面理解 JavaScript 中的 this
liuxinyang666的博客
12-08 235
本文介绍了 JavaScript 中的 this 关键字在各种情况下的含义，虽然这只是 JavaScript 中一个很小的概念，但借此我们可以深入了解 JavaScript 中函数的执行环境，而这是理解闭包等其他概念的基础。掌握了这些概念，才能充分发挥 JavaScript 的特点，才会发现 JavaScript 语言特性的强大。全局上下文无论是否在严格模式下，在全局执行上下文中（在任何函数体外部）
对JavaScript语言的理解
liulangmao8918的博客
10-14 754
JavaScript是一种客户端的脚本语言，不需要编译，直接运行时便解析便执行的语言。 主要用来向HTML页面添加交互行为，有了JavaScript，可以使网页变得主动，他可以 通过嵌入或调入在标准的HTML语言中实现，单独的js文件有利于结构和行为的分离。 特点 1.简单  JavaScript语言中采用的是弱类型的变量类型，对使用的数据类型未作出严格的 要求，是基于java基本语句和
浅谈对Javascript的理解
weixin_42596719的博客
11-25 3303
javascript（H） 概念：一门客户端脚本语言 运行在客户端浏览器中，每一个浏览器都有JavaScript的解析引擎 脚本语言：不需要编译，直接就可以被浏览器解析执行了 功能： 可以用来增户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户体验。 JavaScript发展史： 1992年，Nombase公司，开发出第一门客户端脚本语言，专门用于表单校验。命名为 ：C--，后来更名为：ScriptEase 1995年，Net
深入理解JavaScript闭包
闭包通常被视为JavaScript中的一个伟大谜团，但也是一种引起混淆的概念，一旦掌握，就能深入理解JavaScript的精髓。" 闭包在计算机科学中，是一个在特定环境（或称为作用域）中被评估的函数，这个环境中包含了一个...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值