脚本宝典收集整理的这篇文章主要介绍了JavaScript基础知识,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
JavaScript
(简称JS
):是一种具有函数优先的轻量级、解释型或即时编译型的编程语言;
使用 JS
可以做什么:
node.js
)Electron, VSCode
)app
开发JavaScript之父:布兰登.艾奇
骨
)皮
)魂
)ECMAScript(简称 ES)
: JavaScript 语法
ECMAScript
:这是一套 “标准”, 无论是啥样的JS
引擎都要遵守这个标准来实现;
DOM
: 页面文档对象模型, 对页面中的元素进行操作BOM
: 浏览器对象模型, 对浏览器窗口进行操作直接嵌入到
html
元素的内部;
<input type="button" value="点我试试" onclick="alert('试试就试试')">
写到
script
标签中;
<script>
alert("点我有惊喜");
</script>
步骤:
.js
文件alert("点我看看");
<body>
<script src="外部文件.js"></script>
</body>
单行注释 // 多行注释 /* */ 快捷键:Ctrl+l
输入内置函数:prompt(string)
输出内置函数:alert(string)
控制台输出函数:console.log(string)
console
是一个js
中的 “对象”.
表示取对象中的某个属性或者方法,可以直观理解成 “的”;console.log
就可以理解成使用 “控制台” 对象 “的”log
方法;
代码如下:
<!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>
</head>
<body>
<!-- 输入内置函数 -->
<input type="button" value="prompt" onclick="prompt('请输入姓名:')">
<br>
<!--输出内置函数 -->
<input type="button" value="alert" onclick="alert('弹出显示hello')">
<br>
<!-- 控制台打印输出 -->
<input type="button" value="console.log" onclick="console.log ('控制台显示内容')">
</body>
</html>
prompt 显示:
alert显示: console.log 显示:var let
var name = 'zhangsan';
let age = 20;
(1)
JS
的变量类型是程序运行过程中才确定的(运行到=
语句才会确定类型); (2)随着程序运行, 变量的类型可能会发生改变;
<script>
var a=10;
a="hello";
console.log(a);
</script>
结果显示:
JS
中内置的几种类型:
number
: 数字,不区分整数和小数;boolean
: true 真, false 假;string
: 字符串类型;undefined
: 只有唯一的值 undefined
,表示未定义的值;null
: 只有唯一的值 null
,表示空值;还有一些特殊数字值:
Infinity
: 无穷大, 大于任何数字,表示数字已经超过了JS
能表示的范围;-Infinity
: 负无穷大, 小于任何数字,表示数字已经超过了JS
能表示的范围.NaN
: 表示当前的结果不是一个数字;
此处要注意:数字会隐式转换为字符串
<script>
var a=10;
console.log(a+'hello');
</script>
输出结果:
字符串字面值需要使用引号引起来, 单引号双引号均可;
<body>
<script>
var b="hello";
var c='world';
var d=haha; //报错显示
console.log(b);
console.log(c);
console.log(d);
</script>
</body>
报错信息:
注:如果字符串中本来已经包含引号,则要搭配使用单双引号;方法:String
的 length
属性;
<!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>
</head>
<body>
<script>
var b="hello";
var c='哈哈';
console.log(b.length);
console.log(c.length);
</script>
</body>
</html>
使用
+
号进行拼接;数字与字符串也可以进行拼接
;
表示 “真” 和 “假”,
Boolean
参与运算时当做1
和0
来看待;
三种情况:
undefined
, 是 undefined
类型;<body>
<script>
var b;
console.log(b); //undefined
</script>
</body>
结果如下:
undefined
和字符串进行相加, 结果进行字符串拼接;<body>
<script>
var b;
console.log(b+"hello");
</script>
</body>
结果显示:
undefined
和数字进行相加, 结果为 NaN
;<body>
<script>
var b;
console.log(b+10);
</script>
</body>
结果显示:
null
表示当前的变量是一个 “空值”;
<!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>
</head>
<body>
<script>
var b=null;
console.log(b+10);
console.log(b+"hello");
</script>
</body>
</html>
结果显示:
注意区分null
和 undefined
都表示取值非法的情况, 但是侧重点不同;null
表示当前的值为空 (相当于有一个空的盒子);undefined
表示当前的变量未定义 (相当于连盒子都没有);(1)算术运算符:
+ , - ,* ,/ ,%
(2)赋值运算符:= ,+= ,-=,*=,/=,%=
(3)自增自减:++,--
(4)比较运算符:< ,>, <=,>=,等于,!=,===(不会进行隐式类型转换)
(5)逻辑运算符:&& ,|| ,!
(6)位运算符:&
按位与,|
按位或,~
按位取反,^
按位异或 (7)移位运算符:<<
左移,>>
有符号右移(算术右移),>>>
无符号右移(逻辑右移)
语法与
Java
相同;下面直接举例:
示例:
判断一个数为奇数还是偶数;
代码如下:
<!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>
</head>
<body>
<script>
var num = 10;
if (num % 2 == 0) {
console.log("num 为偶数");
} else {
console.log("num 为奇数");
}
</script>
</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>switch</title>
</head>
<body>
<script>
var day = prompt("请输入星期:");
switch (parseInt(day)) {
case 1:
console.log("今天星期一");
break;
case 2:
console.log("今天星期二");
break;
case 3:
console.log("今天星期三");
break;
case 4:
console.log("今天星期四");
break;
case 5:
console.log("今天星期五");
break;
case 6:
console.log("今天星期六");
break;
case 7:
console.log("今天星期天");
break;
default:
console.log("输入有误");
}
</script>
</body>
</html>
格式
: while (条件) { 循环体; }
执行过程:
true
, 执行循环体代码;false
,结束循环;示例:
打印输出1-10
代码如下:
<!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>打印1-10</title>
</head>
<body>
<script>
var num = 1;
while (num <= 10) {
console.log(num);
num++;
}
</script>
</body>
</html>
结果显示:
搭配 continue
找到 100 - 200 中所有 3 的倍数;
代码如下:
<!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>3的倍数</title>
</head>
<body>
<script>
var num = 100;
while (num <= 200) {
if (num % 3 != 0) {
num++;
continue;
}
console.log("100-200之间3的倍数有:" + num);
num++;
}
</script>
</body>
</html>
搭配 break
代码如下:
<!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>3的倍数</title>
</head>
<body>
<script>
var num = 100;
while (num <= 200) {
if (num % 3 == 0) {
console.log("100-200之间第一个3的倍数为:" + num);
break;
}
num++;
}
</script>
</body>
</html>
结果显示:
格式
: for (表达式1; 表达式2; 表达式3) { 循环体 }
执行过程:
示例:
for循环实现打印1-10
<!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>
for (var num = 1; num <= 10; num++) {
console.log(num);
}
</script>
</body>
</html>
结果显示:
创建方式:
new
关键字创建代码如下:
<body>
<script>
// 方式一:
var arr=new Array();
console.log(arr);
// 方式二:
var arr=[1,2,3];
console.log(arr);
</script>
</body>
结果如下:
使用下标的方式访问数组元素;
代码如下:
<!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>
</head>
<body>
<script>
var arr = ['小猪佩奇', '小猪乔治', '小羊苏西'];
console.log(arr[0]);
console.log(arr[1]);
console.log(arr[2]);
arr[2] = '小猫凯迪';
console.log(arr);
</script>
</body>
</html>
修改后结果:
三种方式:
length
新增代码如下:
<body>
<script>
//方式1:
var arr = [9,3,4,1];
arr.length=6;
console.log(arr);
console.log(arr[4],arr[5]);
</script>
</body>
结果显示:
<body>
<script>
var arr = [];
arr[2] = 10;
console.log(arr)
</script>
</body>
push
追加元素<body>
<script>
let arr = [1, 2, 3];
//添加元素
arr.push(4);
console.log(arr); //1 2 3 4
</script>
</body>
使用
splice
方法删除元素;
格式:
数组对象.splice(num 1,num2);
num1
:表示从索引num1
开始删除元素;num2
: 删除num2
数量个元素;
代码如下:
<body>
<script>
var arr = [9, 5, 2, 7];
// 第一个参数表示从下表为 2 的位置开始删除. 第二个参数表示要删除的元素个数是 1 个
arr.splice(2, 1);
console.log(arr); //9 5 7
</script>
</body>
// 创建函数/函数声明/函数定义
function
函数名(形参列表) { 函数体return
返回值; }// 函数调用 函数名(实参列表) // 不考虑返回值 返回值 = 函数名(实参列表) // 考虑返回值
其中:return
可有可无;
需要注意的是:
示例:
<body>
<script>
function hello() {
console.log("hello");
}
hello();
</script>
</body>
结果如下:
实参和形参之间的个数可以不匹配, 但是实际开发一般要求形参和实参个数要匹配;
代码如下:
<body>
<script>
//调用函数
var result = sum(1, 2, 3);
console.log(result);//3
result = sum(1);
console.log(result);//NaN
//函数声明/定义
function sum(num1, num2) {
return num1 + num2;
}
</script>
</body>
<body>
<script>
//函数可以使用arguments获取动态传入的参数列表(数组)
function sum2() {
let r = 0;
for (let i = 0; i < arguments.length; i++) {
r += arguments[i];
}
return r;
}
console.log(sum2(3, 5, 6));
</script>
</body>
script
标签中, 或者单独的 js
文件中生效;<script>
var i=10;
function a() {
var i=20;
console.log(i)
}
a();// 20调用函数a()之后,执行局部i的打印
console.log(i); // 10打印全局变量i的值
</script>
需要注意的是
:
var ,let
在函数内定义的,外边不可见;代码如下:
<script>
function b(){
var a = 0;
let b = 2;
console.log(a);
console.log(b);
}
console.log(a);//var在函数中定义,外边不能使用,为undefined,报错
console.log(b); //let在函数中定义,也会报错
</script>
结果显示:
var
在条件、循环控制语句中,外部可见;let
在条件、循环控制语句中,外部不可见;代码如下:
<script>
if (1 < 2) {
var m = 1;
let n = 2;
}
console.log(m); //1
// console.log(n); //报错
</script>
创建对象的三种方式及访问方式:
使用
{}
创建对象,使用.
与[]
访问
代码如下:
<!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>
</head>
<body>
</body>
<script>
let stu = {
name: "张三",
age: 18,
study: function() {
console.log("学习Java")
}
};
console.log(stu.name);//访问属性
stu.study();//访问、调用方法:要加括号
// 赋值也可以
stu.name = "李四";//已有的属性赋值就是修改属性
stu.height = 175;//没有的属性,就是添加属性
console.log("name: "+stu.name+", height: "+stu.height);
// (2)对象[属性名的字符串]
console.log("name: "+stu["name"]+", height: "+stu["height"]);
</script>
</html>
new Object
创建对象 // 创建对象的方式二:new Object
let stu2 = new Object();// 类似于 stu2 = {};
// 对Object对象设置属性,就类似 第一种 方式的赋值
stu2.name = "王五";
代码如下:
<script>
// 创建对象的方式三:
//函数写法一:匿名函数
let stu3 = function(){
}
//函数写法二:定义了一个叫Stu4的函数
function Stu4(name, age, study){
//this表示通过new创建的对象
this.name = name;
this.age = age;
this.study = study;
}
// 函数可以new创建对象,函数对象也可以作为参数传入另一个函数中
let s4 = new Stu4("王五", 19, function(){});
</script>
以上是脚本宝典为你收集整理的JavaScript基础知识全部内容,希望文章能够帮你解决JavaScript基础知识所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。