JavaScript 入门知识点

1.什么是javascript?

2.数据类型和变量

3.条件语句

4.循环

5.函数

6.数组

7.对象

····························

1.什么是javascript?

1.简介

世界上最流行的编程语言之一,是一种运行在浏览器中的解释型的编程语言

{HTML 和 CSS 是标记语言。标记语言用于描述和定义文档中的元素。JavaScript

是编程语言。编程语言用于向机器发出指令。编程语言可用于控制机器的行为和表达算法。}

在Web世界里,只有JavaScript能跨平台、跨浏览器驱动网页,与用户交互。

现在主流的浏览器都内置了JavaScript引擎,

JavaScript被视为前段开发的三个基础支柱之一,是真正让网站变得生动的最后一项必备技术。

JavaScript 和Java完全不同,没任何关系

JavaScript当时叫做livescript,为了便于营销,于是借用JAVA的名气改名为JavaScript

····························

2.JavaScript 控制台

用Google Chrome开发者工具访问JavaScript控制台

开发者工具让你可以直接在浏览器中调试和检验你的构思。

右击“检查”,找到console (快捷键option键+command键+j键)

zhuju

image.png

“zhujun”正确

image.png

alert (hello,zhujun);报错

image.png

alert ("hello,zhujun");正确
image.png

console.log 用于向 JavaScript 控制台显示内容

console.log("hi zhujun!");

输出(一串字符): hi zhujun!

image.png

使用console.log()代替alert()的好处是可以避免弹出烦人的对话框。

注意点:

console.log内如果是字符或字符串要加引号

JavaScript严格区分大小写,如果弄错了大小写,程序将报错或者运行不正常。

····························

2.数据类型和变量

数字

在 JavaScript 中定义数字实际上非常简单。数字数据类型包括任何正负整数以及小数。统一用Number表示,Number可以直接做四则运算,规则和数学一致

向控制台中输入数字可以直接返回该数字。

输入 3 返回:3

算术运算

你还可以轻松地计算数字公式。就像在计算器中输入内容一样。

输入 3 + 2.1 返回:5.1

输入 10.5 % 3 返回 1.5

注意%是求余运算

····························

比较数字

就像在数学中一样,你可以比较两个数字,看看某个数字是否大于、小于或等于另一个数字。

输入 5 > 10 返回:false

输入 3 <= 3 返回: true

在 JavaScript 中,值 true 和 false 非常重要。这些值叫做布尔值

····························

注释

由于代码越来越复杂,很多代码越来越难理解,就需要注释,使程序更容易读懂。

在 JavaScript 中,注释用双斜杠 // 表示。同一行 // 后面的所有内容都不执行或显示。

如果要分好几行写注释,用斜杠和星号开头,然后用星号和斜杠结束注释。

例如:// this is a single-line comment

// 这是一行注释

alert('hello'); // 这也是注释

/*

this is

a multi-line

comment

*/

/* 从这里开始是块注释

仍然是注释

仍然是注释

注释结束 */

····························

字符串

字符串要用双引号或单引号括起来,只要保持一致就行

“123” “hello” "hello,how are you"

字符串连接

"Hello," + " New York City”

返回:"Hello, New York City”

"hello" + "world" 的结果是"helloworld”

"Hello + 510" 的结果是 "Hello + 510”

"Hello" + 5*10的结果是Hello50

····························

变量

var greeting = "Hello";

greeting + " World!";

返回:Hello World!

变量名是大小写英文、数字、$和_的组合,且不能用数字开头。变量名也不能是JavaScript的关键字,如if、while等。申明一个变量用var语句

请不要把赋值语句的等号等同于数学的等号!!!

比如下面的代码:

var x = 10;

x = x + 2;

如果从数学上理解x = x + 2那无论如何是不成立的,在程序中,赋值语句先计算右侧的表达式x + 2,得到结果12,再赋给变量x。由于x之前的值是10,重新赋值后,x的值变成12。

显示变量的内容,可以用console.log(x)

····························

字符串索引

你可以访问字符串中的每个字符,要访问单个字符,你可以使用字符在字符串中的位置,叫做索引

只需在字符串后面加上字符的索引,并用方括号括起来(第一个字符从 [0] 开始)

"James"[0];

返回:"J" (如果是一句话 中间的空格,也算一个字符)

更常见的如下所示形式,使用一个变量:

var name = "James";

name[0];

返回:"J"

image.png

····························

转义字符

有时候,你要创建的字符串可能不仅包括数字和字母。例如,如果要在字符串中使用引号,该怎么办?

"The man whispered, "please speak to me.""

报错 Uncaught SyntaxError: Unexpected identifier

如果你想在字符串中使用引号,并且不希望 JavaScript 误解你的意图,则需要采用不同的方式来表示引号。JavaScript 可以采用反斜杠字符 ( \ ) 来表示。

