Luke's home
lukexiao
2021-04-28

基础知识

# javascript的输出

# window.alert()

会跳出一个小对话框

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

# document.write()

<script>
document.write('I am xiaoyu');
    document.write('<p>you look nice</p>');
</script>
1
2
3
4

这个操作会在你嵌入的地方输出，引号内可以包含html标签

注意

如果在文档已完成加载后执行 document.write，整个 HTML 页面将被覆盖。

# innerHTML

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

通过修改innerHTML来修改内容

# console.log()

输出 控制台

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

# 语句

# 空格

JavaScript 会忽略多余的空格。您可以向脚本添加空格，来提高其可读性。下面的两行代码是等效的：

var person="runoob";
var person = "runoob";
1
2

# 对代码行进行折行

您可以在文本字符串中使用反斜杠对代码行进行换行。下面的例子会正确地显示：

# 实例

document.write("你好 \ 世界!");
1

不过，您不能像这样折行：

document.write \ 
("你好世界!");
1
2

img

**知识点：**JavaScript 是脚本语言，浏览器会在读取代码时，逐行地执行脚本代码。而对于传统编程来说，会在执行前对所有代码进行编译。

# 变量

# Value = undefined

没有赋值的值，值是undefined

var a
console.log(a)
1
2

结果是undefined

es6以后const 用的更多，代替var

# 数据类型

# JavaScript 拥有动态类型

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

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

提示

es6中的const定义的变量就不可以，随便的切换类型

# JavaScript 数组

数组里面可以放任意类型

var a=[]
a.push('56')
a.push(56)
console.log(a)
1
2
3
4

结果：[ '56', 56 ]

# Undefined 和 Null

Undefined 这个值表示变量不含有值。

可以通过将变量的值设置为 null 来清空变量。

a=null
1

# 声明变量类型

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

var carname=new String;
var x=   new Number;
var y=   new Boolean;
var cars=  new Array;
var person= new Object;
1
2
3
4
5

# 对象

# 对象定义

var a={
    name:'xiaoyu',
    age:33,
    sex:'man'
}
1
2
3
4
5
6

# 访问对象

console.log(a.name)
console.log(a['name'])
1
2

这两种都可以访问

# 对象方法

var a={
    name:'xiaoyu',
    age:33,
    sex:'man',
    run:function(){    // run 是一个方法
        return this.name+this.age+this.sex
    }
}

console.log(a.name)
console.log(a['name'])
console.log(a.run())  // 这里访问它的方法，不传入参数
1
2
3
4
5
6
7
8
9
10
11
12

# 函数

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

# JavaScript 函数语法

function functionname()
{
    // 执行代码
}
1
2
3
4

JavaScript 对大小写敏感。关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数。

# 带有返回值的函数

有时，我们会希望函数将值返回调用它的地方。

通过使用 return 语句就可以实现。

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

function myFunction()
{
    var x=5;
    return x;
}
1
2
3
4
5

在您仅仅希望退出函数时 ，也可使用 return 语句。返回值是可选的：

function myFunction(a,b)
{
    if (a>b)
    {
        return;
    }
    x=a+b
}
1
2
3
4
5
6
7
8

# 局部 JavaScript 变量

在 JavaScript 函数内部声明的变量（使用 var）是局部变量，所以只能在函数内部访问它。（该变量的作用域是局部的）。

您可以在不同的函数中使用名称相同的局部变量，因为只有声明过该变量的函数才能识别出该变量。

只要函数运行完毕，本地变量就会被删除。

# 全局 JavaScript 变量

在函数外声明的变量是全局变量，网页上的所有脚本和函数都能访问它。

# JavaScript 变量的生存期

JavaScript 变量的生命期从它们被声明的时间开始。

局部变量会在函数运行以后被删除。

全局变量会在页面关闭后被删除。

# 事件

HTML 事件是发生在 HTML 元素上的事情。

当在 HTML 页面中使用 JavaScript 时， JavaScript 可以触发这些事件。

<button onclick="this.innerHTML=Date()">anwo</button>
1

这是一个简单的onclick事件，改变自己的innerHTML

