JavaScript自学基础记录

作者: 不二客 | 来源:发表于2021-07-23 16:06 被阅读0次

JavaScript自学基础记录
学习记录_javaScript_基础语法
javascript基础记录
html自学基础记录
css自学基础记录
JavaScript的组成部分
PHP学习总结
JavaScript自学笔记--基础部分2
JavaScript自学笔记--基础部分1
UI设计零基础如何自学，关于培训班该如何选择？

JavaScript 是脚本语言

JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。

JavaScript 用法

HTML 中的脚本必须位于 <script> 与 </script> 标签之间。
脚本可被放置在 HTML 页面的 <body> 和 <head> 部分中。

<script> 标签

如需在 HTML 页面中插入 JavaScript，请使用 <script> 标签。

<script>
alert("我的第一个 JavaScript");
</script>

内部的 JavaScript

<!DOCTYPE html>
<html>
<head>
<script>
function myFunction()
{
    document.getElementById("demo").innerHTML="我的第一个 JavaScript 函数";
}
</script>
</head>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">尝试一下</button>
</body>
</html>

外部的 JavaScript

也可以把脚本保存到外部文件中。外部文件通常包含被多个网页使用的代码。
外部 JavaScript 文件的文件扩展名是 .js。
如需使用外部文件，请在 <script> 标签的 "src" 属性中设置该 .js 文件：

<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>

JavaScript 输出

使用 window.alert() 弹出警告框。

<script>
window.alert(5 + 6);
</script>

使用 document.write() 方法将内容写到 HTML 文档中。

<script>
document.write(Date());
</script>

<script>
function myFunction() {
    document.write(Date());
}
<button onclick="myFunction()">点我</button>
</script>

使用 innerHTML 写入到 HTML 元素。

<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>

使用 console.log() 写入到浏览器的控制台

<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

JavaScript 操作符

image.png

JavaScript 关键字

image.png

JavaScript 语句

分号 ;

分号用于分隔 JavaScript 语句。
通常我们在每条可执行的语句结尾添加分号。
使用分号的另一用处是在一行中编写多条语句。

JavaScript 代码块

JavaScript 可以分批地组合起来。
代码块以左花括号开始，以右花括号结束。

function myFunction()
{
    document.getElementById("demo").innerHTML="你好Dolly";
    document.getElementById("myDIV").innerHTML="你最近怎么样?";
}

JavaScript 语句标识符

image.png

JavaScript 变量

变量是用于存储信息的"容器"。

变量必须以字母开头
变量也能以 $ 和 _ 符号开头（不过我们不推荐这么做）
变量名称对大小写敏感（y 和 Y 是不同的变量）

声明（创建） JavaScript 变量

创建变量通常称为"声明"变量，
使用 var 关键词来声明变量：
未使用值来声明的变量，其值实际上是 undefined。

let变量

let允许你声明一个作用域被限制在块级中的变量、语句或者表达式。在Function中局部变量推荐使用let变量，避免变量名冲突。

const 关键字

const 关键字用来声明 JavaScript中的常量（与变量相对，不可修改，但同样是用于存储信息的"容器"。），常量的值不能通过重新赋值来改变，并且不能重新声明。

//定义常量a并赋值为0
const a = 0;

JavaScript 数据类型

值类型(基本类型)：字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。
引用数据类型：对象(Object)、数组(Array)、函数(Function)。

JavaScript 拥有动态类型

JavaScript 拥有动态类型。这意味着相同的变量可用作不同的类型：

var x;               // x 为 undefined
var x = 5;           // 现在 x 为数字
var x = "John";      // 现在 x 为字符串

JavaScript 数组

var cars=["Saab","Volvo","BMW"];

JavaScript 对象

对象由花括号分隔。在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义。属性由逗号分隔：

var person={firstname:"John", lastname:"Doe", id:5566};

Undefined 和 Null

Undefined 这个值表示变量不含有值。
可以通过将变量的值设置为 null 来清空变量。

声明变量类型

当您声明新变量时，可以使用关键词 "new" 来声明其类型：

var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;

isArray和 instanceof 操作符

如果你要判断该对象是否为数组，可以使用以下两种方法:

使用 isArray 方法

 if(Array.isArray(cars)) {
        document.write("该对象是一个数组。") ;
    }

