Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Hello Javascript

379 views

Published on

A JavaScript Tutorial for someone.

Published in: Technology, Education
  • Be the first to comment

  • Be the first to like this

Hello Javascript

  1. 1. Hello JavaScript
  2. 2. 题外话:编程字体 编辑代码通常使用等宽字体 常见的等宽字体 Courier New Consolas Monaco Lucida Console
  3. 3. 添加脚本 使用script标签内嵌 使用元素属性 使用script标签外链
  4. 4. <!doctype html> <html> <head> <script> 可以在这里写代码啦!!! </script> </head> <body> </body> </html>
  5. 5. <!doctype html> <html> <head> <script> alert('Hello'); </script> </head> <body> </body> </html>
  6. 6. alert('Hello');
  7. 7. alert('Hello');
  8. 8. alert('Hello'); 函数名字,alert是 ⼀一个内置函数
  9. 9. alert('Hello'); 函数名字,alert是 ⼀一个内置函数
  10. 10. alert('Hello'); 函数名字,alert是 ⼀一个内置函数
  11. 11. alert('Hello'); 括号表明要执行函数, 并告诉函数我传给你的 信息是啥 函数名字,alert是 ⼀一个内置函数
  12. 12. alert('Hello'); 括号表明要执行函数, 并告诉函数我传给你的 信息是啥 函数名字,alert是 ⼀一个内置函数
  13. 13. alert('Hello'); 括号表明要执行函数, 并告诉函数我传给你的 信息是啥 函数名字,alert是 ⼀一个内置函数 alert出现的文本, 需要用引号括起来
  14. 14. alert('Hello'); 括号表明要执行函数, 并告诉函数我传给你的 信息是啥 函数名字,alert是 ⼀一个内置函数 alert出现的文本, 需要用引号括起来
  15. 15. alert('Hello'); 括号表明要执行函数, 并告诉函数我传给你的 信息是啥 函数名字,alert是 ⼀一个内置函数 分号,表示语句结束 alert出现的文本, 需要用引号括起来
  16. 16. 写个简单的交互
  17. 17. <!doctype html> <html> <head> ... </head> <body> <img src="cat.png" onclick="alert('Meow~~~');" /> </body> </html>
  18. 18. <img src="cat.png" onclick="alert('Meow~~~');" />
  19. 19. <img src="cat.png" onclick="alert('Meow~~~');" />
  20. 20. <img src="cat.png" onclick="alert('Meow~~~');" /> img元素的onclick属性内容为⼀一段代码, 这里执行了alert函数。onclick属性表示 当点击这个图片的时候做什么。
  21. 21. 数据
  22. 22. JavaScript的数据存储 数据是有类型的 string boolean number Array Object...
  23. 23. 变量 variables 用来保存数据 有唯⼀一标识的名字
  24. 24. 创建⼀一个变量 var myPetName;
  25. 25. 创建⼀一个变量 var myPetName;
  26. 26. 创建⼀一个变量 var myPetName; var是js的关键字,用来创建⼀一个变量。
  27. 27. 创建⼀一个变量 var myPetName; var是js的关键字,用来创建⼀一个变量。
  28. 28. 创建⼀一个变量 var myPetName; var是js的关键字,用来创建⼀一个变量。 变量名称,⼀一般是名词性,要有意义。
  29. 29. 给变量赋值 var myPetName; myPetName = 'Alice';
  30. 30. 给变量赋值 var myPetName; myPetName = 'Alice';
  31. 31. 给变量赋值 var myPetName; myPetName = 'Alice'; 要赋值的变量名称
  32. 32. 给变量赋值 var myPetName; myPetName = 'Alice'; 要赋值的变量名称
  33. 33. 给变量赋值 var myPetName; myPetName = 'Alice'; 要赋值的变量名称 “=”表示赋值
  34. 34. 给变量赋值 var myPetName; myPetName = 'Alice'; 要赋值的变量名称 “=”表示赋值
  35. 35. 给变量赋值 var myPetName; myPetName = 'Alice'; 要赋值的变量名称 “=”表示赋值 赋值内容
  36. 36. 给变量赋值 var myPetName = 'Alice';
  37. 37. 给变量赋值 var myPetName = 'Alice';
  38. 38. 给变量赋值 var myPetName = 'Alice'; 创建变量。
  39. 39. 给变量赋值 var myPetName = 'Alice'; 创建变量。
  40. 40. 给变量赋值 var myPetName = 'Alice'; 创建变量。 变量名称
  41. 41. 给变量赋值 var myPetName = 'Alice'; 创建变量。 变量名称
  42. 42. 给变量赋值 var myPetName = 'Alice'; 创建变量。 变量名称 等号赋值
  43. 43. 给变量赋值 var myPetName = 'Alice'; 创建变量。 变量名称 等号赋值
  44. 44. 给变量赋值 var myPetName = 'Alice'; 创建变量。 变量名称 等号赋值 赋值内容
  45. 45. 给变量赋值 var myPetName = 'Alice'; 创建变量。 变量名称 等号赋值 赋值内容
  46. 46. 给变量赋值 var myPetName = 'Alice'; 创建变量。 变量名称 等号赋值 赋值内容 分号结束
  47. 47. 数值和字符串操作 var price = 10; var count = 5; var totalPrice = price * count; // should be 50
  48. 48. 数值和字符串操作 var price = 10; var count = 5; var totalPrice = price * count; // should be 50 var myPetName = 'Alice'; var somethingToSay = 'I love my pet ' + myPetName + '.'; // should be I love my pet Alice.
  49. 49. 注意 var value1 = 1 + 2; // will be number 3 var value2 = '1' + '2'; // will be string '12'
  50. 50. 数组 Array 可以放置⼀一系列的数据 通过索引访问
  51. 51. 数组 Array 可以放置⼀一系列的数据 通过索引访问
  52. 52. 数组 Array 可以放置⼀一系列的数据 通过索引访问 3 2 1 0
  53. 53. 数组 Array 可以放置⼀一系列的数据,通过索引访问 var myArray1 = []; // 创建⼀一个空数组,没有任何元素 var myArray2 = [1, 2, 3]; // 包含三个元素的数组 alert(myArray2[0]); // 会显示第⼀一个元素:1 var myArray3 = ['cat', 'dog', 'fish'];
  54. 54. 逻辑表达
  55. 55. 如果... if... if (weather == 'rainy') { alert('Bring your umbrella!'); }
  56. 56. 如果...否则... if...else... if (price > 1000) { alert("I won't buy it."); } else { alert("I will buy it."); }
  57. 57. 比较操作符 x == y // 表示相等 x != y // 表示不等 x < y // 表示小于 x > y // 表示大于 !x // 表示非 x >= y // 表示大于等于 x <= y // 表示小于等于
  58. 58. 逻辑操作符 与、或、非 And、Or、Not
  59. 59. 逻辑操作符 a && b // a并且b a || b // a或者b !a // 非a
  60. 60. 逻辑操作符 if (youLoveMe == true && iLoveYou == true) { alert("Let’s get married."); } else { alert("Bye bye!"); }
  61. 61. 逻辑操作符 if (youLoveMe == true && iLoveYou == true) { alert("Let’s get married."); } else { alert("Bye bye!"); } if (youLoveMe && iLoveYou) { alert("Let’s get married."); } else { alert("Bye bye!"); }
  62. 62. 逻辑操作符 if (weather == 'sunny' || weather == 'cloudy') { alert("Let's go outside!"); } else { alert("We should stay at home."); }
  63. 63. switch...case... var icon; if (weather == 'rainy') { icon = 'rainy.gif'; } else if (weather == 'sunny') { icon = 'sunny.gif'; } else if (weather == 'cloudy') { icon = 'cloudy.gif'; } else if (weather == 'fog') { icon = 'fog.gif'; } else if (weather == 'snow') { icon = 'snow.gif'; }
  64. 64. switch...case... var icon; switch (weather) { case 'rainy': icon = 'rainy.gif'; break; case 'snow': icon = 'snow.gif'; break; default: icon = 'sunny.gif'; break; }
  65. 65. 编码风格和注释 代码适当增加空格 每行不宜过长 有注释说明
  66. 66. // 单行注释 /* 多行注释,我在这里可以写很多东西 但是⼀一行也不能写太多,注意换行。*/ /* * 多行注释通常的写法,这样写看着 * 比较美观 */
  67. 67. 循环 循环主要用来处理重复有规律的任务 for循环 while循环
  68. 68. for循环 for (var i = 0; i < 10; i++) { console.log(i); } // 遍历数组 for (var i = 0; i < someArray.length; i++) { console.log(someArray[i]); }
  69. 69. while循环 var i = 0; while (i < 5) { console.log(i); i++; }
  70. 70. 函数
  71. 71. 函数是什么? 是⼀一段可重用的代码,用来完成某项工作任务。
  72. 72. function sum(a, b){ return a + b; }
  73. 73. function sum(a, b){ return a + b; }
  74. 74. function sum(a, b){ return a + b; } JS关键字,表 示定义函数
  75. 75. function sum(a, b){ return a + b; } JS关键字,表 示定义函数
  76. 76. function sum(a, b){ return a + b; } JS关键字,表 示定义函数 函数名字,通常 用动词描述。
  77. 77. function sum(a, b){ return a + b; } JS关键字,表 示定义函数 函数名字,通常 用动词描述。
  78. 78. function sum(a, b){ return a + b; } JS关键字,表 示定义函数 函数名字,通常 用动词描述。 括号包含可以传递 的信息,称为参数
  79. 79. function sum(a, b){ return a + b; } JS关键字,表 示定义函数 函数名字,通常 用动词描述。 括号包含可以传递 的信息,称为参数
  80. 80. function sum(a, b){ return a + b; } JS关键字,表 示定义函数 函数名字,通常 用动词描述。 括号包含可以传递 的信息,称为参数
  81. 81. function sum(a, b){ return a + b; } JS关键字,表 示定义函数 函数名字,通常 用动词描述。 括号包含可以传递 的信息,称为参数 大括号内为函数内部的代码
  82. 82. function sum(a, b){ return a + b; } JS关键字,表 示定义函数 函数名字,通常 用动词描述。 括号包含可以传递 的信息,称为参数 大括号内为函数内部的代码
  83. 83. function sum(a, b){ return a + b; } JS关键字,表 示定义函数 函数名字,通常 用动词描述。 括号包含可以传递 的信息,称为参数 大括号内为函数内部的代码 表示函数 返回内容
  84. 84. 函数 function sum(a, b) { return a + b; } alert(sum(1, 2)); // equals alert(3);
  85. 85. 对象 属性(数据) + 行为(函数)
  86. 86. 对象 属性(数据) + 行为(函数)
  87. 87. 对象,以车举例 属性 品牌 颜色 行为 驾驶
  88. 88. 对象,以车举例 属性(变量) 品牌(brand) 颜色(color) 行为(函数) 驾驶(drive)
  89. 89. 对象 var myCar = { // 品牌 brand: 'Volkswagon', // 颜色 color: 'yellow', // 驾驶 drive: function(){ console.log('drive'); } }
  90. 90. 对象 console.log(myCar.color); console.log(myCar.brand); myCar.drive();
  91. 91. 对象 var myCar = {}; myCar.color = 'red'; myCar.brand = 'Chevrolet'; console.log(myCar.color); // red delete myCar.color; console.log(myCar.color); // undefined 对象具有很高的灵活性,属性、方法都可以动态添加和删除。
  92. 92. 对象 前端经常使用对象表示某事物 弹出框 按钮
  93. 93. JSON JavaScript Object Notation ⼀一种结构化的数据描述形式,由JS语言中对象 的表达方式发展而来。
  94. 94. JSON概念是 我提出来的
  95. 95. JSON {'x': 116.4030113, 'y': 39.91453}
  96. 96. 浏览器
  97. 97. 浏览器 可以执行JavaScript代码,给脚本执行提供环境 此外还有 浏览器自身信息 历史纪录 cookies 定时器 提供访问页面元素的接口 其他功能
  98. 98. var yourName = prompt('What is your name?'); alert('Hello ' + yourName + '!');
  99. 99. 重要对象 window对象 浏览器环境中提供的全局对象 对象下包含所有浏览器和页面的数据和方法 访问window对象下内容时,window可以省略
  100. 100. 重要对象 window对象 浏览器环境中提供的全局对象 对象下包含所有浏览器和页面的数据和方法 访问window对象下内容时,window可以省略 console.log(window); console.log(window.innerWidth); console.log(window.document); console.log(innerWidth); console.log(document);
  101. 101. DOM
  102. 102. DOM Document Object Model 将文档进行模型化处理,以便用编程语言访问 和操控
  103. 103. 获取页面元素 document.getElementById(id) document.getElementsByTagName(name) document.querySelector(selector);
  104. 104. <input id="input-text" type="text" /> <input type="button" onclick="checkMyValue()" value="check" /> <script> function checkMyValue(){ var inputText = document.getElementById('input-text'); if (inputText.value == '') { alert('你啥也没写呀!'); } else { alert(inputText.value); } } </script>
  105. 105. 动态添加内容
  106. 106. <input type="button" onclick="addRow()" value="add" /> <ul id="list"></ul> <script> var counter = 1; function addRow(){ var ul = document.getElementById('list'); ul.innerHTML = ul.innerHTML + '<li>新的⼀一行' + counter + '</li>'; counter++; } </script>
  107. 107. Ajax Asynchronous JavaScript And XML
  108. 108. Ajax Asynchronous JavaScript And XML
  109. 109. Ajax Asynchronous JavaScript And XML Jesse James Garrett
  110. 110. Ajax Asynchronous JavaScript And XML Jesse James Garrett I coined the word Ajax!
  111. 111. The End

×