JavaScript速成笔记

公告

View Post

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:"Simon@gmail.com",
    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

posted on 2023-01-29 23:02 burn_hep 阅读(79) 评论(0) 编辑收藏举报

刷新页面返回顶部

Burn-Hep

公告

View Post

JavaScript速成笔记