# 常见的HTML事件

下面是一些常见的HTML事件的列表:

事件 描述
onchange HTML 元素改变
onclick 用户点击 HTML 元素
onmouseover 用户在一个HTML元素上移动鼠标
onmouseout 用户从一个HTML元素上移开鼠标
onkeydown 用户按下键盘按键
onload 浏览器已完成页面的加载

# JavaScript 字符串

# 转义符

<p id="demo"></p>
<script>
var x = 'It\'s alright';    // \后面的就是转义符，表示这是一个字符，以防万一，后外面引号冲突
var y = "He is called \"Johnny\"";
document.getElementById("demo").innerHTML = x + "<br>" + y; 
</script>
1
2
3
4
5
6

结果：

It's alright He is called "Johnny"

以下是一些特殊字符的转义

代码 输出
\' 单引号
\" 双引号
\\ 反斜杠
\n 换行
\r 回车
\t tab(制表符)
\b 退格符
\f 换页符

# 索引

a='haha'
console.log(a[0])// 用来索引位置得到结果 ，结果h
1
2

# 字符串长度

a='haha'
console.log(a.length)  //length表示长度，，结果是4
1
2

# 字符串可以是对象

var x = "John";
var y = new String("John");
console.log(typeof x) // 返回 String
console.log(typeof y) // 返回 Object
1
2
3
4

不要创建 String 对象。它会拖慢执行速度，并可能产生其他副作用：

# 字符串属性和方法

原始值字符串，如 "John", 没有属性和方法(因为他们不是对象)。

原始值可以使用 JavaScript 的属性和方法，因为 JavaScript 在执行方法和属性时可以把原始值当作对象。

# JavaScript 比较 和 逻辑运算符

主要有一个绝对等于

# if..else语句

if(5>6){                     // 基本格式，很简单
    console.log('5>3')
}
else{                  
    console.log('5<6')
}
1
2
3
4
5
6

# if...else if...else 语句

if(5>6){                 // 也没啥好说的
    console.log('5>3')
}
else if(6>7){
    console.log('5<6')
}
else{
    console.log('6<7')
}
1
2
3
4
5
6
7
8
9

# JavaScript switch 语句

工作原理：首先设置表达式 n（通常是一个变量）。随后表达式的值会与结构中的每个 case 的值做比较。如果存在匹配，则与该 case 关联的代码块会被执行。请使用 break 来阻止代码自动地向下一个 case 运行。

var d=new Date().getDay(); 
switch (d)                // 通常d是一个变量
{ 
  case 0:x="今天是星期日";     
  break; 
  case 1:x="今天是星期一"; 
  break; 
  case 2:x="今天是星期二"; 
  break; 
  case 3:x="今天是星期三"; 
  break; 
  case 4:x="今天是星期四"; 
  break; 
  case 5:x="今天是星期五"; 
  break; 
  case 6:x="今天是星期六"; 
  break; 
    default:x="周末愉快"；  //如果这里x等于7的话，结果就是周末愉快
        
}
console.log(x)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# JavaScript for 循环

简单for循环

for(var i=0;i<6;i++){
    console.log('这是'+i)
}
1
2
3

结果：这是0

这是1

这是2

这是3

这是4

这是5

# 不同类型的循环

JavaScript 支持不同类型的循环：

  • for - 循环代码块一定的次数
  • for/in - 循环遍历对象的属性
  • while - 当指定的条件为 true 时循环指定的代码块
  • do/while - 同样当指定的条件为 true 时循环指定的代码块

# For/In 循环

var person={fname:"Bill",lname:"Gates",age:56};    //遍历object值
 
for (x in person)  // x 为属性名
{
   console.log(x+'----'+person[x])
}
1
2
3
4
5
6

结果：

fname----Bill

lname----Gates

age----56

a=[7,'hh',89]   //遍历数组
for (i in a){        // i是索引值
    console.log(i+'--'+a[i])
}
1
2
3
4

结果：

0--7

1--hh

2--89

# JavaScript while 循环

while 循环会在指定条件为真时循环执行代码块。

