JavaScript
不推荐内联
第一段JavaScript:
<!DOCTYPE html> <html> <body> <h2>我的第一段 JavaScript</h2> <button type="button" onclick="document.getElementById('demo').innerHTML = Date()"> 点击这里来显示日期和时间 </button> <p id="demo"></p> </body> </html>
内部的 JavaScript :
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./css/style.css"> <title>JavaScript Crash Course</title> </head> <body> <div class="header"> <h1>JavaScript Crash Course</h1> </div> <div class="container"> </div> </body> <script> alert(Math.PI); </script> </html>
alert:浏览器广播
alert("Hello" + "World");
外部的JavaScript
新建js文件,在body后面:
<script src="main.js"></script>
console.log在控制台输出
console.log("hello".length); console.log("hello".charAt(0)); //第0个 console.log("hello, world".replace("hello","goodbye")); //替换 console.log("hello, world".toUpperCase()); //大写
新建变量var 、 let ,输出:
(var在哪都是全局变量,let是局部变量)
var name = "DasAuto"; console.log(name); let a = 1; console.log(a);a = 1+1; console.log(a);
定义常量:const (值不变)
const Pi = 3.14; console.log(Pi);
x = "3"+4+5 == x = "3"+"4"+"5"
var x; x = "3"+4+5; console.log(x);
输出345;(有字符串之后都以字符串形式处理)。
var x; x = 4+5+"3"; console.log(x);
输出93;
var name = "Simon"; var age =12 var allowed = (age>=18)? "yes":"no"; console.log(allowed); switch(name){ case 'Simon': console.log("Simon"); break; case 'John': console.log("John"); break; default: console.log("Stranger"); }
数组
var obj = new Object(); var obj2 = {}; obj = { name: "Simon", age: '20', email:"[email protected]", contact:{ phone:"123456", Telegram:"@Simon" } }; console.log(obj.contact)
var a = new Array(); var b = []; a[0] = "dog"; a[1] = "cat"; a[5] = "tiger"; console.log(a) b = ["dog","cat","tiger"]; console.log(b); for(let i=0;i<b.length;i++){ console.log(b[i]); } for (let i in a){ console.log(a[i]); } //for in 遍历非空数组
添加数组
b = ["dog","cat","tiger"]; b.push("sheep"); //从末尾添加 b.reverse(); //翻转 b.shift(0); //删除第一个 b.unshift("lion"); //从开头添加 console.log(b);
数组各种属性用法推荐去看:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array函数:
let a = 1; function add(x){ a += x; } add(4); console.log(a);
function add(){ let sum = 0; for( let i = 0, j = arguments.length;i<j;i++){ sum+=arguments[i]; } return sum; } let sum = add(1,2,3,4,5); console.log(sum);
结果15
闭包:
多继承
function makeAdder(a){ return function(b){ return a+b; }; } var x = makeAdder(5); var sum = x(6); console.log(sum);
得到11。
总代码:
html:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="./css/style.css"> <title>JavaScript Crash Course</title> </head> <body> <div class="header"> <h1>JavaScript Crash Course</h1> </div> <div class="container"> </div> </body> <script src="main.js"></script> </html>
css:
body { text-align: center; font-family: Arial, Helvetica, sans-serif; font-size: 18px; } .header{ color: pink; background-color: #f4f4f4; border: #ccc 3px solid; padding: 20px; } .container{ width: 700px; margin: 30px auto; }
js:
function makeAdder(a){ return function(b){ return a+b; }; } var x = makeAdder(5); var sum = x(6); console.log(sum);
右键检查:查看控制台的输出
23.1.29
标签:Simon,console,log,JavaScript,笔记,速成,let,var From: https://www.cnblogs.com/Burn-Hep/p/17073061.html