"The man whispered, "please speak to me.""

返回: "The man whispered, "please speak to me.""

这样可以保证 JavaScript 引擎不会理解错字符串的含义并产生错误。

转义字符\可以转义很多字符,比如\n表示换行,\t表示制表符,字符\本身也要转义,所以\表示的字符就是\

多行字符串

由于多行字符串用\n写起来比较费事,所以最新的ES6标准新增了一种多行字符串的表示方法,用反引号 ... 表示:

`这是一个

多行

字符串`;

操作字符串

字符串常见的操作如下:

var s = 'Hello, world!';

s.length; // 13

是字符串索引 从0开始

toUpperCase

toUpperCase()把一个字符串全部变为大写:

var s = 'Hello';

s.toUpperCase(); // 返回’HELLO'

toLowerCase

toLowerCase()把一个字符串全部变为小写:

var s = 'Hello';

var lower = s.toLowerCase(); // 返回'hello'并赋值给变量lower

lower; // ‘hello'

····························

布尔值

布尔值只包括两个 是或否 开或关 对或错等 true 和 false yes or no

····························

3.条件语句

image.png

去商店购物,如果有足够的钱,购买商品

                  如果不够,放弃购买

是否有足够的钱,决定了购物的结果。

image.png
image.png

····························

If...else 语句

If...else 语句使你能够根据是否满足一定的条件而执行特定的代码。

if (/* this expression is true如果这个表达式是正确的 */) {

// run this code执行这行代码

} else {

// run this code否则执行这行代码

}

关于 if...else 语句的几个注意事项。

if 语句中的值始终转换为 true 或 false。根据该值,if 语句中的代码会运行,或 else 语句中的代码会运行。if 和 else 语句中的代码位于花括号 {...} 里,以便区分条件,并表明要运行哪段代码。

来一个复杂一点的

image.png

在某些情况下,两个条件语句并不够。

你要决定明天穿什么。如果下雪的话,就穿个大衣。如果不下雪,下雨的话,就穿夹克。如果不下雪或不下雨的话,就穿现在穿的衣服。

Else if 语句

在 JavaScript 中,你可以再用一个 if 语句来表示第二个检查条件,叫做 else if 语句。

var weather = "sunny";

if (weather === "snow") {

console.log("Bring a coat.");

} else if (weather === "rain") {

console.log("Bring a rain jacket.");

} else {

console.log("Wear what you have on.");

}

输出:Wear what you have on.

通过额外添加一个 else if 语句,就增加了一个条件语句。

如果不下雪,代码就会跳到 else if 语句,看看是否下雨。 如果不下雨,代码就会跳到 else 语句。

var age = 3;

if (age >= 18) {

alert('adult');

} else if (age >= 6) {

alert('teenager');

} else {

alert('kid');

}

更复杂一点的

如果colt不忙,且天气好的情况下,去公园。

同时要满足2个条件,两个都要为True.

image.gif

注意上述代码中的 &&。

&& 符号是逻辑 AND 运算符,用于将两个逻辑表达式结合为一个更大的逻辑表达式。如果两个更小的表达式为 true,那么整个表达式结果为 true。如果其中一个更小的表达式为 false,那么整个逻辑表达式为 false。

还可以理解为,将 && 运算符放在两个语句之间时,代码读成“如果 Colt 不忙,AND 天气不错,那么就去公园”。

····························

image.png
image.png

必须同时满足 才为true

image.png

只要满足其中一个 就为true

····························

4.循环(loops)

while循环

For 循环

嵌套循环

····························

while循环

从一数到一万

image.png

一直不断重复相同的代码,太麻烦

image.gif

var x = 1;

while (x < 10000) {

console.log(x);

x = x + 1;

}

只需要这五行代码 就可以从1数到10000.

任何循环都具有以下三大部分:

  1. 何时开始:设置循环的代码 — 例如定义某个变量的起始值。

  2. 何时停止:测试循环是否继续的逻辑条件。

  3. 如何转到下一项: 递增或递减步骤 — 例如,x = x * 3 或 x = x - 1

以下是包含所有这三部分的基本 while 循环。

var start = 0; // when to start

while (start < 10) { // when to stop

console.log(start);

start = start + 2; // how to get to the next item

}

输出:

0

2

4

6

8

如果循环缺少这三个部分的任一部分,那么就会出现问题。例如,缺少停止条件会导致循环一直执行下去!

千万别运行这段代码!

while (true) {

console.log("true is never false, so I will never stop!");

}

如果你真的在控制台中运行了上述代码,你的浏览器标签页可能会崩溃。

image.gif

····························

For 循环

是javascript常见的一种循环类型。

for 循环明确要求定义起始点、结束点和循环的每一个步骤。实际上,如果缺少这三个部分的任一部分,系统都会提示Uncaught SyntaxError: Unexpected token )。

