JavaScript基础-EW帮帮网

1.JavaScript简介

javaScript语言的特点：

脚本语言：JavaScript是一种解释型的脚本语言，它不同与java、C等语言先编译后执行，而JavaScript可以直接执行。
基于对象：JavaScript是一种基于对象的脚本语言,它不仅可以创建对象,也能使用现有的对象。
简单:JavaScript语言中采用的是弱类型的变量类型,对使用的数据类型未做出严格的要求,是基于Java基本语句和控制的脚本语言,其设计简单紧凑。
跨平台：JavaScript与操作系统无关，只要有一个js引擎（运行环境），就可以运行js代码。目前大多数浏览器都自带js引擎，所以可以在浏览器中运行js代码。
嵌入式：需要在html页面上操作html元素，因此需要调用浏览器提供的操作html元素的接口（html dom接口），因此开发时要同时兼备html+css+javascript+dom的技能。

javaScript语言的版本： ECMAScript定义了javaScript的语法，由ECMA（欧洲计算机制造商协会）来定义。目前最新版本是ES2022

Java Script的三个主要组成部分是：

ECMAScript(核心)
DOM（文档对象模型）
BOM（浏览器对象模型）。

2.JavaScript基本结构

2.1.JavaScript基本结构

在一个html页面中，javaScript代码可以写在script标签中。

<script type="text/javascript" language="JavaScript">
  //在控制台输出“hello world！”
  console.log('hello world!');
</script>

注意：

script标签中的type属性与language属性都可以省略。
行尾可以写分号，也可以不写；但是，初学者建议都要写分号。
单行注释：// 多行注释： / /

2.2.JavaScript在页面中的位置

可以将JavaScript代码放在html文件中任何位置。

放在head部分: 最常用的方式是在页面中head部分放置script元素，head部分会先加载，浏览器解析head部分就会执行这个代码，然后才解析页面的其余部分。所以进行页面显示初始化的js必须放在head里面。
放在body部分: JavaScript代码在网页读取到该语句的时候就会执行。也就是按照顺序执行。
script标签可以有多个。

2.3.网页中引用JavaScript的方式

可以把HTML文件和JS代码分开,并单独创建一个外部JavaScript文件（简称JS文件），其文件后缀通常为.js，然后将JS代码直接写在JS文件中。

注意：在JS文件中，不需要script标签,直接编写JavaScript代码就可以了。

JS文件不能直接运行，需嵌入到HTML文件中执行，我们需在HTML中添加如下代码，就可将JS文件嵌入HTML文件中。

<script src="hello.js"></script>

3.JavaScript基本语法

3.1.变量的声明与赋值

javascript是弱数据类型语言，声明时不需要指定数据类型。数据类型完全由值类型决定。

3.1.1.使用let声明变量

声明变量语法： let 变量名 = 变量值；

let num = 10;
console.log(num);

注意：

let是关键词，后面跟变量名。表示声明一个变量，
变量的数据类型由所赋值的类型来决定。

变量的命名规范：

变量首字母必须使用字母、下划线( _ )或者美元符( $ )。
之后可以使用任意多个英文字母、数字、下划线或者美元符组成。
变量名区分大小写，如:A与a是两个不同变量。
不能使用JavaScript关键词与JavaScript保留字。
变量名最长为255个字符（实际上可以超过）。

3.1.2.使用var声明变量

声明变量语法： var 变量名 = 变量值；

var num = 10;
console.log(num);

注意：有关var与let的区别，在函数作用域中在做讲解。

3.2.js中的数据类型

js中的数据类型有六种：

undefined-未定义类型：未被赋值的变量，值为undefined
boolean-布尔类型：值为true/false
number-数字类型：任何数字（NaN也是number类型，表示“非数”）
string-字符串类型：值用引号（单引号或者双引号）括起来
object-对象类型：null、数组、Date等
function-函数类型：function函数

注意：以上数据类型中，undefined、boolean、number、string也被称为原始数据类型。

可使用typeof获取变量数据类型：

let num;   
console.log(typeof num)       //返回undefined
num = 10;
console.log(typeof num)       //返回number
num = 'abc';
console.log(typeof num)       //返回string
num = true;
console.log(typeof num)       //返回boolean
function getDate(){}
console.log(typeof getDate)   //返回function
num = [];
console.log(typeof num)       //返回object
num = new Date();
console.log(typeof num)       //返回object
num = null;
console.log(typeof num)       //返回object

3.3.特殊值 NaN、Infinity

NaN，即非数值(Not a Number)是一个特殊的值
用于表示一个本来要返回数值的操作数未返回数值的情况(这样就不会抛出错误了)。

console.log(parseInt('a'));                 //NaN

NaN和任何数据进行运算结果仍然是NaN。因此，想要判断一个变量是不是NaN时，不能使用这种形式：a==NaN，而要使用isNaN()函数：
isNaN()函数在接收到一个值之后，会尝试将这个值转换为数值，如果可以转就返回false:

console.log(isNaN(5));     //false
console.log(isNaN('5'));   //false
console.log(isNaN('a'));   //true

Infinity 即无穷，是一个特殊的值

console.log(10/0);    //Infinity

3.4.js中的运算符

3.4.1.==与===

== 相等运算符运行时，“==”操作符会自动将两端的操作数转换为同一种数据类型后再作比较。

console.log(1=='1');    //true

=== 严格相等（等同运算符） “===”是严格意义上的相等，两个值和它们的类型完全一致时才返回true。

console.log(1==='1');    //false

3.4.2.js中的数据类型转换

隐式转换：减、乘、除可自动进行隐式转换。

let num1 = '10';
let num2 = '5';
console.log(num1-num2)    //5
console.log(num1*num2)    //50
console.log(num1/num2)    //2

强制转换：
parseInt() ：将字符串转换成整数。 parseFloat() ：将字符串转换成浮点数

let str1 = '10';
let str2 = '10.5'
console.log(parseInt('10')+parseFloat('10.5'));  //20.5

4.流程控制语句

4.1.if语句

if-else语句：

let score = 60;
if(score>=60){
  console.log('及格了');
}else{
  console.log('不及格');
}

多重if else语句

let score = 80;
if(score>=90){
  console.log('优秀');
}else if(score>=80&&score<90){
  console.log('良好');
}else if(score>=60&&score<80){
  console.log('中等');
}else{
  console.log('不及格');
}

4.2.switch语句

let level = 1;
switch (level) {
  case 1:
    console.log('第一名')
    break;
  case 2:
    console.log('第二名')
    break;
  case 3:
    console.log('第三名')
    break;        
  default:
    console.log('重考')
    break;
}

4.3.while语句

let i = 0;
while(i<5){
  console.log(i);
  i++;
}

4.4.do while语句

let num = 123456;
do{
  console.log(num%10);
  num = Math.trunc(num/10);   //Math.trunc()方法去除数字的小数部分，保留整数部分。
}while(num!=0);

4.5.for语句

for(let i=0;i<5;i++){
  console.log(i);
}

JavaScript基础