前言
此次打卡的是一种新的语言,名为 JavaScript,简称 js,是-种运行在客户端的脚本语言,
脚本语言意思是不需要编译,运行过程中由js解释器(js引擎)逐行来进行解释并执行。是不是感到一些好奇呢?现在就带着好奇来感受这个新语言的魅力吧!
一、JavaScript 的组成
ECMAScript DOM BOM
1、Javascript语法
页面文档对象模型 浏览器对象模型
ECMAScript : ECMAScript规定了JS的编程语法和基础核心知识,是所有浏览器厂商共同遵守的一套JS语法 工业标准。
2、 DOM-文档对象模型
文档对象模型( 简称DOM) , 是W3C组织推荐的处理可扩展标记语言的标准编程接口。
通过DOM提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等)。
3、 BOM一浏览器对象模型
BOM ( 简称BOM)是指浏览器对象模型,它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。通过BOM可以操作浏览器窗口,比如弹出框、控制浏览器跳转、获取分辨率等。
二、 JS初体验
JS有3种书写位置,分别为行内、内嵌和外部。
1.行内式JS
<input type="button" value="点我试试”οnclick="alert ('Hello World')" />
注意:
- 可以将单行或少量JS代码写在HTML标签的事件属性中(以on开头的属性) , 如: onclick
- 注意单双引号的使用:在HTML中我们推荐使用双引号, JS中我们推荐使用单引号
- 可读性差,在html中编写JS大量代码时,不方便阅读;
- 引号易错,引号多层嵌套匹配时,非常容易弄混;
2.内嵌JS.
<script>
alert( 'Hello World~!') ;
</script>
可以将多行JS代码写到<script> 标签中
内嵌JS是学习时常用的方式
3.外部JS文件
<script src= "my. js"></script>
利于HTML页面代码结构化,把大段JS代码独立到HTML页面之外,既美观,也方便文件级别的复用
引用外部JS文件的script标签中间不可以写代码
适合于JS代码量比较大的情况
4、 JavaScript输入输出语句
了方便信息的输入输出, JS中提供了一些输入输出语句,其常用的语句如下:
方法 说明 归属
alert(msg ) 浏览器弹出警示框 浏览器
console.log(msg) 浏览器控制台打印输出信息 浏览器
prompt(info) 浏览器弹出输入框,用户可以输入 浏览器
5、声明变量
变量在使用时分为两步: 1.声明变量2. 赋值
声明变量
var age; // 声明一个名称为age的变量
var 是一个JS关键字,用来声明变量( variable变量的意思)。
age是程序员定义的变量名,我们要通过变量名来访问内存中分配的空间
三、JavaScript数据类型
1、数字型Number
JavaScript数字类型既可以用来保存整数值,也可以保存小数(浮点数)。
1.数字型进制
最常见的进制有二进制、八进制、十进制、十六进制。
// 1.八进制数字序列范围: 0~7
var numl = 07;
// 2:十六进制数字序列范围: 0~9以及A~F
var num = 0xA;
在JS中八进制前面加0,十六进制前面加0x
2.数字型范围
JavaScript中数值的最大和最小值
alert (Number .MAX VALUE) ;
alert (Number .MIN VALUE) ;
3.数字型三个特殊值
alert (Number .MAX VALUE*2); /
alert(-Infinity);
alert (NaN) ;
●Infinity ,代表无穷大,大于任何数值
●-Infinity ,代表无穷小,小于任何数值
●NaN,Notanumber,代表-个非数值
4. isNaN0
用来判断-一个变量是否为非数字的类型,返回true或者false
isNaN(x)
x是数字,返回false、x不是数字,返回true
x是一个非数字类型
2、字符串型String
1.字符串引号嵌套
JS可以用单引号嵌套双引号, 或者用双引号嵌套单引号(外双内单,外单内双
2.字符串转义符
转义符都是\开头的,常用的转义符及其说明如下:
转义符 解释说明
\n 换行符,n是newline的意思
\\ 斜杠\
\* ”双引号
\t tab缩进
\b 空格,b是blank的意思
3.字符串长度
字符串是由若干字符组成的,这些字符的数量就是字符串的长度。通过字符串的length属性可以获取整个字符串的长度。
var strMsg = "我是帅气多金的程序猿! ";
alert (strMsg. length); 1/显示11
4.字符串拼接
多个字符串之间可以使用 +进行拼接,其拼接方式为字符串+任何类型=拼接之后的新字符串,
拼接前会把与字符串相加的任何类型转成字符串 ,再拼接成一一个新的字符串
//1.1字符串“相加
+号总结口诀:数值相加,字符相连;只要字符串后面加任何类型都是字符串
3、布尔型Boolean
布尔类型有两个值: true和false , 其中true表示真(对) , 而false表示假(错)。
布尔型和数字型相加的时候,true的值为1 , false的值为0。
console. log(true + 1); // 2
console. log(false + 1);,
Undefined 和Null
一个声明后没有被赋值的变量会有一个默认值undefined (如果进行相连或者相加时,注意结果)
NaN
一个声明变量给null值,里面存的值为空(学习对象时,我们继续研究ull)
4、 获取检测变量的数据类型
typeof可用来获取检测变量的数据类型
四、JavaScript数组
1、数组的概念
数组是指一种组数据的集合,其中的每个数据被称作元素,在数组中可以存放任意类型的元素。
2.数组的创建方式
JS中创建数组有两种方式:
利用new创建数组
利用数组字面量创建数组
2.2利用new创建数组
var 数组名= new Array() ;
var arr = new Array(); // 创建一个新的空数组
2.3利用数组字面量创建数组
//1.使用数组字面量方式创建空的数组
var 数组名=[ ];
var 数组名= ['小白, '小黑,'大黄','瑞奇'];
3.获取数组元素
3.1数组的索引
索引(下标) :用来访问数组元素的序号(数组下标从0开始)。
var arr = ['小白', '小黑', '大黄', '瑞奇'];
索引号: 0 1 2 3
数组可以通过索引来访问、设置、修改对应的数组元素。我们可以通过“数組名[索引"的形式来获取数组中的元素。
4.新增数组元素
使用“数组名Jength" 可以仿问数组元素的数量(数组长度)。
可以通过修改length长度以及索引号增加数组元素
a、通过修改length长度新增数组元素
可以通过修改length长度来实现数组扩容的目的
length属性是可读写的
var arr = ['red', 'green', 'blue', 'pink'1;
arr.length=7;
console. log(arr);
console. log (arr[4]);
console. log (arr[5]);
console. log(arr[6]);
其中索引号是4,5 , 6的空间没有给值,就是声明变量未给值,默认值就是undefined.
b、.新增数组元素修改索引号追加数组元素
var arr1 = ['red','green', 'blue'];
arr1[3] =‘pink';
console .10g(arr1);
5、冒泡排序:
是一种算法,把一系列的数据按照-定的顺序进行排列显示从小到大或从大到小)。
<title>冒泡排序</title>
<script>
var a = [3, 4, 2, 5, 1];
var step = [];
for (var i = 0; i <= a.length - 1; i++) { //外面的躺数
for (var j = 0; j <= a.length - i - 1; j++) { //里面的次数
if (a[j] > a[j + 1]) {
step = a[j];
a[j] = a[j + 1];
a[j + 1] = step;
}
}
}
console.log(a);
</script>
结果是: a[1,2,3,4,5]; 注意<script>标签写在head里面
6、关于数组的例子
数组去重:
<title>数组去重</title>
<script>
// 将数组[2, 日, 6, 1, 77,日, 52,日, 25,7]中的 8去掉后, 形成一个不包含 e的新 数组。
// 1、需要一个新数组用于存放筛选之后的数据。
// 2、遍历原来的数组, 把不是日的数据添加到新数组里面(此时要注意采用数组名+索引的格式接收数据)。
// 3、新数组里面的个数, 用length 不断累加。
var arr = [2, 0, 6, 1, 77, 0, 52, 0, 25, 7];
var newArr = [];
for (var i = 0; i < arr.length; i++) {
if (arr[i] != 0) {
newArr[newArr.length] = arr[i];
}
}
console.log(newArr);
</script>
翻转数组:
<title>翻转数组</title>
<script>
//将数组['red', ' green', 'blue', 'pink", " purple']的内容反过来存放
// 1.声明一个新数组 newArr
// 2、把旧数组索引号第4个取过来(arr . length - 1),给新数组索引号第0个元素(newArr . length)
// 3、我们采取递减的方式
var arr = ['red', ' green', 'blue', 'pink", " purple'];
var newArr = [];
for (var i = arr.length - 1; i >= 0; i--) {
newArr[newArr.length] = arr[i];
}
console.log(newArr);
</script>
总结:
以上就是我想分享的比较的简单却又重要的一些知识点,也是我在学习和写的时候没有怎么注意的,给你们提醒不要踩雷!容易忘记内容的话,就多看看,多记背,随时使用和多练习。