与while循环的区别:for 循环要预先在语句中定义这一切。

image.png
image.png
image.png

····························

嵌套循环

和条件语句一样,循环也可以互相嵌套,不会给循环带来变化,只是增加了复杂性。

image.png
image.png

注意输出内容的顺序。

对于外部循环里的每个 x 值,内部的 for 循环都完全执行了。外部循环从 x = 0 开始,然后内部循环执行完 y 的所有值:

内部循环访问完 y 后,外部循环继续变成下一个值,即 x = 1,整个流程再执行一遍。

····························

5.函数function

随着代码长度的增加,必然会出现重复执行相同步骤的代码,我们可以将相同的步骤打包成可重复使用的代码块 即函数。

举个例子

image.png

微波炉的功率,时间设定和模式设定等等都是已经打包好的代码块

比如说设定烧烤模式 ,温度多少?默认时间多少?就是出厂前就已经设定好的代码块,也就是函数。我们只需要把菜放进去,打开开关就可以了。剩下的它自动回按照设定的函数执行。

image.png

以上代码,我的理解:

function函数名叫reverseString倒转字符串,

变量reverseMe 是函数的一个形参,这个变量用于存储实参,上图中是字符串Julia .

reversed也是函数的一个变量,是用来颠倒所有字符后的最终字符串,

然后它从后向前对reverseMe字符串执行循环,并且按照同样的顺序将每个字符添加到reversed变量,

最后返回结果, console.log输出结果

function add(x, y) {

var sum = x + y;

return sum;

}

console.log(add(1, 2))

Returns: 3

····························

6.数组

数组是一组按顺序排列的集合,集合的每个值称为元素。JavaScript的数组可以包括任意数据类型,可以存储数字、布尔值等等,任何类型都可以!

[1, 2, 3.14, 'Hello', null, true];

数组用[]表示,元素之间用,分隔

另一种创建数组的方法是通过Array()函数实现:

new Array(1, 2, 3); // 创建了数组[1, 2, 3]

出于代码的可读性考虑,强烈建议直接使用[]

你甚至可以在数组中存储数组,创建嵌套数组!

// creates a arraysInArrays array with three arrays

var arraysInArrays = [[1, 2, 3], ["Julia", "James"], [true, false, true, false]];

····························

访问数据组元素和之前讲的字符串索引一样

image.png

请注意,索引的起始值为0:

var arr = [1, 2, 3.14, 'Hello', null, true];

arr[0]; // 返回索引为0的元素,即1

arr[5]; // 返回索引为5的元素,即true

arr[6]; // 索引超出了范围,返回undefined

····························

如果你想更改数组中某个元素的值,可以将其设为等于一个新的值。

var arr = ['A', 'B', 'C'];

arr[1] = 99;

arr; // arr现在变为['A', 99, 'C']

····························

长度

Array.length

你可以通过使用 length 属性了解数组的长度。

var donuts = ["glazed", "powdered", "sprinkled"];

console.log(donuts.length);

输出结果:3

要访问 length 属性,输入数组名称,然后输入 .(你还将使用“.”访问其他属性和方法),接着输入单词 length。length 属性然后将返回数组中的元素个数。

提示:字符串也具有 length 属性!你可以使用该属性来了解任何字符串的长度。例如,"supercalifragilisticexpialidocious".length 返回 34。

如何修改数组?

数组具有一个内置的方法可以用于向数组中添加元素和移除其中的元素。

修改数组最常见的两个方法是 push() 和 pop()。

Push

你可以使用 push() 方法向数组的末尾处添加元素。

image.gif

image.png

你可以使用 pop() 方法删除数组末尾的元素。

var donuts = ["glazed", "chocolate frosted", "Boston creme", "glazed cruller", "cinnamon sugar", "sprinkled", "powdered"];

donuts.pop(); // pops "powdered" off the end of the donuts array

donuts.pop(); // pops "sprinkled" off the end of the donuts array

donuts.pop(); // pops "cinnamon sugar" off the end of the donuts array

返回: "cinnamon sugar"

donuts 数组:["glazed", "chocolate frosted", "Boston creme", "glazed cruller"]

image.gif

unshift和shift

如果要往Array的头部添加若干元素,使用unshift()方法,shift()方法则把Array的第一个元素删掉

reverse

reverse()把整个Array的元素给掉个个,也就是反转:

var arr = ['one', 'two', 'three'];

arr.reverse();

arr; // ['three', 'two', 'one']

····························

Splice

splice() 是另一个很有用的方法,可以让你向数组的任意位置添加元素和移除任意位置的元素。

虽然 push() 和 pop() 只能向数组的末尾添加元素和移除末尾的元素,splice() 可以指定索引位置以添加新的元素,以及指定要删除的元素数量(如果有)。

var donuts = [“A", “B", “C", “D"];