# 语法

while (*条件*)
{
  *需要执行的代码*
}
1
2
3
4
var i=0
while (i<5)
{   
    console.log(`this is ${i}`)
    i++
}
1
2
3
4
5
6

结果：

this is 0

this is 1

this is 2

this is 3

this is 4

如果您忘记增加条件中所用变量的值，该循环永远不会结束。这可能导致浏览器崩溃。

# do/while 循环

# 语法

do
{
  *需要执行的代码
*}
while (*条件*);
1
2
3
4
5
var i=6			
do	  //不管条件是否符合都会先执行一次
{   
    console.log(`this is ${i}`)
    i++
}
while (i<5)
1
2
3
4
5
6
7

结果：this is 6

# JavaScript break 和 continue 语句

# break 语句

我们已经在本教程之前的章节中见到过 break 语句。它用于跳出 switch() 语句。

break 语句可用于跳出循环。

break 语句跳出循环后，会继续执行该循环之后的代码（如果有的话）：

# continue 语句

continue 语句中断循环中的迭代，如果出现了指定的条件，然后继续循环中的下一个迭代。 该例子跳过了值 3：

for (i=0;i<=10;i++)
{
    if (i==3) continue;
    x=x + "The number is " + i + "<br>";
}
1
2
3
4
5

# JavaScript 标签

正如您在 switch 语句那一章中看到的，可以对 JavaScript 语句进行标记。

如需标记 JavaScript 语句，请在语句之前加上冒号：

label: statements
1

break 和 continue 语句仅仅是能够跳出代码块的语句。

语法:

break labelname; 
 
continue labelname;
1
2
3

continue 语句（带有或不带标签引用）只能用在循环中。

break 语句（不带标签引用），只能用在循环或 switch 中。

例子

onefor:
for(var i=0;i<6;i++){
    twofor:
    for(var x=0;x<6;x++){
        if(x==3){break }    //这里设置x=3的时候跳出里层循环
        console.log(`${i}--${x}`)
    }
}
1
2
3
4
5
6
7
8

结果：

0--0
0--1
0--2
1--0
1--1
1--2
2--0
2--1
2--2
1
2
3
4
5
6
7
8
9

如果我们让x=3跳出整个循环，可以这样写

onefor:
for(var i=0;i<3;i++){
    twofor:
    for(var x=0;x<6;x++){
        if(x==3){break onefor }    //onefor是外层循环的标签，我们break可以直接跳出标签循环
        console.log(`${i}--${x}`)
    }
}
1
2
3
4
5
6
7
8

结果：

0--0
0--1
0--2
1
2
3

# JavaScript typeof, null, 和 undefined

# typeof 操作符

你可以使用 typeof 操作符来检测变量的数据类型。

typeof "John"                // 返回 string
typeof 3.14                  // 返回 number
typeof false                 // 返回 boolean
typeof [1,2,3,4]             // 返回 object
typeof {name:'John', age:34} // 返回 object
1
2
3
4
5

注意

在JavaScript中，数组是一种特殊的对象类型。 因此 typeof [1,2,3,4] 返回 object。

# null

在 JavaScript 中 null 表示 "什么都没有"。

null是一个只有一个值的特殊类型。表示一个空对象引用。

注意

用 typeof 检测 null 返回是object。

# undefined

在 JavaScript 中, undefined 是一个没有设置值的变量。

typeof 一个没有值的变量会返回 undefined。

var person;         // 值为 undefined(空), 类型是undefined
1

任何变量都可以通过设置值为 undefined 来清空。 类型为 undefined.

# undefined 和 null 的区别

null 和 undefined 的值相等，但类型不等：

typeof undefined             // undefined
typeof null                  // object
null === undefined           // false
null == undefined            // true
1
2
3
4
编辑 (opens new window)
上次更新: 2021/08/13, 23:21:49
类型转换

类型转换→

最近更新
01
流式布局
 08-13
02
flex布局
 08-13
03
rem布局
 08-13
更多文章>
Theme by Vdoing | Copyright © 2021-2021 Evan Xu | MIT License