首页 > 编程语言 >JavaScript速成笔记

JavaScript速成笔记

时间:2023-01-29 23:12:28浏览次数:43  
标签:Simon console log JavaScript 笔记 速成 let var

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

相关文章

  • JavaScript中的3个关系, 2个函数
    三个属性构造函数的prototype原型对象的constructor实例的__proto__首先每个构造函数都具有一个原型对象,每个原型对象同时有一个constructor指向构造函数//一个......
  • NLP入门1——李宏毅网课笔记
    近日因为项目需要,开始恶补预习NLP的相关知识。以前也看过两本相关书籍,但是都十分浅显。这次准备详细的学一下并记录。李宏毅老师的网课是DeepLearningforHumanLangua......
  • JavaScript学习笔记—DOM之元素节点
    元素节点对象(element)在网页中,每一个标签都是一个元素节点如何获取元素节点对象?通过document对象来获取元素节点通过document对象来创建元素节点通过document来获......
  • [概率论与数理统计]笔记:5.1 点估计概述
    第五章参数估计与假设检验5.1点估计概述相关概念:参数空间:参数的取值范围。点估计:对未知的参数进行估计所得到的一个具体的数据,结果是一个数(数轴上的一个点)。......
  • Learning to Prompt for Continual Learning论文阅读笔记
    摘要本文的主要贡献是提出了一种连续学习的方法L2P,可以自动学习提示(Prompt)一个预训练的模型,从而能够在学习一系列的任务的同时减轻灾难性遗忘,并且这个过程无需使用记忆回......
  • 雅思写作笔记——Simon
    雅思写作Task1SimonLesson1:课程目标方法和技巧将任务进行不同样例的解读问题的类型1、如何写好task1:task1的要求是形容你看到的图表,写一封报告,而不要给观点。......
  • 【笔记】利用七牛云CDN加速提高前端图片静态资源访问速率
    第一步,注册七牛云账号打开七牛开发者平台,选择注册,注册后登录系统然后实名认证。第二步,创建七牛云空间七牛对象存储将数据文件以资源的形式上传到空间中。您可以创建......
  • 学习笔记——redis事务、乐观锁、悲观锁
    2023-01-29一、redis事务与乐观锁相关命令1、redis事务(1)redis事务的含义redis事务是一个单独的隔离操作:事务中的所有命令都会序列化、按顺序执行。事务在执行过程中,不......
  • JavaScript中实现sleep睡眠函数的几种简单方法(转)
    转自:JavaScript中实现sleep睡眠函数的几种简单方法一.什么是sleep函数?sleep是一种函数,他的作用是使程序暂停指定的时间,起到延时的效果。javascript好像诶呦提供sleep工......
  • 1.29数论课笔记
    o.O一、\(O(\sqrt{n})\)判断质数枚举\(\left[2,\sqrt{n}\right]\)中的数,判断是否能整除\(n\),如果都没有则返回\(true\)。为什么不用枚举\(\sqrt{n}\)以上的数:......