JavaScript基础篇之基本语法
- 1、JavaScript的简介
- 2、JavaScript的基本语法
- 1.控制HTML的方式
- 2.注释
- 3.数据类型
- (1) 原始数据类型
- (2) 引用数据类型
- 4.变量
- 5.运算符
- 6.流程控制语句+特殊语法
已经学过Java的小伙伴可以非常容易入门啦,没有学过的也没关系,可以跟着本文进行JavaScript的入门!
1、JavaScript的简介
JavaScript:
概念: 是一种属于网络的高级脚本语言
功能: 已经被广泛用于Web应用开发,可以来增强用户和HTML页面的交互过程，可以来控制HTML元素，让页面有一些动态的效果，增强用户的体验。
我们说的JavaScript是由 ECMAScript + JavaScript自己特有的东西(BOM+DOM)组成 (ECMA欧洲计算机制造商协会, 是为解决在90几年客户端脚本语言乱象而制定出客户端脚本语言的标准编码方式也就是ECMAScript . 有兴趣的小伙伴可以去看一下JavaScript的发展史)
* JavaScript = ECMAScript + JavaScript(不同于其他客户端脚本语言BOM+DOM)
所以我们要学好JavaScript就要先学好 ECMAScript
我们先讲一下ECMAScript的基本语法
2、JavaScript的基本语法
1.控制HTML的方式
1.定义内部JS: 定义< script > 标签体内容就是JS代码
2.定义外部JS:定义< script >，通过src属性来引入外部的JS文件
注意：
1、 < script >可以定义在HTML页面的任何地方。但是定义的位置会影响执行顺序。
2、可以定义多个 < script >。
内部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>控制HTML</title>
<script></script> //内部JS
</head>
<body>
</body>
</html>外部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>控制HTML的方式外部</title>
<script src="a.js"></script> //需要定义js文件然后通过src属性进行导入
</head>
<body>
</body>
</html>2.注释
不同于HTML的注释,JavaScript的注释跟Java一样
HTML的注释 : <!-- -->
JavaScript的注释:
1. 单行注释：// 注释
2. 多行注释：/*
注释
*/3.数据类型
(1) 原始数据类型
原始数据类型(基本数据类型)：
1. number：数字。 整数/小数/NaN(not a number 一个不是数字的数字类型)
2. string：字符串
*注意 JavaScript里 "abcdef" 为字符串 "a" 也为字符串 'abc' 单引号的也为字符串
3. boolean: true 和 false
4. null：可以解释为 一个对象为空的占位符
5. undefined：未定义的。如果一个变量没有给初始化值，则会被默认赋值为undefined
(2) 引用数据类型
引用数据类型：对象
4.变量
变量: 一小块存储数据的内存空间
学过Java的应该知道,Java是一门强类型的语言 ,而JavaJavaScript是弱类型的语言什么是强、弱类型呢?
强类型：在开辟变量的存储空间时，定义了空间将来存储的数据的数据类型。只能存储固定类型的数据
弱类型：在开辟变量的存储空间时，不定义空间将来的存储数据类型，可以存放任意类型的数据。
语法: var 变量名 = 初始化值;
注意⚠️ JavaScript是弱类型的语言,所以在JavaScript中已经没有Java中的 int 、float、double等一些数据类型了,在JavaScript中我们定义变量是 只需要用 var来定义所有类型的变量是不是非常的方便!!!
在享受JavaScript的 var 定义所有变量的时候,那我们要怎么去辨别我们所定义的变量是什么类型的呢,接下来我们来了解一个运算符啊
* typeof运算符：获取变量的类型。<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>变量</title>
<script>
var num = 1;
var str = "abc";
var flag = true;
var str2 = null;
var str3 ;
document.write(typeof (num)+"<br>") //number
document.write(typeof (str)+"<br>"); //string
document.write(typeof (flag)+"<br>"); //boolean
document.write(typeof (str2)+"<br>"); //object 为什么是object类型？我们下面解释
document.write(typeof (str3)+"<br>"); //undefined
</script>
</head>
<body></body>
</html⚠️注意
我们用 typeof 运算 str2 (var str2 = null ;)时,得到的是object类型,这是为什么呢?
这实际上是 JavaScript 最初实现中的一个错误,然后被ECMAScript沿用了，
现在 null 被认为的是对象的占位符,从而解释来了这一矛盾,但从技术上说,它还是原始值。
5.运算符
- 一元运算符：只有一个运算数的运算符如 ++，-- ， + (正号)
++ --: 自增(自减)
* ++(–) 在前，先自增(自减)，再运算
* ++(–) 在后，先运算，再自增(自减)
var num = 3;
var a = ++num;
var b = num++;
document.write(num + "<br>"); // 5
document.write(a + "<br>"); // 4
document.write(b+"<hr>"); // 4- +(-)：正负号
- 注意：在JavaScript中，如果运算数不是该运算符所要求的类型，那么JavaScript的引擎会自动的将运算数进行类型转换,转换为符要求的类型
- 其他类型转number：
string转number：按照字面值转换。如果字面值不是数字，则转为NaN（不是数字的数字）
boolean转number：true转为1，false转为0
var c= +"123";
var d = +"123abc";
document.write(typeof (c)+"<br>"); // 得到： number
document.write(c+1);//得到： 124
document.write("<br>"); //换行
document.write(typeof (d)+"<br>"); //number
document.write(d+1); // 得到： NaN（不是数字的数字）
document.write("<hr>");
var flag1 = + true;
var flag2 = +false;
document.write(typeof (flag1) + "<br>"); // 得到：number
document.write(flag1 + "<br>");//得到 1
document.write(flag2 + "<br>");//得到 02. 算数运算符 + - * / % ...
var a = 2;
var b = 3;
document.write( a + b + "<br>"); // 5
document.write( b - a + "<br>"); // 1
document.write( a * b + "<br>"); // 6
document.write( a / b + "<br>"); // 0.666666666666666666
document.write( a % b + "<br>"); // 23. 赋值运算符 = += -+ ....
var a = 2;
a+=2;
document.write( a + "<br>"); // 4
a-=2;
document.write( a + "<br>"); // 2
a*=2;
document.write( a + "<br>"); // 4
a/=2;
document.write( a + "<br>"); // 24. 比较运算符 > < >= <= == ===(全等于)
两种比较方式
1、类型相同的： 直接比较
字符串：按照字典序进行比较。（字典序：按位逐一进行比较，直到得出大小为止）
2、类型不同： 先进行类型转换后进行比较
⚠️ === 全等于。 在比较之前，会先判断类型，如果类型不同，则直接返回 false
var a="abc";
document.write((3 > 4 ) + "<br>"); //false
document.write(("abc" > "acb" ) + "<br>"); //false
document.write(typeof (a)+"<br>"); //string
document.write(("123" == 123 ) + "<br>"); //true
document.write(("123" === 123 ) + "<hr>"); //false5. 逻辑运算符 && 与 ||或 ! 非
* 其他类型转boolean：
1. number类型：0 或 NaN 为假，其他都为真
2. string类型：除了空字符串("")，其他都为true
3. null 和 undefined 类型: 都为false
4. 对象：所有对象都为true
// boolean
var flag = true;
document.write(flag + "<br>");
document.write(!flag + "<br>");
document.write("<hr>");
// number
var num = 3;
var num2 = 0;
var num3 = NaN;
document.write(!num + "<br>"); // false (!num 先进行类型转化 3->true ， ！ture = false ）
document.write(!num2 + "<br>"); // true (!num2 先进行类型转化 0->fasle ， ！false = true ）
document.write(!num3 + "<br>"); // true (!num3 先进行类型转化 NaN->fasle ， ！false = true ）
// string
var str = "abc";
var str2 = "";
document.write(!str + "<br>"); // false (!str 先进行类型转化 "abc"->true ， ！true = false ）
document.write(!str2 + "<br>"); // true (!str2 先进行类型转化 ""->fasle ， ！false = true ）
// null & underfined
var obj = null;
var obj2 ;
var obj3 = undefined;
document.write(!obj + "<br>"); // true null&undefined:都是false
document.write(!obj2 + "<br>"); // true null&undefined:都是false
document.write(!obj3 + "<br>"); // true null&undefined:都是false
//对象
var obj4 = new Object();
document.write(!obj4 + "<br>"); // 4. 对象：所有对象都为true6. 三元运算符 ? : 表达式
* 语法： 表达式? 值1:值2; (判断表达式的值，如果是 true 则取值1，如果是 false 则取值2；)
var a = 6;
var b = 5;
var c = a > b ? "a>b":"a<b";
document.write(c); // a > b6.流程控制语句+特殊语法
1、JavaScript中特殊的语法(个人不建议使用)
1. 语句以;结尾，如果一行只有一条语句则 ;可以省略 (不建议)
<script>
var s = 2
document.write(s) //没有 ; 也可以得到 2
</script>2. 变量的定义使用var关键字，也可以不使用
那么用与不用有什么区别呢?
用: 定义的变量为局部变量
不用:定义的变量为全局变量(不建议)
若我们不用,可能会导致一些错误,所以不建议不用var
<script>
s = 2
document.write(s) //不会报错也可以得到 2
</script>2、流程控制语句(与Java的差不多不过swith语句有点差别)
1. if...else...
var s=0;
if(s===0) document.write(true); //true
else document.write(false);2. switch:在java JDK1.7后，switch语句可以接受的数据类型： byte int short char,枚举 ,String
⚠️ 在JavaScript中,switch语句可以接受任意的原始数据类型
var s ="abc"; /// 可以接受任何原始数据类型 s = abc、true、null undefined
switch (s) {
case 1:
document.write("number"); break;
case true:
document.write("boolean");break;
case "abc":
document.write("string"); break;
case null:
document.write("null"); break;
case undefined:
document.write("undefined"); break;
}3. while
var sum2=0;
var i=0;
while(i<=100){
sum2+=i;
i++;
}
document.write(sum2+"<hr>");//50504. do...while
var flag=0;
var sum3=0;
do {
sum3+=flag;
flag++;
}while (flag<=100)
document.write(sum3); //50505. for
var sum = 0;
for (var i = 0; i <= 100; i++) {
sum+=i;
}
document.write(sum);//5050