使用 instanceof 操作符

if (cars instanceof Array) {
    document.write("该对象是一个数组。") ;
}

JavaScript 对象

JavaScript 对象是拥有属性和方法的数据。
对象也是一个变量，但对象可以包含多个值（多个变量），每个值以 name:value 对呈现。

var car = {name:"Fiat", model:500, color:"white"};

对象定义

var person = {firstName:"John", lastName:"Doe", age:50, eyeColor:"blue"};

对象属性

可以说 "JavaScript 对象是变量的容器"。
但是，我们通常认为 "JavaScript 对象是键值对的容器"。
键值对通常写法为 name : value (键与值以冒号分割)。
键值对在 JavaScript 对象通常称为对象属性

访问对象属性

person.lastName;   //第一种方式
person["lastName"];  //第二种方式

对象方法

对象的方法定义了一个函数，并作为对象的属性存储。
对象方法通过添加 () 调用 (作为一个函数)。

<script>
var person = {
    firstName: "John",
    lastName : "Doe",
    fullName : function() 
    {
       return this.firstName + " " + this.lastName;
    }
};
document.getElementById("demo").innerHTML = **person.fullName()**;
</script>

JavaScript 函数

函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。

JavaScript 函数语法

函数就是包裹在花括号中的代码块，前面使用了关键词 function：

function functionname()
{
    // 执行代码
}

调用带参数的函数

在调用函数时，您可以向其传递值，这些值被称为参数。
您可以发送任意多的参数，由逗号 (,) 分隔：

function myFunction(var1,var2)
{
代码
}

带有返回值的函数

在使用 return 语句时，函数会停止执行，并返回指定的值。

function myFunction()
{
    var x=5;
    return x;
}

var myVar=myFunction();

JavaScript 作用域

在 JavaScript 中, 对象和函数同样也是变量。
在 JavaScript 中, 作用域为可访问变量，对象，函数的集合。
JavaScript 函数作用域: 作用域在函数内修改。

JavaScript 局部作用域

变量在函数内声明，变量为局部作用域。
局部变量：只能在函数内部访问

// 此处不能调用 carName 变量
function myFunction() {
    var carName = "Volvo";
    // 函数内可调用 carName 变量
}

因为局部变量只作用于函数内，所以不同的函数可以使用相同名称的变量。
局部变量在函数开始执行时创建，函数执行完后局部变量会自动销毁。

JavaScript 全局变量

变量在函数外定义，即为全局变量。
全局变量有全局作用域: 网页中所有脚本和函数均可使用。

var carName = " Volvo";
// 此处可调用 carName 变量
function myFunction() {
    // 函数内可调用 carName 变量
}

如果变量在函数内没有声明（没有使用 var 关键字），该变量为全局变量。
以下实例中 carName 在函数内，但是为全局变量。

// 此处可调用 carName 变量
 
function myFunction() {
    carName = "Volvo";
    // 此处可调用 carName 变量
}

JavaScript 变量生命周期

JavaScript 变量生命周期在它声明时初始化。
局部变量在函数执行完毕后销毁。
全局变量在页面关闭后销毁。

JavaScript 事件

HTML 事件是发生在 HTML 元素上的事情。
当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。

HTML 事件

HTML 页面完成加载
HTML input 字段改变时
HTML 按钮被点击

常见的HTML事件

image.png

JavaScript 字符串

字符串可以存储一系列字符，如 "John Doe"。
字符串可以是插入到引号中的任何字符。你可以使用单引号或双引号：

var carname = "Volvo XC60";
var carname = 'Volvo XC60';

特殊字符

image.png

字符串方法

image.png

JavaScript 运算符

JavaScript 算术运算符

image.png

JavaScript 赋值运算符

image.png

JavaScript 比较和逻辑运算符

比较运算符

image.png

逻辑运算符

image.png

条件运算符

variablename=(condition)?value1:value2

JavaScript if...Else 语句

条件语句

if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码
if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码
if...else if....else 语句- 使用该语句来选择多个代码块之一来执行
switch 语句 - 使用该语句来选择多个代码块之一来执行

JavaScript switch 语句

switch 语句用于基于不同的条件来执行不同的动作。

switch(n)
{
    case 1:
        执行代码块 1
        break;
    case 2:
        执行代码块 2
        break;
    default:
        与 case 1 和 case 2 不同时执行的代码
}

