JavaScript基础教程之实战演练-职坐标

JavaScript基础教程之实战演练

沉沙 2019-03-08 来源：阅读 1018 评论 0

摘要：本篇文章探讨了JavaScript基础教程之实战演练，希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。

本篇文章探讨了JavaScript基础教程之实战演练，希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。

JavaScript基础教程之实战演练

<!DOCTYPE html>
<html>
  <head>
    <title></title>

    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="/test.js"></script>
  </head>

  <body>
  <script type="text/javascript">
  /*
   * 演示string对象。
   * 表现形式：
   * var str = new String("abc");
   * var str = "abc";
   */
  var str = "abcde";
  document.write("len=" + str.length + "<br>");
  document.write(str.bold() + "<br>");//加粗
  document.write(str.fontcolor("red") + "<br>");//字体颜色。
  document.write(str.link("//www.163.com") + "<br>");//将字符串变成超链接。
  document.write(str.substr(1, 3) + "<br>");//bcd
  document.write(str.substring(1, 3) + "<br>");//bc

  /*
   * 发现js中的string对象方法有限，想要对字符串操作的其他功能。
   * 比如：去除字符串两端的空格。这时只能自定义。
   */
  //去除字符串两端的空格。
  function trim(str){
  //定义两个变量，一个记录开始的位置。一个记录结束的位置。
  //对开始的位置的字符进行判断，如果是空格，就进行递增，直到不是空格为止。
  //对结束的位置的字符进行判断，如果是空格，就进行递减，直到不是空格为止。
  //必须要保证开始<=结束，这样才可以进行截取。
  var start, end;
   start = 0;
   end = str.length - 1;
   while (start <= end && str.charAt(start) == ‘ ‘) {
    start++;
   }
   while (start <= end && str.charAt(end) == " ") {
    end--;
   }
   return str.substring(start, end + 1);
  }
  var s = "     ab c      ";
  //alert("-"+trim(s)+"-");

  //alert("abc".bold());//<b>this</b>
  /*
   * 既然trim方法是用来操作字符串的方法，可不可以像字符串已有的方法一样，
   * 将该方法也定义到字符串对象中呢？直接用字符串对象调用就欧了。
   */

  /*
   * 这里就可以使用一个该字符串的原型属性来完成：
   * 原型：就是该对象的一个描述。该描述中如果添加了新功能。
   * 那么该对象都会具备这些新功能。
   * 而prototype就可以获取到这个原型对象。
   * 通过prototype就可以对对象的功能进行扩展。
   *
   *
   * 需求：想要给string对象添加一个可以去除字符串两端空格的新功能.
   * 就可以使用原型属性来完成。
   */
  //1
  //给string的原型中添加一个功能。注意：给对象添加新功能直接使用  对象.新内容   即可。
  //String.prototype.len = 199;//给string的原型对象中添加一个属性名为len。值为199.
  //添加行为。
  //2
  /*
   * 字符串对象新功能，去除字符串两端的空格。
   */
  String.prototype.trim = function() {
   var start, end;
   start = 0;
   end = this.length - 1;
   while (start <= end && this.charAt(start) == ‘ ‘) {
    start++;
   }
   while (start <= end && this.charAt(end) == " ") {
    end--;
   }
   return this.substring(start, end + 1);
  }
  document.write("abc".len);
  alert("-"+"     ab cd     ".trim()+"-");
  </script>
  </body>
</html>
练习：
/**
* 字符串新功能，添加一个将字符串转成字符数组。
* 返回一个数组
*/
String.prototype.toCharArray = function() {
// 定义一个数组。
var chs = [];
// 将字符串中的每一位字符存储到字符数组中。
for (var x = 0; x < this.length; x++) {
  chs[x] = this.charAt(x);
}
return chs;
};
/**
* 添加一个，将字符串进行反转的方法。
*/
String.prototype.reverse = function() {
var arr = this.toCharArray();
// 将数组位置置换功能进行封装。并定义到了反转功能内部。
function swap(arr, a, b) {
  var temp = arr[a];
  arr[a] = arr[b];
  arr[b] = temp;
}
for (var x = 0, y = arr.length - 1; x < y; x++, y--) {
  swap(arr, x, y);
}
return arr.join("");
};
<!DOCTYPE html>
<html>
  <head>
    <title>Javascript练习3</title>

    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="/test.js"></script>
  </head>

  <body>
  <script type="text/javascript">
  /*
   * 练习1，给字符串添加一个功能，将字符串变成一个字符数组。
   *
   * 练习2，给字符串添加一个功能，将字符串进行反转。
   */
  var str  = "abcdefg";
  document.write(str.toCharArray()+"<br>");
  document.write(str.reverse()+"<br>");
  </script>
  </body>
</html>