乐趣区

关于java:上篇34个JavaScript栗子从易到难

jiezi

  1. 首次编写 js 代码，通过 alert 弹框提醒 hello world。

    <!DOCTYPE html>
<html>
  <head>
      <meta charset="UTF-8" />
      <script type="text/javascript">
         alert("hello world")
      </script>
  </head>
  <body>
  </body>
</html>

  2. 往页面中输入内容

    <!DOCTYPE html>
<html>
  <head>
      <meta charset="UTF-8" />
      <script type="text/javascript">
         document.write("hello world")
      </script>
  </head>
  <body>
  </body>
</html>

  3. 向控制台输入内容

    <!DOCTYPE html>
<html>
  <head>
      <meta charset="UTF-8" />
      <script type="text/javascript">
         console.log("如同有谬误哦!")
      </script>
  </head>
  <body>
  </body>
</html>

    查看的时候在浏览器按 F12 关上开发者工具，而后在控制台中可看到该输入的内容。

  4. 3 条语句一起玩试试

    <!DOCTYPE html>
<html>
  <head>
      <meta charset="UTF-8" />
      <script type="text/javascript">
         alert("告诉：请好好学习")
         document.write("hellow world!")
         console.log("如同有谬误哦!")
      </script>
  </head>
  <body>
  </body>
</html>

    阐明：代码的指向程序是从上往下的。

  5. 点击按钮时执行 js 代码

    <!DOCTYPE html>
<html>
  <head>
      <meta charset="UTF-8" />
      <script type="text/javascript"></script>
  </head>
  <body>
     <button onclick="alert(' 你好 ')"> 点击 </button>
  </body>
</html>

  6. 点击超链接时执行 js 代码

    <!DOCTYPE html>
<html>
  <head>
      <meta charset="UTF-8" />
      <script type="text/javascript"></script>
  </head>
  <body>
     <a href="javascript:alert(' 你好!!!')"> 点击 </a>
  </body>
</html>

留神下面两个案例，尽管能够将 js 代码写到标签属性中，如 a 属性、button 属性，但不举荐这么做，造成构造和行为耦合性太强，不不便保护，不举荐应用。

  1. 引入内部 js 文件

  2. my.js 代码：

    alert("这是内部 my.js 的弹框内容")

  3. index.html 代码：

    <!DOCTYPE html>
<html>
  <head>
      <meta charset="UTF-8" />
      <!--src 中引入内部 js 文件 -->
      <script type="text/javascript" src="../js/my.js"></script>
  </head>
  <body>
  </body>
</html>

    应用内部语言的好有：能够复用、能够利用到浏览器的缓存机制，因而这是举荐的形式。

留神：以下的小栗子都是在内部 js 文件中进行编码。

  1. js 的根本语法

  2. 正文形式

    // 这是单行正文
/*
多行正文
多行正文
*/

  3. 严格辨别大小写

    // 这是谬误的
Alert("这是内部 my.js 的弹框内容")

// 这是正确的
alert("这是内部 my.js 的弹框内容")

    产生谬误，在控制台中能够看到：Uncaught ReferenceError: Alert is not defined at my.js:1:1

  • 分号结尾

    alert("这是内部 my.js 的弹框内容");

    如果不加分号，浏览器会主动增加分号，但会耗费资源，而且浏览器增加的分号有时候可能是错的，导致出错，造成排障艰难，所以倡议要加分号。

  • 疏忽多个空格和换行

    alert("这是内部 my.js 的弹框内容");

  1. 申明变量

    var a = 200; // 同时申明变量和赋值
console.log(a); // 输入到控制台

  2. 应用 typeof 查看数据类型

    var a = 500;;
console.log(typeof a);

var b = "ttr";
console.log(typeof b);

var c = true;
console.log(c);

    控制台输入：

    number
string
true
  3. 类型转换

  4. 数值转字符串，形式 1 

    var a = 100;
