本文详细介绍了JavaScript的基础知识，包括Js的定义、特点、代码编写格式，以及语法要点如数据类型、变量、运算符等。讲解了如何在HTML中嵌入和引用外部JS文件，还探讨了变量的声明、数据类型转换、运算符的使用，以及比较运算符等核心概念。
一、Js概述
1.1 Js定义
JavaScript是一种具有面向(基于)对象能力的、解释型的程序设计语言(客户端脚本语言:不能独立运行，要依赖于网页)。
基于对象：提供好了很多对象，可以直接拿过来使用
事件驱动：html做网站静态效果，javascript实现动态效果
客户端：专门指的是浏览器
JS的作用：操作HTML和CSS
JavaScript 中的所有事物都可看作是对象：字符串、数字、数组、日期，等等。
在 JavaScript 中，对象是拥有属性和方法的数据(或者说对象的成员有两个:属性和方法)。
可自定义/Js中也有可直接供使用的对象。
JavaScript 对象详解
1.2 Js特点
- 松散型：JS语言核心与C、C++、Java相似，但他的变量不必有一个明确的类型，和shell脚本类似
- 解释型：不需要编译
（java源代码—>编译(.class字节码文件)—>运行字节码文件）
（js源代码—>执行） - 基于对象：我们可以直接使用JS已经创建的对象(不需先创建)
- 安全性：不允许访问本地硬盘，不能将数据写入到服务器
- 跨平台：js依赖于浏览器，与操作系统无关
JS提供的对象和方法就保存在以上对象模型中。
还是用的老编辑器vs code
1.3 Js代码编写格式
有两种方法：
- 嵌入Html文件
- 声明单独Js文件，再将html文件和Js文件关联
1.3.1 在页面中直接嵌入Js
<script language="javascript">
js代码
</script>
<!--type也可以-->
<script type="text/javascript">
js代码
</script>
注：js代码可插入在< head>< /head>标签之间，也可放在< body>< /body>标签之间。最常用的是放在< head>< /head>
js注释
单行注释：//注释内容
多行注释：/* 注释内容 */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS01</title>
<script language="javascript">
//当打开页面时，弹出hello world
alert("hello world");
</script>
</head>
<body>
<!-- <script type="text/javascript"></script> -->
</body>
</html>
1.3.2 引用外部的Js
用途：对于复杂脚本或者同一段代码会被页面所使用
该文件扩展名是.js
在script标签中利用src属性
关联格式：
<script language="javascript" src=".js后缀的文件路径">
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JS02</title>
<script type="text/javascript" src="./外部js.js">
</script>
</head>
<body>
</body>
</html>
注意！
去测试一下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script language="javascript" src="./外部js.js">
//如果当前script标签引用了外部js文件，那么在这对标签中就不能再写任何的JS程序的代码，否则无效
alert("我是嵌套的js脚本代码1");
</script>
<!--一个页面中可以出现多个script标签，执行的顺序是从上向下的执行-->
<script type="text/javascript">
alert("我是嵌套的js脚本代码");
</script>
</head>
<body>
</body>
</html>
二、Js的语法
-
js的变量区分大小写
username和userName是两个不同的变量 -
每行结尾的分号可有可无，若语句的结束处没有分号，那么js会自动将这行代码的结尾作为语句的结尾 但是，严格要求自己，结束加分号
-
标识符
即指变量、函数、属性的名字，或者函数的参数。
标识符可以是下列格式规则组合起来的一个或多个字符
- 第一个字符必须是一个字母、下划线(_)或一个美元符号($)
- 其他字符除了可以是上面三种字符外还可以是数字
- 关键字、保留字、true、false和null不可以作为标识符
例：myName、book123等 -
定义变量 需要用var关键词进行修饰,不用var也可以定义变量,为弱类型(强烈不推荐)
格式：var 变量名=变量值
例：var num=10; 声明了一个整型的变量
var str="testing"; 声明了一个字符串类型的变量
var a; 声明了一个undefined数据类型的变量
var a, b, c,d;声明了多个变量,中间用逗号隔开,都未赋值 -
使用大括号标签代码块 {//代码块}
{
语句块1;
语句块2;
语句块3;
}
执行顺序：1--> 2--> 3
2.1 Js的基本数据类型
通过typeof运算符或者函数，查看指定变量的数据类型
格式一：typeof(变量名); 先运算括号内结果,然后typeof检测结果的数据类型
格式二：typeof 变量名:只能检测紧跟着的一个变量
两种格式的区别:
第一个输出number200,第二个输出number
当typeof连用,typeof的返回值一定是字符串string
1. 数值型Number
整型
- 123
十进制 - 0b100
二进制,以0b开头 - 0123
八进制，以0开头 - 0x123
十六进制，以0x开头
在console.log();控制台输出任何其他进制的数字,都会自动转成 十进制.
浮点型
整数部分加小数部分组成，只能用十进制来表示，不过可以使用科学计数法
- 3.1415926
标准形式的浮点数 - 3.14E9
采用科学计数法来表示，代表的是3.14乘以10的9次方
NaN
Not a Number : 非数字
2. 字符串型String
用单引号或者双引号包裹起来的
var str='hello';
var s="world";
若想单引号双引号同时出现：
1.单引号l里面包含双引号 var s='我是“ye”';
2.双引号里面包含单引号 var str="我是‘tom’";
3. 布尔型Boolean
- true 在js中非0的整数代表true,计算机存储为1
- false计算机存储为0
4. 转义字符
以反斜杠开头的不可显示的特殊字符
\b 退格 \n 换行 \t Tab符 \r 回车符 \' 单引号 \" 双引号 \\ 反斜杠
5. 空值null
null，用于定义空的或者不存在的引用
var a=null;
查找数据类型会返回object(空对象指针)
判空时没有对应的关键词，用“”
6. 未定义值undefined
把变量声明出来但没有赋值
var s;
查看返回undefined关键字。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script type="text/javascript">
//声明两个变量 都是数值型
// var num=10;
//var f=3.14;
//查看两个变量的数据类型typeof 数值型number
// alert(typeof(num));
//alert(typeof f);
//声明两个变量
// var s='test';
// var str="web";
// //查看数据类型 string
// alert(typeof s);
// alert(typeof str);
//声明一个boolean类型的变量
// var boo=true;
// //显示
// alert(typeof(boo));
// alert("hello,\nworld");
//定义一个空值 返回object对象
// var a=null;
// alert(typeof a);
//声明变量，不赋值
var un;
alert(typeof un);
</script>
</body>
</html>
除了以上基本数据类型，还有复杂数据类型，function，object，array，后面再补充。
2.2 数据类型转换
1.转成数值类型
方法一 : Number(你要转换的数据)
注: 会将你要转换的内容当作一个整体来看待, 能转换成数字结果,输出就是数字结果;不能转换成数字结果,输出就是NaN.
方法二 : parseInt(你要转换的数据)
注: 会将你要转换的内容逐位来看,如果第一位就不能转换成数字,那么直接给NaN;如果第一位可以,就看第二位,第一位保留,以此类推,直到一个不能转换成合法数字的位置为止.
parseInt不认识小数点,所以也有取整的功能
方法三 : parseFloat(你要转换的数据)
注: 可以识别小数点
方法四 : 取正负值 +变量 或者 -变量
注: 和Number的解析规则相同
方法五 : 非 加法的数学运算
注: 和Number的解析规则相同
a*1
a-0
a/1
输出100 100.234
2.转成字符串类型
方法一: String(要转换的数据)
注:任何数据类型都能转换; 注意大写S
方法二: 要转换的数据.toString()
注: undefined和null不能转换,它俩没有toString功能,会报错:Uncaught TYpeError:Cannot read property 'toString' of undefined/null
方法三: 加法运算
注: 在js中,加号(+)有两个意义
1.进行字符串拼接 : 只要符号任意一边是字符串的时候,就是字符串拼接
2.进行数学运算 : 只有两边都是数字或者布尔的时候,会进行数学运算
分别输出: 334 234 1212 1234
3.转成布尔类型
方法一 : Boolean(要转换的数据)
注: 在js中,只有5个内容转换成false:
0
空字符串('')
NaN
undefined
null
其他所有内容转换完毕都是true
只有这5个输出都是false.
2.3 变量的定义与使用
1.变量的命名规则
变量名由字母、数字、下划线组成，但是不能以数字开头。
不能使用javascript中的关键字
严格区分大小写
username userName是不同的两个变量
2. 变量的声明
一个变量的数据类型是由传递过来的值决定的
格式一：var 变量名; 该变量默认值是undefined
格式二：var 变量名=变量值;
(不推荐)可以使用一个var声明多个变量，比如
var 变量名1,,变量名2,变量名3…
3. 变量的分类
全局变量
1.在js脚本内，在函数体外，无论是否有var修饰，都属于全局变量。
2.在函数体内部声明的变量，但是变量没有用var来修饰
作用域：作用于整个代码的变量
局部变量
在函数体内部，使用var声明的变量
作用域：只作用于函数体内的变量
JS中函数的声明格式： function 函数名(){ 函数体 }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
//脚本内，函数外的变量--全局变量
var s;
a=10;
//声明一个test函数
function test(){
//声明一个变量，在函数体内部声明，但没有var修饰，也是全局变量
b=20;
//声明一个变量,用var修饰，是局部变量
var c=10;
}
//弹出a的值 可以弹出，因为是全局变量
alert(x);
//弹出c的值 报错，不可以弹出，因为是局部变量
alert(c);
</script>
</head>
<body>
</body>
</html>
2.4 运算符
1. 赋值运算符
将等号右边的值赋值给等号左边的变量
- 简单赋值运算符 var userName=“tom”;
- 复合赋值运算符
注：最后三个是逻辑运算符和赋值符号搭配。
从上到下：
&与 两个都是true 结果才是true
|或 其中一个为true 结果就为true
^异或 相同为假false，不同为真true
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>运算符</title>
<script type="text/javascript">
// //定义两个变量
// var a=20;
// var b=10;
// //赋值运算符
// a+=b;
// alert(a); //30
// a-=b;
// alert(a); //20 我慢慢的听我掉坑的声音
// a/=b;
// alert(a); //2
var a=true;
var b=false;
//逻辑与
a&=b;
alert(a); //0-->false
//逻辑或
a|=b;
alert(a); //注释掉与后-->0
//异或
a^=b;
alert(a); //注释掉或后 -->1
</script>
</head>
<body>
</body>
</html>
2. 算数运算符
1.加+ 减- 乘* 除/ 取余% 取幂**
2.++ 自增运算符 var x=10;
++在变量前 ++x ---> 先计算 后赋值 例：var m=(++x); 则x+1=11 m=11
++在变量后 x++ ---> 先赋值 后计算 例：var n=x++; 则n=x=10 x++,x=11
3.-- 自减运算符
--在变量前 --x ---> 先计算 后赋值
--在变量后 x-- ---> 先赋值 后计算
注：对于++或者–运算符来说，它们只修饰变量，只针对变量的操作； 除法运算时，0不能作为除数，若0是除数，则返回结果为infinity。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>算术运算符</title>
<script language="javascript">
var x=10;
var y=3;
var m=0;
var n=0;
var k=0;
var g=0;
m=-x++; //m=-x m=-10 x++ x=11 ++或者--运算符只修饰变量，只针对变量的操作,和变量前的符号无任何关系。
alert(m);
alert(x);
// //取余
// alert(x%y); //0
//自增运算
// m=++x;
// alert(m); //11
// alert(x); //11
// n=x++;
// alert(n); //11
// alert(x); //12
//自减运算
// k=--y;
// alert(m); //2
// alert(y); //2
// g=y--;
// alert(n); //2
// alert(y); //1
</script>
</head>
<body>
</body>
</html>
3. 比较运算符
1.< > <= >=
2.== 等于 只根据表面值进行判断，不涉及数据类型 例：alert("11"==11); 返回true
3.=== 绝对等于 不仅根据表面值，还要判断数据类型是否一致
4.!= 只根据表面值进行判断，不涉及数据类型
5.!== 不绝对等于 不仅判断表面值，还要判断数据类型是否一致
注：不可以写成数学上的表达：0<age<14,这是错误的！得写成age>0 && age<14
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>比较</title>
<script language="javascript">
var a="10";
var b=10;
var c=20;
//大于等于
alert(b>=c); //false
//== 只看值
alert(a==b); //true
//=== 看值和数据类型
alert(a===b); //false
</script>
</head>
<body>
</body>
</html>
4. 逻辑运算符
! 逻辑非 取反
&& 逻辑与 只有当两个操作数的值都为true，结果才为true
|| 逻辑或 只要两个操作数中有一个为true，则结果就为true
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>逻辑</title>
<script>
var a=20;
var b=10;
//逻辑与
alert(a>b&&a<b); //false
//非运算
alert(!(a>b&&a<b)); //true
</script>
</head>
<body>
</body>
</html>
5. 条件运算符(三元运算符)
格式：
布尔表达式?结果1:结果2;
布尔表达式结果为true，则走结果1
布尔表达式结果为false，则走结果2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>条件</title>
<script>
var a=30;
var b=20;
var res=(a>b?a++:--b);
//弹出
alert(a); //31
alert(b); //20
alert(res); //30
</script>
</head>
<body>
</body>
</html>
177
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
