30DaysOfJavaScript-First Day
在github上有一个30天学会Javascript的项目,本文对其进行了一些翻译与缩写,侵权删
使用快捷方式打开控制台
Mac Command + Option + I Windows: Crtl + Shift + I
第一个JavaScript代码
我们使用了内置函数console.log()。我们传递了一个参数作为输入数据,该函数显示了输出。我们在console.log()函数中传递了“ Hello,World”作为输入数据或参数。
console.log('Hello, World!')
console.log(param1,param2,param3)可以接受多个参数。
console.log('Welcome', 'to', 30, 'Days', 'Of', 'JavaScript')
注释
示例:单行注释
//这是第一条注释
示例:多行注释
/ *这是一个多行注释
多行注释可以占用多行
* /
算术运算
console.log(2 + 3) // 加
console.log(3 - 2) // 减
console.log(2 * 3) // 乘
console.log(3 / 2) // 除
console.log(3 % 2) // 求余
console.log(3 ** 2) // 次方
环境
我们使用Visual Studio Code[win10自带软件]进行较大项目的开发
将JavaScript加入网页
-
行内脚本(Inline script)
在桌面上创建一个文件夹,然后在项目文件夹中创建一个index.html文件。然后粘贴以下代码,然后在浏览器中将其打开。
<!DOCTYPE html>
<html>
<head>
<title>30DaysOfScript:Inline Script</title>
</head>
<body>
<button onclick="alert('Welcome to 30DaysOfJavaScript!')">Click Me</button>
</body>
</html>
-
内嵌脚本(internal script)
内部脚本可以写在头部或正文中,但是最好将其放在HTML文档的正文中。首先,让我们写在页面的开头。
<!DOCTYPE html>
<html>
<head>
<title>30DaysOfScript:Internal Script</title>
</head>
<body>
<button onclick="alert('Welcome to 30DaysOfJavaScript!');">Click Me</button>
<script>
console.log("Welcome to 30DaysOfJavaScript");
</script>
</body>
</html>
-
外联脚本
与内部脚本类似,外部脚本链接可以位于标头或正文中,但最好将其放在正文中。我们应创建一个js文件,我们第一个js文件命名为introduction.js
console.log('Welcome to 30DaysOfJavaScript')
在头部外联
<!DOCTYPE html>
<html>
<head>
<title>30DaysOfJavaScript:External script</title>
<script src="introduction.js"></script>
</head>
<body>
</body>
</html>
-
多外联脚本
指有多个外联脚本组成,我们再新建helloworld.js文件
console.log('Hello, World!')
<!DOCTYPE html>
<html>
<head>
<title>Multiple External Scripts</title>
</head>
<body>
<script src ="./helloworld.js"></script>
<script src="./introduction.js"></script>
</body>
</html>
数据类型
- number
整数:形如-3,-2,-1,0,1,2,3....
浮点数:形如-3.5,1.2,1.0,2.5.....
- String
一堆在' '," ",` `中间的字符
'Asabeneh'
'Finland'
'JavaScript is a beautiful programming language'
"I love teaching"
'I hope you are enjoying the first day'
`We can also create a string using a backtick`
- Booleans
只返回true或者false
- Undefined
未赋值的变量或未有任何返回值的函数返回undefined
let firstName;
console.log(firstName); //not defined, because it is not assigned to a value yet
- Null
表示空值(empty value)
let emptyValue = null
检查数据类型
我们使用typeof操作符来检查一个确定数据的类型
console.log(typeof 'Asabeneh') // string
console.log(typeof 5) // number
console.log(typeof true ) // boolean
console.log(typeof null) // object type
console.log(typeof undefined) // undefined
变量
变量是数据的容器,用于将数据存储在内存位置的变量。声明变量后,将保留一个存储位置。将变量分配给值(数据)后,存储空间将被该数据填充。要声明变量,我们使用var,let或const关键字。
对于会更改的变量,我们使用let。如果数据完全不变,则使用const。
JavaScript变量名称不应以数字开头;不允许除$和_外的其他特殊符号;遵守camelCase约定;单词之间无空格。一些允许的变量名:
firstName
first_Name
$num_1
_num_1
无效变量名:
first-Name
1_Name
_num_#1
定义实例:(多行定义)
// Declaring different variables of different data types
let firstName = 'Asabeneh' // first name of a person
let lastName = 'Yetayeh' // last name of a person
let country = 'Finland' // country
let city = 'Helsinki' // capital city
let age = 100 // age in years
let isMarried = true
console.log(firstName, lastName, country, city, age, isMarried)
(单行定义)
// Variables can also be declaring in one line separated by comma
let name = 'Asabeneh', // name of a person
job = 'teacher',
live = 'Finland';
console.log(name, job, live);
作业
- Write a single line comment which says, comments can make code readable
- Write another single comment which says, welcome to 30DaysOfJavaScript
- Write a multiline comment which says, comments can make code readable, easy to use and informative
- Create a variable.js file and declare variables and assign string, boolean, undefined and null data types
- Create datatypes.js file and use the JavaScript typeof operator to check different data types. Check the data type of each variable
- Declare four variables without assigning values
- Declare four variables with assigning values
- Declare variables to store your first name, last name, marital status, country and age in multiple lines
- Declare variables to store your first name, last name, marital status, country and age in a single line
- Declare two variables myAge and yourAge and assign them initial values and log to the browser console.