1. IT分享知识网首页
  2. 开发语言
  3. java

上篇：34个JavaScript栗子，从易到难

老牧童 • • java, JavaScript • 阅读 63

上篇：34个JavaScript栗子，从易到难发生错误，在控制台中可以看到:Uncaught ReferenceError: Alert is not defined at my.js:1:1。

大家好，欢迎来到IT知识分享网。

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

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

往页面中输出内容

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

向控制台输出内容

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

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

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>

说明：代码的指向顺序是从上往下的。

点击按钮时执行js代码

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

点击超链接时执行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属性，但不推荐这么做，造成结构和行为耦合性太强，不方便维护，不推荐使用。

引入外部js文件

  • my.js代码：
alert("这是外部my.js的弹框内容")
  • 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文件中进行编码。

js的基本语法

  • 注释方式
// 这是单行注释 /* 多行注释 多行注释 */
  • 严格区分大小写
//这是错误的 Alert("这是外部my.js的弹框内容") //这是正确的 alert("这是外部my.js的弹框内容")

发生错误，在控制台中可以看到：Uncaught ReferenceError: Alert is not defined at my.js:1:1

  • 分号结尾
alert("这是外部my.js的弹框内容");

如果不加分号，浏览器会自动添加分号，但会消耗资源，而且浏览器添加的分号有时候可能是错的，导致出错，造成排障困难，所以建议要加分号。

  • 忽略多个空格和换行
alert( "这是外部my.js的弹框内容" );

声明变量

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

使用typeof检查数据类型

var a = 500;; console.log(typeof a); var b = "ttr"; console.log(typeof b); var c = true; console.log(c);

控制台输出：

number string true

类型转换

  • 数值转字符串，方式1
var a = 100; //转换前它是整型 console.log(a, typeof a); //转换后是字符串类型 var b = a.toString(); console.log(b, typeof b);

控制台输出：

100 'number' 100 string
  • 数值转字符串，方式2
var a = 100; //转换前它是整型 console.log(a, typeof a); //转换后是字符串类型 var b = String(a); console.log(b, typeof b);

字符串转数值

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

控制台输出：

100 string 100 'number'

条件运算符

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

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; }

while循环，小栗子1

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

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; } }

for循环

  • 基本使用
for (var i=0; i<10; i++ ) { document.write(i); }
  • 遍历数组
var a = [1, 2, 3, ,4 ,5, 6]; for (i in a) { document.write(i); }

使用构造函数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"]);

创建一个对象，案例2

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

控制台输出：

10.1.2.3

使用[]的方式获取属性还可以传传变量哦，更加灵活，根据不同的变量取不同的属性。

对象中还可以是对象

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);

检查一个对象中是否有某个属性

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

还可以使用对象字面量来创建对象，更加方便，案例1

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

控制台输出：

{name: 'ttr', age: 18}

更推荐使用对象字面量的方式创建对象，更加方便哦。

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

//使用对象字面量来创建一个对象 var obj = { hostname: "linux001", runapp: "nginx", ip: {manager: "10.1.1.2", bus: "192.168.16.90"} }; console.log(obj)

函数的基础使用

function f1(a, b) { var ret = a + b; return ret; } console.log(f1(19, 20))

立即执行函数

  • 小栗子1
(function() { console.log("hello") })()
  • 小栗子2
(function(a, b) { console.log(a + b) })(1, 2) // 注意这里是传参，将1和2传给了该函数

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

匿名函数

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

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

给对象添加方法

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

还可以这么玩，给对象动态的添加方法

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()

对象的遍历

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

什么是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。

哪个对象调用，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

使用工厂方法创建对象

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，这里有个不好的地方就是无法区分多种不同类型的对象

通过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是对象本身，实例化对象后，就可以通过对象变量.属性名（或方法）

剥离相同的方法，在全局作用域定义，不同的对象调用的是同一个方法，提升性能

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..com/s/8qP_xFMyDnzbqYHMcf75aQ

免责声明：本站所有文章内容,图片，视频等均是来源于用户投稿和互联网及文摘转载整编而成，不代表本站观点，不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益，请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权，请联系删除，如若转载，请注明出处：https://yundeesoft.com/89731.html

赞 (0)
老牧童老牧童
0
上一篇 2024-10-18 17:33
下一篇 2024-10-18 20:15

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信