Javascript基础笔记（一）

1. JavaScript的使用

1.1 标签引用

在script标签中写入js代码，如下:

<script>
	alert('hello world');
</script>

1.2 文件引用

main.html

<script src='main.js'></script>

main.js

<script>
	alert('hello world');
</script>

知识补充：script标签放在哪都可以执行，如果是引用js文件，建议放在body标签内的底部，后续文章中会解释原因

2.JavaScript基本语法

Javascript语法和Java语法类似，每个语句以；结尾，语句块则使用 {…} 。虽然Javascript不强制要求每个语句后都要添加；符号，但是在开发中建议语句后添加；符号。

3.JS注释

3.1 单行注释

在语句前添加两个 //（英文斜杠）即可，如下所示

<script>
	// alert('hello world');
</script>

3.2多行注释

在语句前后添加 /* 和 */ 即可，如下所示

<script>
	/* 
	alert('hello world');
	console.log('byebye');
	*/
</script>

4.JS输出输入语句

4.1弹出式提醒窗口中的输入框

<script>
	prompt('请输入一个数字');
</script>

4.2弹出式提醒窗口

<script>
	alert('hello world');
</script>

4.3控制台输出语句

<script>
	//console控制台输出语句，用来开发测试所用
	console.log('bye bye');
</script>

在页面中按下F12会跳出开发工具，在功能栏中找到控制台（该图为edge，Chrome则是console)

5.变量

5.1什么是变量？

用简单的话来说，变量是一个存放东西的盒子
变量是用于存放数据的容器，通过变量名获取数据，或者修改数据

5.2如何声明并使用变量

5.2.1 声明变量的3种方法

Var声明

var可以声明全局或函数级别作用域的变量，使用方法如下

<script>
	var myname = '叶落';
	console.log(myname);

	var name,age,sex;
	name = 'yeluo',age = 18,sex ='男';
	console.log(name,age,sex);

	var a = 10,b = 20,c = 30;
	console.log(a,b,c);
</script>

Let声明

let是es6中新加的功能，用于声明变量，它可以声明块级别作用域的变量，使用方法和var相差无几

<script>
	let myname = '叶落';
	console.log(myname);

	let name,age,sex;
	name = 'yeluo',age = 18,sex ='男';
	console.log(name,age,sex);

	let a = 10,b = 20,c = 30;
	console.log(a,b,c);
</script>

Const声明

const所声明的是常量，因为它在代码运行中不能修改，并且不能重复声明，声明时必须赋值，否则报错

<script>
	const MY_NAME = ‘yeluo';
	console.log('MY_NAME')
</script>

const声明可以使用大小写字母来声明，但通常全部使用大写字母

5.2.2 三种声明变量（常量）方法的区别

Var声明

var的作用域

<script>
	// var写在最外层函数时，任何var声明的变量可以在全局或函数内使用变量
	var a=2；
	function oneFunction(){
		console.log(a);
	}
	oneFunction();
	
	// 如果在函数中用var声明，那么这个变量只能在该函数中使用
	var b=1;
	function newFunction(){
		var hello='world';
	}
	console.log(hello) //Uncaught ReferenceError: hello is not defined
	// 在函数外使用变量hello则报错
</script>

var可以重新声明和修改

var在相同作用域下可以执行下列操作

<script>
	var hello = 'hello';
	var hello = 'world';
	//或
	var world = 'world';
	world = 'hello';
</script>

Let声明

let作用域

let是块级作用域，块级作用域是被一对大括号所包裹的一段代码，let的作用域和var大致相同

<script>
	let greeting = 'say Hi';
	let times = 4;
	if (times > 3) {
		let hello = 'say Hello World';
		console.log(hello); // say Hello World
		console.log(times); // 4
	}
		console.log(hello); // Uncaught ReferenceError: hello is not defined
</script>

let可以修改但不能被重新声明

和var一样，在同作用域里可以修改let声明的变量，但是let不能重新声明变量，如下所示

<script>
	let hello = 'hello';
	hello = 'world';
	console.log(hello);
	
	let world = 'world';
	let world = 'hello'; // Uncaught SyntaxError: Identifier 'world' has already been declared
</script>

如果let声明在不同作用域中声明了相同的变量，则不会报错:

<script>
	let a = 5;
	if (a>4) {
		let a = 'hello';
		console.log(a); // "hello"
	}
	console.log(a); // "5"
</script>

Const声明

const作用域

const作用域和let作用域一样，都属于块级作用域

6.JS运算符

6.1算术运算符（➕，➖，*，/，%，➕➕，➖➖）

<script>
	let a=6,b=2;
	console.log(a+b)
	console.log(a-b)
	console.log(a*b)
	console.log(a/b)
	console.log(a%b)
	console.log(a++)
	console.log(a--)
</script>x

知识补充：
对于自增（自减）符号在变量后的，先使用再进行自增（自减）。自增（自减）符号在变量前的，先进行自增（自减）再使用

<script>
	var a=5,b;
	b=a++;
	console.log(a,b)
	var a=10,b;
	b=++a;
	console.log(a,b)
</script>

6.2关系运算符（>,<,<=,>=）

<script>
	if(5>3) {console.log(true)} else {console.log(false)}
	if(3>5) {console.log(true)} else {console.log(false)}
	
	if(10<1) {console.log(true)} else {console.log(false)}
	if(1<10) {console.log(true)} else {console.log(false)}
	
	if(3<=5) {console.log(true)} else {console.log(false)}
	if(5<=3) {console.log(true)} else {console.log(false)}
		
	if(10>=1) {console.log(true)} else {console.log(false)}
	if(1>=10) {console.log(true)} else {console.log(false)}
</script>

6.3赋值运算符（=，+=，-=，*=，/=，%=）

<script>
	var a=10；a+=5;  //等同于a=a+5
    var b=20;b-=10;	 //等同于b=b-10
    var c=30;c*=2;   //等同于c=c*2
    var d=40;d/=10;  //等同于d=d/10
    var e=50;e%=8;   //等同于e=e%8
    console.log(a,b,c,d,e);
</script>

6.4逻辑运算符（&&，|| ，!）

• 与（&&）
  布尔型数据进行与运算时，所有的运算数据值都为真，整个式子结果才为真。如果其中一个或两个运算数据值为假，则与的结果也是假

if(true && true) console.log('yes'); //输出yes
if(false && false) console.log('yes'); //不输出yes
if(false && true) console.log('yes'); //不输出yes
if(true && false) console.log('yes'); //不输出yes

• 或（||）
  布尔数据进行或运算时只要有一个值为真则整个运算式值也为真

if(true || true) console.log('yes'); //输出yes
if(false || false) console.log('yes'); //不输出yes
if(false || true) console.log('yes'); //输出yes
if(true || false) console.log('yes'); //输出yes

• 非（!）
  只能用于单个运算数据。运算数据值为真时结果为假，反之结果为真

console.log(!true); //输出false
console.log(!false); //输出true

6.5 比较运算符

• 相等运算（==）
  使用 == 来比较两个变量或值时，即使两个变量或值的类型不同，则自动进行类型转换后再进行比较

var a = 123, b = "123";
if (a == b) {console.log(true)} else{console.log(false)} //输出true

• 严格相等运算（===）
  === 判断两个变量或值是否全等，如果两个变量或值的类型不同，则会直接输出false

var a = 10，b = "10";
if (a === b) {console.log(true)} else{console.log(false)} //输出false

• 不相等运算（!=）

var a = 114514,b = "你好，世界";
if (a != b) {console.log(true)} else{console.log(false)} //输出true

• 严格不相等运算（!==)

var a = "hello world"，b = 1818;
if(a !== b) {console.log(}

7.运算符优先级

8.条件语句

8.1 if语句

if语句在指定条件下结果为true时，执行代码块

a=20
if(a>10){
	console.log("a比10大"); //输出'a比10大'
}

8.2 else语句

else语句则是在if语句中结果为false时，执行代码块

if(a>5){
	console.log("a大于5"); //输出'a大于5'
} else {
	console.log("a小于5"); //输出'a小于5'
}

8.3 else if语句

else if语句和if语句相同

if(c>15){
	console.log("c大于15") //如果c大于15则输出c大于15
}else if(c=15){
	console.log("c小于15") //如果c小于15则输出c小于15
}else{
	console.log("hello world") //上述条件都不为true则输出hello world
}

End…

乱写了一大通，有错在所难免，还望各位指出改正。
先暂时写到这吧，脑子有点堵。