// 转换前它是整型
console.log(a, typeof a);
// 转换后是字符串类型
var b = a.toString();
console.log(b, typeof b);

    控制台输入：

  5. ‘number’

  6. string

  7. 数值转字符串，形式 2 

    var a = 100;
// 转换前它是整型
console.log(a, typeof a);
// 转换后是字符串类型
var b = String(a);
console.log(b, typeof b);

  8. 字符串转数值

    var a = "100";
console.log(a, typeof a);
var b = Number(a);
console.log(b, typeof b);

    控制台输入：

  9. string

  10. ‘number’

  11. 条件运算符

    var a = 10;
var b = 20;
a > b ? console.log("ok") : console.log("no");

  12. switch 语句

    var a = 5;

switch (a){
 case 1:
     console.log("is 1");
     break;
 case 2:
     console.log("is 2");
     break;
 case 3:
     console.log("is 3");
     break;
 default:
     console.log("非法的数字");
     break;
}

  13. while 循环，小栗子 1 

    var a = 5;
var b = 0;

while(a > b){
 var str = "hello\n";
 document.write(b);
 b++;
}

  14. while 循环，小栗子 2 

    while(true){var a = Math.ceil(Math.random()*10);
 if (a == 7) {document.write("祝贺！有 7 了,val=" + a);
     break;
 } else {document.write("没有 7, 咱们持续...\n");
     continue;
 }

}
  15. for 循环

  16. 根本应用

    for (var i=0; i<10; i++) {document.write(i);
}

  17. 遍历数组

    var a = [1, 2, 3, ,4 ,5, 6];
for (i in a) {document.write(i);
}

  18. 应用构造函数 new 创立一个对象，并给这个对象增加 2 个属性，案例 1 

    // 应用构造函数 new 创建对象
var obj = new Object();
// 给对象增加属性和值
obj.name = "ttr";
obj.age = 18;
// 获取属性
console.log(obj);
console.log(obj.name);

// 删除对象属性
delete obj.name;
console.log(obj);

// 也能够这样获取属性
console.log(obj["name"]);
console.log(obj["age"]);

  19. 创立一个对象，案例 2 

    var obj = new Object();
obj.addr = "10.1.2.3";
var attr = "addr";
console.log(obj[attr]);

    控制台输入：

    10.1.2.3

    应用 [] 的形式获取属性还能够传传变量哦，更加灵便，依据不同的变量取不同的属性。

  20. 对象中还能够是对象

    var host = new Object();
var app = new Object();
app.name = "nginx";
host.hostname = "linux01";
host.addr = "10.1.2.3";
host.runapp = app; // 留神这里
console.log(host);
console.log(host.runapp);

  21. 查看一个对象中是否有某个属性

    var hostObj = new Object();
hostObj.hostname = "linux01";
hostObj.addr = "10.1.2.3";
console.log("addr" in hostObj); // 查看 hostObj 对象是否存在 addr 这个属性
console.log("ip" in hostObj);

    控制台输入：

    true
false

  22. 还能够应用对象字面量来创建对象，更加不便，案例 1 

    // 应用对象字面量来创立一个对象
var obj = {
 name: "ttr", 
 age: 18
};
console.log(obj)

    控制台输入：

    {name: 'ttr', age: 18}

    更举荐应用对象字面量的形式创建对象，更加不便哦。

  23. 对象字面量创建对象，案例 2 

    // 应用对象字面量来创立一个对象
var obj = {
 hostname: "linux001", 
 runapp: "nginx",
 ip: {manager: "10.1.1.2", bus: "192.168.16.90"}

};
console.log(obj)

  24. 函数的根底应用

    function f1(a, b) {
 var ret = a + b;
 return ret;
}

console.log(f1(19, 20))
  25. 立刻执行函数

  26. 小栗子 1 

    (function() {console.log("hello")
})()

  27. 小栗子 2 

    (function(a, b) {console.log(a + b)
})(1, 2) // 留神这里是传参，将 1 和 2 传给了该函数

    所谓的立刻执行函数，就是函数定义完，即可立刻执行，而不必显示取调用，而且它也没有名字，也能够说是匿名函数，让匿名函数立刻执行。

  28. 匿名函数

    var f = function(a, b){return a + b}