donuts.splice(1, 1, “E", “F");

返回:[“B”]

donuts 数组:[“A", “E", “F", “C", “D"]

第一个参数表示你要从哪个索引开始更改数组,第二个参数表示你要删除的元素数量,剩下的参数表示你要添加的元素。

image.gif

括号内的意思大概是:在“1”号元素的位置开始修改,删除1个元素,添加2个元素,分别名为····

splice() 是非常强大的方法,使你能够以多种方式操纵数组。用一行代码就能完成各种添加或删除元素的操作。

image.png

原始数组

image.png

全部在需要修改,在后面添加“hole”,这个方式看似简单,可是无法批量处理大量数据

我们可以这样做

image.png

这是一个for循环,图片中变量i表示数组的索引,循环持续进行,直到到达donuts.length

image.png

还有更好的方法,用forEach() 循环

image.png

myAwesomeFunction 是定义的函数名,对数组中的每个元素执行操作

图中有3个参数

element是指数组中元素的实际值,而不是数组索引

index这个参数表示数组索引

array是你开始使用的数组


回到之前donuts的例子 donuts数组的foyEach方法

image.png
image.gif
image.png

foyEach方法将数组中的每一个元素执行该函数,

printDonuts函数只有一个参数 即donut,他对应于数组中的每个donut元素(var donuts这个数组里只有各个donut元素)

image.png

var donuts = ["jelly donut", "chocolate donut", "glazed donut"];

donuts.forEach(function(donut) {

donut += " hole";

donut = donut.toUpperCase();

console.log(donut);

});

输出:

JELLY DONUT HOLE

CHOCOLATE DONUT HOLE

GLAZED DONUT HOLE

map函数

image.png

map() 方法可以轻松地通过现有数组创建一个新的数组

通过 map() 你可以对数组中的每个元素执行某种操作,然后返回新的数组

var donuts = ["jelly donut", "chocolate donut", "glazed donut"]

var improvedDonuts = donuts.map(function(donut) {

donut += " hole";

donut = donut.toUpperCase();

return donut;

});

donuts 数组:["jelly donut", "chocolate donut", "glazed donut"]

improvedDonuts 数组:["JELLY DONUT HOLE", "CHOCOLATE DONUT HOLE", "GLAZED DONUT HOLE"]

map() 方法接受了一个参数,是一个将用于操纵数组中每个元素的函数。在上述示例中,我们使用了函数表达式来将该函数传递给 map()。该函数具有一个参数,即 donut,对应的是 donuts 数组中的每个元素。你不再需要循环访问索引。map() 可以帮助你实现这一操作

了解一下,数组中的数组

image.png
image.png
image.png
image.png
image.png

外循环里面有个内循环 r c 表示变量 row column

····························

7.对象

JavaScript 中的所有事物都是对象:字符串、数值、数组、函数…

image.png
image.png
image.png

var person = {

name: 'Bob',

age: 20,

tags: ['js', 'web', 'mobile'],

city: 'Beijing',

hasCar: true,

zipcode: null

};

JavaScript用一个{...}表示一个对象,键值对以xxx: xxx形式申明,用,隔开。注意,最后一个键值对不需要在末尾加,,如果加了,有的浏览器(如低版本的IE)将报错。

要获取一个对象的属性,我们用对象变量.属性名的方式:

person.name; 返回 // 'Bob'

person.zipcode; 返回 // null

····························

命名规则

可以随便使用大小写字母和数字,但是属性名称不要以数字开始。 字符串不需要放在引号里!如果是多个单词构成的属性,则采用驼峰式大小写形式。 属性名称里不要使用连字符

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,189评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,577评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,857评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,703评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,705评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,620评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,995评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,656评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,898评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,639评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,720评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,395评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,982评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,953评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,195评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,907评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,472评论 2 342

推荐阅读更多精彩内容

  • 第2章 基本语法 2.1 概述 基本句法和变量 语句 JavaScript程序的执行单位为行(line),也就是一...
    悟名先生阅读 4,114评论 0 13
  • FreeCodeCamp - Basic JavaScript 写在前面: 我曾经在进谷前刷过这一套题,不过当时只...
    付林恒阅读 16,428评论 5 28
  • 这是16年5月份编辑的一份比较杂乱适合自己观看的学习记录文档,今天18年5月份再次想写文章,发现简书还为我保存起的...
    Jenaral阅读 2,729评论 2 9
  • 第1章 认识JS JavaScript能做什么?1.增强页面动态效果(如:下拉菜单、图片轮播、信息滚动等)2.实现...
    mo默22阅读 1,238评论 0 5
  • 我想要飞,飞过千山和万水,飞过高山和丛林。 我想要飞,飞过困难和艰辛,飞过痛苦和忧伤。 我想要飞,我要去飞,在自然...
    石头心语阅读 306评论 0 0