• 博客园logo
  • 会员
  • 众包
  • 新闻
  • 博问
  • 闪存
  • 赞助商
  • HarmonyOS
  • Chat2DB
    • 搜索
      所有博客
    • 搜索
      当前博客
  • 写随笔 我的博客 短消息 简洁模式
    用户头像
    我的博客 我的园子 账号设置 会员中心 简洁模式 ... 退出登录
    注册 登录

Burn-Hep

  • 博客园
  • 联系
  • 订阅
  • 管理

公告

View Post

JavaScript速成笔记

JavaScript初学

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  阅读(96)  评论(0)    收藏  举报

刷新页面返回顶部
 
博客园  ©  2004-2025
浙公网安备 33010602011771号 浙ICP备2021040463号-3