default 关键词

请使用 default 关键词来规定匹配不存在时做的事情：

JavaScript for 循环

循环可以将代码块执行指定的次数。

for (var i=0;i<cars.length;i++)
{ 
    document.write(cars[i] + "<br>");
}

不同类型的循环

for - 循环代码块一定的次数

for (var i=0,len=cars.length; i<len; i++)
{ 
    document.write(cars[i] + "<br>");
}
//省略写法
var i=2,len=cars.length;
for (; i<len; i++)
{ 
    document.write(cars[i] + "<br>");
}

for/in - 循环遍历对象的属性

var person={fname:"Bill",lname:"Gates",age:56}; 
 
for (x in person)  // x 为属性名
{
    txt=txt + person[x];
}

while - 当指定的条件为 true 时循环指定的代码块

while (i<5)
{
    x=x + "The number is " + i + "<br>";
    i++;
}

do/while - 同样当指定的条件为 true 时循环指定的代码块
即使条件为 false 它也会执行一次，因为代码块会在条件被测试前执行：

do
{
    x=x + "The number is " + i + "<br>";
    i++;
}
while (i<5);

JavaScript break 和 continue 语句

break 语句用于跳出循环。
continue 用于跳过循环中的一个迭代。
这篇文章只是做个摘要的笔记摘要的原本来自这里

JavaScript自学基础记录
JavaScript 是脚本语言 JavaScript 是一种轻量级的编程语言。 JavaScript 是可插入 ...
学习记录_javaScript_基础语法
1. javaScript基础语法学习记录 [1. javaScript简介][1.1. javaScript简...
javascript基础记录
简略版，用于记录和总结，持续更新 1. 原型 / 构造函数 / 实例 2. 原型链：原型链是由原型对象组成，每个...
html自学基础记录
什么是Html 超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用...
css自学基础记录
什么是 CSS? CSS 指层叠样式表 (Cascading Style Sheets) 样式定义如何显示 HTM...
JavaScript的组成部分
该部分笔记记录关于JavaScript基础的学习。今天先从入门了解一下JavaScript的组成。JavaScri...
PHP学习总结
PHP自学计划记录当前只学习了PHP的基础语法，没有涉及很多PHP内部提供的函数学习目录：PHP自学计划-注释...
JavaScript自学笔记--基础部分2
1、原型、原型链 1.1 原型的定义：原型是function对象的一个属性，原型定义了构造函数制造出的对...
JavaScript自学笔记--基础部分1
1、基本常识浏览器的组成：1）shell部分 2）内核部分：（1）渲染引擎（语法规则...
UI设计零基础如何自学，关于培训班该如何选择？
UI设计零基础如何自学，关于培训班该如何选择？UI设计零基础如何自学UI设计零基础如何自学UI设计零基础如何自学U...

JavaScript自学基础记录

JavaScript 是脚本语言

JavaScript 用法

<script> 标签

内部的 JavaScript

外部的 JavaScript

JavaScript 输出

JavaScript 操作符

JavaScript 关键字

JavaScript 语句

分号 ;

JavaScript 代码块

JavaScript 语句标识符

JavaScript 变量

声明（创建） JavaScript 变量

let变量

const 关键字

JavaScript 数据类型

JavaScript 拥有动态类型

JavaScript 数组

JavaScript 对象

Undefined 和 Null

声明变量类型

isArray和 instanceof 操作符

JavaScript 对象

对象定义

对象属性

访问对象属性

对象方法

JavaScript 函数

JavaScript 函数语法

调用带参数的函数

带有返回值的函数

JavaScript 作用域

JavaScript 局部作用域

JavaScript 全局变量

JavaScript 变量生命周期

JavaScript 事件

HTML 事件

常见的HTML事件

JavaScript 字符串

特殊字符

字符串方法

JavaScript 运算符

JavaScript 算术运算符

JavaScript 赋值运算符

JavaScript 比较 和 逻辑运算符

比较运算符

逻辑运算符

条件运算符

JavaScript if...Else 语句

条件语句

JavaScript switch 语句

default 关键词

JavaScript for 循环

不同类型的循环

JavaScript break 和 continue 语句

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

JavaScript 比较和逻辑运算符