JavaScript 是一种轻量级的编程语言,很容易学习,同时也是一种被广泛用于客户端Web开发的脚本语言。通过本课程学习,我们可以了解到JavaScript的基本语法知识,以及怎样使用它去创建简单的游戏和应用。
1.获取字符的长度
"youName".length;
2.使用"+"
加法、"-"
减法、"*"
乘法和"/"
除法,对两个数字进行运算;
3."//"
是注释,注释是一个文本行,JavaScript无法运行这行代码。它只是用来让人们阅读的。
4.这是JavaScript(JS)编程语言。编程语言有很多语言,但JS有许多用途,很容易学习。
我们可以使用JavaScript来做什么?
- 使网站对用户交互作出响应
- 构建应用程序和游戏(例如二十一点)
- 在互联网上获取信息(如在Twitter上找出热门词的主题)
- 组织和显示数据(如电子表格自动化工作;数据可视化)
confirm('这是一个例子,使用JS在网站上创建一些交互。单击确定继续!');
5.输入
prompt("你叫什么名字?");
prompt("你多大了?");
6.数据有各种类型,您已经使用了两个。
-
number
: 数量,你可以做数学,number在您的代码中,只是写一些数字没有引号:42
,190.12334
。 -
string
:是字符的序列,像字母a - z一样,空格,甚至数字。这些都是字符串:"Ryan"
,"4"
和"你叫什么名字?"
。
还有一种类型是boolean
,布尔值。它有两个值true
或false
。例如,比较两个数字返回真或假的结果:23 > 10
是 true
。
var length = "我编码如飞".length;
console.log(length);
length > 10
7.console.log()
会将括号内的内容打印到控制台;
8.到目前为止,我们已经学习了三种数据类型:
-
strings
(例: "dogs go woof!") -
numbers
(例: 4,10) -
booleans
(例: false, 5 > 4)
比较运算符列表:
-
>
大于 -
<
小于 -
<=
小于等于 -
>=
大于等于 -
==
等于(等同) -
===
等于(恒等) -
!==
不等于
注意: "=="
两边值类型不同的时候,会进行类型转换,再比较。 "==="
不做类型转换,类型不同的一定不等。 例如:5 == "5"
结果为true
,而5 === "5"
结果为false
。
console.log(15 > 4); // 15 > 4 判断为true,所以打印结果是true
console.log("Xiao Hui".length<122);
console.log("Goody Donaldson".length<8);
console.log(8*2===16);
9.if语句是由if
关键词、一个条件
和一对大括号{ }
组成。如果条件的结果是true,花括号内的代码将运行。
if( "youName".length >= 7 ) {
console.log("你有一个很长的名字!");
}
if( "myName".length >= 7 ) {
alert("你的名字很长!");
}else {
alert("你的名字很短");
}
10.我们遇到一个有趣的符号称为 "%
" 模。放在两个数字之间时,计算机将第一个数字除以第二个,然后返回余数。所以如果我们计算 23 % 10 ,我们用23除以10,结果为2,余数是3,所以23%10结果为3。
11.x是指从哪里开始截取,y是指到哪里结束。字符串中的每个字符编号从0开始.
"some word".substring(x, y);
12.通过一个具体的,区分大小写的名称定义一个变量。一旦您用特定名称创建(或声明)一个变量,然后你可以通过这个变量名来获取这个值。
var varName = data;
13.一个函数接受输入,并做一些处理后,产生输出。
// 函数看起来就像是这样的:
var divideByThree = function (number) {
var val = number / 3;
console.log(val);
};
// 在第12行,我们调用函数的名字
//在这里,它被称为“dividebythree”
// 我们告诉计算机输入数量(即6)
// 然后电脑运行函数内的代码!
divideByThree(6);
1、 首先,我们使用var
声明一个函数,然后给它起一个名字divideByThree。名字应以小写字母开头,该约定是使用驼峰命名法(每个单词首字母大写,第一单词除外)。
2、 然后使用 function
关键字来告诉计算机你正在创建一个函数。
3、 括号中的代码被称为一个参数。这是一个占位符,当我们调用的时候会给它一个特定的值。
4、 然后将你要重复的代码写在“{ }
”之间,每段代码必须用“;
”来结束。
可以调用函数来运行这段代码:divideByThree(6);
使用函数,我们只需要输入函数名来调用函数,并将参数传入到后面的括号中。电脑将运行可重复使用的代码,并将具体的参数值替换到代码中。
14.return
关键字告诉程序什么时候函数要返回 返回值
。所以函数运行到return
关键字时,该功能会立即停止运行并返回值。
// 好的函数写法
var calculate = function (number) {
var val = number * 10;//就算没有这样的间距或换行,计算机也是可以理解这些代码的,但使用间距和换行可以使编码更加容易查看,并且这是最好的做法。
console.log(val);//代码块的每一行和函数的末尾都要加上分号,分号的作用就像是一段中的一句,它有助于计算机知道每句代码在什么时候结束。
};
// 写的很糟的函数
var greeting = function(name){console.log(name);}
在编程D.R.Y.
原则是非常重要的。不要重复!
作用域可以是全局或局部。
在函数外部定义的变量一旦被声明就可以在任何地方访问,它们被称为全局变量或者说它们的作用域是全局的。
到目前为止我们看到的函数只有一个参数。但函数写多个参数通常是有用的。
var areaBox = function(length, width) {
return length * width;
};
函数内部定义的变量是局部变量。他们无法在函数外部访问。
var
关键字会在当前作用域创建一个新的变量。这意味着,如果变量被声明在函数之外,该变量就具有全局的作用域。如果变量被声明在函数中,该变量就具有局部的作用域。
var my_number = 7; //这是全局变量
var timesTwo = function(number) {
my_number = number * 2;
console.log("内部函数中 my_number 的值是: ");
console.log(my_number);
};
timesTwo(7);
console.log("外部 my_number 值是: ")
console.log(my_number);
在第4行,我们没有使用var关键字,所以我们在函数外用console.log
打印出my_number
的值将会是14。
15.
- 让i递增1的更有效的方法是使用
i++
; - 让i递减1为
i--
; - 我们可以使用
i+=x
来编写你希望递增的任意值,例如:i+=3,他与i=i+3是相同的; - 我们也可以使用
i-=x
来编写你希望递减的任意值; - 当你编写一个循环时,要非常小心,如果你不能正常结束这个循环,这会造成所谓的死循环,他会让你的浏览器崩溃掉。
// for 循环例子:
for (var counter = 1; counter < 6; counter++) {
console.log(counter);
}
16.数组:
- 数据存储列表 ;
- 可以同时存储不同数据类型的数据;
- 数组是有序的,所以每一个数据的位置是固定的。
var names = ["Mao","Gandhi","Mandela"];
var sizes = [4, 6, 3, 2, 1, 9];
var mixed = [34, "candy", "blue", 11];
var arrayName = [data, data, data];
任何时候当你看到有“[]
”的数据,它就是一个数组。当你调用数组的 .length
时,将返回数组元素的数量。
每个数据的位置是从0开始计算的,而不是1;数组的第一个元素:junkData[0]
; 数组中的第三个元素:junkData[2]
;
var text = "Blah blah blah blah blah blah Eric \
blah blah blah Eric blah blah Eric blah blah \
blah blah blah blah blah Eric";
var myName = "Eric";
var hits = [];
// Look for "E" in the text
for(var i = 0; i < text.length; i++) {
if (text[i] == "E") {
// 如果找到了,就添加到数组中
// 长度和myName长度一样
for(var j = i; j < (myName.length + i); j++) {
hits.push(text[j]);
}
}
}
if (hits.length === 0) {
console.log("没有发现你的名字!");
} else {
console.log(hits);
}
由于text
可能会比较长,你可以使用反斜杠“\
”来结束,然后在下一行继续写;
数组有一个push()
方法,它会将括号中的内容添加到数组末尾。
newArray = [];
newArray.push('hello');
newArray[0]; // 等于 'hello'
var coinFace = Math.floor(Math.random() * 2);
while(coinFace === 0){
console.log("正面! 继续...");
var coinFace = Math.floor(Math.random() * 2);
}
console.log("反面! 停止.");
16.你可能已经注意到,当我们给一个变量赋值boolean类型值为true时,我们不需要用 === 来检查这个变量,例如:
var bool = true;
while(bool){
//Do something
}
var bool = true;
while(bool === true){
//Do something
}
但第一种是更快的方式,如果你碰巧使用数字,正如我们前面做的,你甚至可以做的:
var myNumber = 1;
while(myNumber) {
// Do something!
}
只要条件的计算结果为true
时,循环将继续运行。如果是false
就会停下来。(当你使用一个数字来作为条件时,javascript能够理解1代表true,0代表false)
正如我们提到的,for
循环非常适合做你提前知道你要重复多少次循环的任务。另一方面,while
循环是当你不得不循环,但你不知道有多少次循环的的时候。
有时你想确保你的循环运行至少一次。在这种情况下,你需要修改while
循环为do/while
循环。
-
youHit
值为Math.floor(Math.random() * 2)
,这是给youHit
设置一个随机数0或者1; -
damageThisRound
值为Math.floor(Math.random()*5 + 1)
,这将生成一个1到5间的随机数。
totalDamage = totalDamage + damageThisRound;
这有一个快捷的写法:就是使用+=
运算符。
17.如果你调用isNaN
做一些事情,它会检查它是不是个数字,如果是数字将返回false
。
isNaN('berry'); // => true
isNaN(NaN); // => true
isNaN(undefined); // => true
isNaN(20); // => false
注意:如果你调用isNaN传入的一个字符串,看起来像一个数字,比如“20”,javascript会尝试将字符串自动转换为数字20,这将返回false(因为20是一个数字)。
注意你不能这样写:
isNaN(unicorns);
除非你已经定义了一个变量叫unicorns
; 然而你可以这样做:
isNaN("unicorns"); // => true
18.
Switch允许你预先设置多个选项(case
),然后检查表达式是否匹配。
如果匹配,就会执行匹配的程序,如果没有匹配的,就会执行default
选项。
19. JavaScript有三个逻辑运算符:
- 与(&&);
- 或(| |);
- 取反(!)。
var answer = prompt("用户问题").toUpperCase();
在你的提示中调用.toUpperCase()
或.toLowerCase()
,以确保获得用户的输入是大写或者小写。
20.异构数组,这意味着数组中可以有不同类型的元素
var mix = [, true, "towel"];
不仅可以在数组中存储不同的数据类型,甚至可以在数组中存放其他数组。可以通过嵌套来实现二维数组,像这样:
var twoDimensional = [[, ], [, ]];
可能要求第一行有三个元素,第二行为一个元素,第三行有两个元素。Javascript是允许的,这就是所谓的交错数组。
var jagged = [[,,],[,],[]];
for (var i = ;i<jagged.length;i++){
console.log(jagged[i]);
}
21.可以把对象当做是键值对的组合(如数组),只是他们的键不是0,1或2这些数字,它们可以是字符串和变量。
var phonebookEntry = {}; phonebookEntry.name = 'tom';
phonebookEntry.number = '(555) 555-5555';
phonebookEntry.phone = function() {
console.log('打电话给' + this.name + ' ,号码是 ' + this.number + '...');
}; phonebookEntry.phone();
除了它的键是字符串和变量外,这个对象就像是一个数组。 对象的花括号之间是收集信息(键和值),像这样的:
var myObject = {
key: value,
key: value,
key: value
};
22.用两种方法可以创建对象,一种是你刚刚做的,另一种是使用对象的构造函数。
var myObj = {
type: 'fancy',
disposition: 'sunny'
}; var emptyObj = {};
使用构造函数,语法如下
var myObj = new Object();//这告诉javascript我要创建一个新的事物是Object;
你已经通过两种方式创建了对象,你可以添加键到你的对象。
myObj["name"] = "Charlie";
myObj.name = "Charlie";
两者都是正确的,第二个是简写。看看这是不是有点类似于数组呢?
使用[]
或者.
来添加添name
和age
属性。
添加对象到数组,我们可以这样:
var myObj = {
type: 'fancy',
disposition: 'sunny'
};
myArray = [myObj];
var friends = {}; friends.Tom = {
name: "Tom",
number: "(206) 555-5555",
address: ['USA','NewYork']
};
friends.Jerry = {
name: "Jerry",
number: "(010) 555-5555",
address: ['中国','北京']
}; var list = function(obj) {
for(var prop in obj) {
console.log(prop);
}
}; var search = function(name) {
for(var prop in friends) {
if(friends[prop].name === name) {
return friends[prop];
}
}
}; list(friends);
console.log(search("Jerry").number);
现在我们来将你的一些朋友添加到friends
对象中,每个朋友需要一个名字,电话号码,等等。我们将使用一个新对象来保存每个朋友的信息!没错,我们是在对象中创建对象!
将一些空对象添加到你的friends
对象中去,确保你添加的对象的名字是“Tom”和“Jerry”,我们将使用这两个名字来做为你空对象的键。
var friends = {
bill: {},
steve: {}
};
或者使用中括号([]
),或点(.
),像这样:
friends[bill] = {};
friends.steve = {};
23.数组和变量存储数据是一样的。不同的是,数组可以存储更多的值,一个变量只能存储一个。
要访问数组,我们可以使用中括号符号,并要记住数组的索引是从0开始的(例如,数组中的第一个值是在位置0)。
创建一个对象就像声明一个变量,或定义一个函数一样,我们可以使用var
,紧随其后的是对象的名称和一个等号; 然后每个对象:
1. 以“{
“开始; 2. 里面有对象相关的信息; 3. 以“}
“结束。
每条信息在一个对象中被称为一个属性。当创建一个对象时,每个属性都有一个名称,后面存放其值。
举例来说,如果我们要显示Bob
的对象,他是34岁,我们会输入age:34
。
age
是属性,而34
是该属性的值。当我们有一个以上的属性时,它们之间用逗号隔开。最后一个属性不需要用逗号来结束。
使用点符号来访问属性,所以我们应该使用ObjectName.PropertyName
(例如:bob.name
);
除了点符号,我们也可以使用中括号来访问属性。在本例中,我们使用ObjectName["PropertyName"]
访问所需的属性。请注意,我们需要在属性的名字上加上双引号。
24.函数使用function
关键字后跟:
- 一对圆括号
()
里面的可放置参数。 - 一对花括号,来放置函数的代码
{}
。 - 分号
;
。
[No0000101]JavaScript-基础课程1的更多相关文章
-
妙味课堂——JavaScript基础课程笔记
集中时间把秒微课堂JS的基础课程看完,并且认真完成了课后练习.感觉在JS方面的技能算是入了个门了.课后练习的作业完成的代码我都汇总在了这里.至于视频课的学习笔记,则记录如下. 第01课JS入门基础_热 ...
-
JavaScript基础---语言基础(1)
写在前面: 通过四篇博客把JS基础中的基础整理一下,方便自己查阅,这些内容对于实际项目开发中也许并不会在意,但是作为JS的语言基础,自觉还是应该熟悉.在完成这三篇博客(JavaScript基础---语 ...
-
JavaScript基础视频教程总结(131-140章)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
-
JavaScript基础视频教程总结(121-130章)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
-
JavaScript基础视频教程总结(111-120章)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
-
JavaScript基础视频教程总结(101-110章)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
-
JavaScript基础视频教程总结(091-100章)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
-
JavaScript基础视频教程总结(081-090章)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
-
JavaScript基础视频教程总结(071-080章)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
-
JavaScript基础视频教程总结(061-070章)
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
随机推荐
-
Oracle学习线路
出自huyangg的博客,地址是:oracle学习路线图 1.sql.pl/sql(网上有很多的视频,可以做一个简单的入手,然后看几本书,多做实验) 作为oracle的基本功,需要大家对sql和 ...
-
PHP代码标识
1. Echo语句(打印) <?php echo "想学习PHP么"; ?> 2. 计算表达式 <?php echo 12*3; ?> 3. 字符串 < ...
-
struts2.3.15.1 中jsp:include与jsp:forward的用法
首先配置好struts2的过滤器:web.xml中的配置 <filter> <filter-name>struts-prepare</filter-name> &l ...
-
STL之set和multiset(集合)
set和multiset会根据特定的排序准则,自动将元素进行排序.不同的是后者允许元素重复而前者不允许. constructing sets #include #include using names ...
-
head first python菜鸟学习笔记(第三章)
1.os.chdir()切换到指定目录下,os.getcwd(),得到当前目录. >>> import os>>> os.chdir('D:\\CodeDocume ...
-
Dubbo原理解析-Dubbo内核实现之SPI简单介绍
转自:https://blog.csdn.net/quhongwei_zhanqiu/article/details/41577159 Dubbo 采用微内核+插件体系,使得设计优雅,扩展性强.那所谓 ...
-
Nginx如何设置禁止IP访问网站
需要禁止IP访问网站.在相关的server中设置相关的限制即可.
-
BZOJ5465 APIO2018选圆圈(KD-Tree+堆)
考虑乱搞,用矩形框圆放KD-Tree上,如果当前删除的圆和矩形有交就递归下去删.为防止被卡,将坐标系旋转一定角度即可.注意eps稍微设大一点,最好开上long double. #include< ...
-
python dtrace 安装与应用
https://ipfans.github.io/2016/09/tracing-python-program-with-dtrace/?utm_source=tuicool&utm_medi ...
-
python爬虫田康林
代码如下 import requestsimport json import time import os from threading import Timer def getHTML(url ...