console.log(f(10, 20))

    下面的小栗子中，将匿名函数赋给了变量 f，通过 f()就可调用。

  29. 给对象增加办法

    var objhost = {
 hostname: "ttr",
 ip: "10.12.5.1",
 start: function() {console.log("PowerON")
 },
 stop: function() {console.log("Shutdown")
 }
}
objhost.start()
objhost.stop()

    之前讲了匿名函数，那么给对象增加办法就派上用场了，下面小栗子中，给对象 objhost 增加了 2 个办法 start 和 stop

  30. 还能够这么玩，给对象动静的增加办法

    var objhost = {
 hostname: "ttr",
 ip: "10.12.5.1",
}

action = function() {console.log("PowerON")
}

action1 = function() {console.log("Shutdown")
}

objhost.start = action
objhost.stop = action1

objhost.start()
objhost.stop()

  31. 对象的遍历

    var objhost = {
 hostname: "ttr",
 ip: "10.12.5.1",
}

for (var i in objhost) {console.log("key="+ i, "value=" + objhost[i])
}

    控制台输入：

    key=hostname value=ttr
key=ip value=10.12.5.1

  32. 什么是 this，先看代码

    var obj = {
 a: 18,
 b: 19,
 add: function() {console.log(this.a + this.b)
 }
}
console.log(obj.a)
console.log(obj.b)
obj.add()

    控制台输入：

    18
19
37

    在对象中，this 示意它本人，等价于 Python 中类中的 self。

  33. 哪个对象调用，this 就是谁

    function run() {console.log(this.names)
}

var webobj01 = {
 names: "app01",
 runapp: run
}

var webobj02 = {
 names: "app02",
 runapp: run
}

webobj01.runapp()
webobj02.runapp()

    控制台输入：

    app01
app02

  34. 应用工厂办法创建对象

    function createHost(hostname, ip) {var obj = new Object();
 obj.hostname = hostname;
 obj.ip = ip;
 return obj;
}

var a1 = createHost("web01", "192.168.90.78");
var a2 = createHost("linux91", "10.1.2.3");
console.log(a1);
console.log(a2);

    留神：应用工厂办法创建对象，它构造函数都是 Object，这里有个不好的中央就是无奈辨别多种不同类型的对象

  35. 通过 new，将本来是一般的函数变成构造函数，而后创立不同类型的对象

    function Host(hname, addr) {
 this.hostname = hname
 this.ip = addr
}
var h = new Host("linux01", "1.1.1.1") 
console.log(h)

function Storage(diskNum, size) {
 this.diskNum = diskNum
 this.size = size
}
var s = new Storage(6, 500)
console.log(s)

    下面的栗子中，Host 和 Storage 能够说是一个类了，var h = new Host(“linux01”, “1.1.1.1”) 和 var s = new Storage(6, 500) 是在实例化对象，别离实例化出了对象 h 和 s。this 是对象自身，实例化对象后，就能够通过对象变量. 属性名（或办法）

  36. 剥离雷同的办法，在全局作用域定义，不同的对象调用的是同一个办法，晋升性能

    poweron = function() {console.log(this.ip + "开机...");
}

function Host(hname, addr) {
 this.hostname = hname;
 this.ip = addr;
 this.PowerOn = poweron;
}

function Storage(diskNum, size, ip) {
 this.diskNum = diskNum;
 this.size = size;
 this.ip = ip;
 this.PowerOn = poweron;
}

var h = new Host("linux01", "1.1.1.1");
var s = new Storage(6, 500, "192.168.11.90");

h.PowerOn()
s.PowerOn()

    留神，在全局作用域定义的函数有个弊病，如果同个我的项目，其余程序员也刚好在全局作用域定义了雷同名字的函数，那么就会把你的笼罩掉，能够应用原型来解决这个问题，该内容放到下篇持续解说。

本文转载于：https://mp.weixin.qq.com/s/8q…

退出移动版