龙空技术网

上篇:34个JavaScript栗子,从易到难

不背锅运维 3349

前言:

眼前看官们对“css难”都比较关怀,你们都想要剖析一些“css难”的相关知识。那么小编同时在网络上网罗了一些有关“css难””的相关文章,希望兄弟们能喜欢,我们一起来学习一下吧!

首次编写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);

控制台输出:

numberstringtrue

类型转换

数值转字符串,方式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 string100 '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);

控制台输出:

truefalse

还可以使用对象字面量来创建对象,更加方便,案例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 = actionobjhost.stop = action1objhost.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=ttrkey=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()

控制台输出:

181937

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

控制台输出:

app01app02

使用工厂方法创建对象

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

注意,在全局作用域定义的函数有个弊端,如果同个项目,其他程序员也刚好在全局作用域定义了相同名字的函数,那么就会把你的覆盖掉,可以使用原型来解决这个问题,该内容放到下篇继续讲解。

本文转载于:

标签: #css难