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

    控制台输入:

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

    控制台输入:

    truefalse
  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 = actionobjhost.stop = action1objhost.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=ttrkey=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()

    控制台输入:

    181937
    在对象中,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()

    控制台输入:

    app01app02
  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...