JavaScript核心技术

ttt明亮

于 2024-07-11 00:03:32 发布

阅读量1k

点赞数 24

CC 4.0 BY-SA版权

文章标签： javascript 前端开发语言

本文链接：https://blog.youkuaiyun.com/m0_54394402/article/details/140309005

1.JS简介

1.1 JS语言特点

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

1.2 JavaScript基本结构

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

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

注意：

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

1.3 JavaScript在页面中的位置

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

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

1.4 网页中引用JavaScript的方式

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

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

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

2.JavaScript基本语法

2.1变量的声明与赋值

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

1.使用let声明变量

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

注意：

1.let是关键词，后面根变量名，表示声明一个遍历。

2.遍历的数据类型由所赋值的类型来决定。

3.console.log是打印到网页控制台，鼠标右键检查->控制台。

2.使用var声明变量

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

var与let的区别：

在javaScript中没有块级作用域，ES6中新增了let关键词，使用let声明的变量就存在块级别作用域，例如两个if语句或for语句中同名变量会冲突报错

3.js中的数据结构类型

js中的数据类型有六种：

1）undefin-未定义类型：未定义类型的变量，值为undefined

2) boolean-布尔类型：值为true/false

3）number-数字类型：任何数字（NAN也是number类型，表示“非数”）

4）string-字符串类型：值用引号（单引号或双引号）括起来

5）object-对象类型： null ，数组， Date等

6）function-函数类型： function函数

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

4.特殊值 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

2.2 js中的运算符

1. ==与===

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

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

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

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

3.流程控制语句

if-else语句：

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

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;
}

while语句

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

do while语句

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

for语句

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

3.函数，数组与对象

3.1函数

1.函数的声明与调用

声明函数有多种方式，常用的有两种：

第一种方式： function 函数名() {//函数体; }

注意:

1. function：定义函数的关键字。

2. 函数名后的小括号中写参数。

3. 如果函数体中有return语句时，就表示函数有返回值。

function add(){
  console.log('我是一个函数');
}
add();

第二种方式: let 函数名 = function() {//函数体; }

注意:此两种方式时完全等效的

let add = function(){
  console.log('我是一个函数');
}
add();

2 函数的参数与返回值

1. 由于js中参数不同声明数据类型，所以函数参数可以直接写

2. 只要函数体内有return语句，那么函数就有返回值

//第一种方式
function add(num1,num2){
  return num1 + num2;
}
console.log(add(10,20));

//第二种方式
let add = function(num1,num2){
  return num1 + num2;
}
console.log(add(10,20));

3 js中的作用域

1.在javaScript中,只有函数作用域，没有块级作用域。下面使用var来声明变量进行演示:

if(true){
  var num1 = 10;
}
function say(){
  var num2 = 20;
}
console.log(num1);     //10   （if块没有独立作用域，所以可以访问）
console.log(num2);     //Uncaught ReferenceError: num2 is not defined

4 声明变量时let与var的区别

为了在javaScript中也能使用块级作用域，ES6中新增了let关键词。使用let声明的变量就存在块级作用域。

if(true){
  let num1 = 10;
}
function say(){
  let num2 = 20;
}
console.log(num1);     //Uncaught ReferenceError: num1 is not defined
console.log(num2);     //Uncaught ReferenceError: num2 is not defined

3.2 数组

1 创建数组

创建数组有多种方式：

//1、创建数组时不指定长度
let arr = new Array();   
//2、创建数组时指定长度（一般不使用）
let arr = new Array(5);  
//3、创建数组时直接赋值
let arr = new Array(10,20,30);   
//4、创建数组时直接赋值
let arr = [66,80,90,77,59];

javaScript中的数组有如下特点：

1.数组下标从0开始。

2.虽然创建数组时，指定了长度，但实际上数组都是可变长度的，即使超出指定长度也不会有任何问题。

3.数组存储的数据可以是任何类型。

综上所述：javaScript中的数组，更像是java中的集合。

2.使用数组

数组中有一个属性length，此属性返回数组的长度。所以，可以使用length属性对数组进行遍历操作。

let arr = [55,23,89,65,11];  
console.log(arr.length);        //5
//遍历数组
for(let i=0;i<arr.length;i++){
  console.log(arr[i]);
}

3.3 常用内置对象

javaScript语言给我们内置了很多封装好的通用接口，是以对象的属性和方法，函数的形式存在。

1.Array 数组内置对象

下面是对一些常用方法做示例：

1.push()方法:

let arr = [55,3,89,9,11];  
arr.push(99);            //向数组中追加一个元素
console.log(arr);        //55,3,89,9,11,99

2.sort()方法

//sort()方法按照字符串规则排序
let arr1 = ['SMITH','WARD','MARTIN','CLARK','TURNER'];
arr1.sort();
console.log(arr1);     //"CLARK", "MARTIN", "SMITH", "TURNER", "WARD"
//所以，当对数字进行排序时，就会出现问题，此时，可以自定义排序规则函数进行排序
let arr2 = [55,3,89,9,11];
arr2.sort(rule);
function rule(num1,num2){
  return num1-num2;
}
console.log(arr2);     //3, 9, 11, 55, 89

3. join方法

let arr = [2020,08,04];
let result = arr.join('-');
console.log(result);        //2020-8-4

4.splice()方法

//从数组中间删除元素：splice(开始位置,删除元素长度)
let arr1 = [1,2,3,4,5,6,7,8,9];
arr1.splice(2,3);
console.log(arr1);    //运行结果：1,2,6,7,8,9
//在数组中间插入元素：splice(开始位置,删除元素长度,新插入元素… …)
let arr2 = [1,2,3,4,5,6,7,8,9];
arr2.splice(2,0,31,32,33);
console.log(arr2);   //运行结果：1,2,31,32,33,3,4,5,6,7,8,9
//替换数组中某个元素：splice(开始位置,要替换的元素长度,替换元素… …)
let arr3 = [1,2,3,4,5,6,7,8,9];
arr3.splice(2,1,33);
console.log(arr3);    //运行结果：1,2,33,4,5,6,7,8,9

2.String 字符串内置对象

下面对一些常用方法做示例：

1.charAt()方法

let str = 'hello';
for(let i=0;i<str.length;i++){
  console.log(str.charAt(i));      //h e l l o
}

2.indexOf()方法

let str = 'hello.js';
console.log(str.indexOf('.'));       //5

3.substring()方法

let str = 'zhangsan@163.com';
console.log(str.substring(str.indexOf('@')+1));                    //163.com
console.log(str.substring(str.indexOf('@')+1,str.indexOf('.')));   //163

4. split()方法

let str = '2020-08-04';
let arr = str.split('-');
console.log(arr);             //"2020", "08", "04"

3. Date日期内置对象

示例：

let mydate = new Date();
console.log(mydate);  //Tue Aug 04 2020 17:15:22 GMT+0800 (中国标准时间)

实战应用：获取当前日期：

function getCurDate() {
  let now = new Date();
  let year = now.getFullYear();
  let month = now.getMonth() + 1;
  let day = now.getDate();
  month = month < 10 ? "0" + month : month;
  day = day < 10 ? "0" + day : day;
  return year + "-" + month + "-" + day;
}
console.log(getCurDate());

4. Math 数学内置对象

//返回0-9的随机整数
console.log(Math.floor(Math.random()*10));

5. Global内置对象

Global(全局)对象是ECMAScript中的一个特别的对象，此对象不可访问。在ECMAScript中，不属于任何其他对象和方法，都属于Global。

1.parseInt()将字符串转换成整行

let str = '100';
console.log(parseInt(str)+1);       //101

2.parseFloat()将字符串转换成浮点型

let str = '100.5';
console.log(parseFloat(str)+1);       //101.5

3. eval（）将一个字符串解析为javascript代码并执行

console.log(eval('1+2'));            //3

4.BOM模型

4.1 BOM模型

几乎所有的浏览器都内嵌了javaScript引擎，使得javaScript语言能够在浏览器环境下运行。那么，

如果要使用javaScript语言来操作浏览器中国的各个对象，就需要使用BOM模型与DOM模型。

1.浏览器对象模型BOM（Browser Object Model）：提供了独立于内容的，可以与浏览器窗口进行互动的对象结构。

2.文档对象模型DOM（Document Object Model）：定义访问和处理HTML文档的标准方法。DOM将HTML文档呈现为带元素，属性和文本的树结构（节点树）。

BOM模型与DOM模型示意图:

浏览器窗口中的BOM与DOM：

2.1 BOM编程

1.window对象

window对象是BOM的核心，window对象指当前的浏览器窗口。window对象是整个浏览器对象模型中的顶层对象，它下游很多子对象（包括document对象（DOM））。

window对象有很多属性和方法：

1）.alert（）对话框

alert()方法;在页面上弹出一个只有确定按钮的对话框
window.alert('hello');
window作为i顶层对象，可以省略
alert('hello');

2). confim()对话框

alert（）方法：在页面上弹出一个确定和取消按钮的对话框。此对话框返回一个布尔值（点击“确定”按钮，返回true；点击“取消”按钮，返回false）。
if(confirm('确定要删除吗')){
  console.log('删除');
}else{
  console.log('不删除');
}

3）. open()与close()方法

open()方法：打开一个浏览器窗口。

close()方法：关闭一个浏览器窗口。

<body>
  <input type="button" value="打开百度" onclick="openBaidu()">	<!--onclick调用JS方法-->
  <input type="button" value="关闭百度" onclick="closeBaidu()"><!--onclick后面章节会讲到-->
  <script>
    //声明一个引用
    let obj = null;
    function openBaidu(){
      //打开百度窗口，并让obj指向百度窗口
      obj = window.open('http://www.baidu.com');
      //obj = open('http://www.baidu.com');       //window可以省略
    }
    function closeBaidu(){
      //关闭百度窗口
      obj.close();
    }
  </script>
</body>

注：在一个页面标签中国，添加onclick，就表示给此标签设置一个单机事件。当单机此标签时，会调用onclick后指定的函数

script标签必须写在html代码的后面，也就是javascript代码必须要卸载所有html代码的最后面，原因是，必须要等到所有html标签都加载完毕之后，才能操作这些标签对象。

4）setTimeout()定时器

setTimeout()函数能够在指定的时间间隔后，调用一个函数（此函数称为回调函数）。

注：setTimeout（）在指定的时间间隔后，只调用一次
setTimeout(function(){
  console.log('hello，3秒到了');
},3000);
前面血管，函数也是一个对象，也可以使用一个引用来指向它。所以还要如下的写法
function callback(){
  console.log('hello，3秒到了');
}
setTimeout(callback,3000);
或者：
let callback = function(){
  console.log('hello，3秒到了');
}
setTimeout(callback,3000);

5）setInterval（）定时器

setInterval()函数能够在指定的时间间隔后，调用一个函数（此函数称为回调函数）。

注意：setInterval()在指定的时间间隔后，可以调用无限多次
let callback = function(){
  console.log('hello，3秒到了');
}
setInterval(callback,3000);

2.location对象

location用于获取或设置地址栏中的url，并且提供若干方法一哦那个与刷新和跳转等。location.reload()页面重新加载（相当于刷新按钮） location.href 返回或设置完整的url
<button onclick="doReload()">刷新</button>
<button onclick="toBaidu()">跳转百度</button>
<script>
  function doReload(){
    location.reload();
  }
  function toBaidu(){
    location.href = 'http://www.baidu.com';
  }
</script>

3.history对象

history对象记录了用户曾经浏览过的页面(URL)，并可以实现浏览器前进与后退相似导航的功能。history对象就是访问后的URL。 history.back() 加载history列表中的前一个URL，也就是后退。 history.forward() 加载history列表中的下一个URL，也就是前进。 history.go() 加载history列表中的某一个URL。0：当前； -1：相当于back()； 1：相当于forward()

创建两个html文件，第一个html文件中书写：
<a href="b.html">跳转b页面</a>
<a href="javascript:history.go(-1)">回退</a>

5.DOM模型

5.1 DOM模型

window对象下的document对象就是DOM模型。DOM描绘了一个层次化的节点树，每一个节点就是一个html标签，而且每一个节点也是一个DOM对象。

5.2操作DOM

1.获取DOM对象常用方法有以下几种：

1.getElementByld（）通过元素的ID属性获取DOM对象，获取的是一个DOM对象

2.getElementsByTagName（）通过元素的标签名获取DOM对象，获取的是一组DOM对象

3.getElementsByClassName（）通过元素的class属性获取DOM对象，获取的是一组DOM对象。

4.getElementsByName() 通过元素的name属性获取DOM对象，获取的是一组DOM对象。

	<p id="one">这是一个p标签</p>
  <p class="first">这是一个p标签</p>
  <p class="first">这是一个p标签</p>
  <p name="username">这是一个p标签</p>
  <p name="username">这是一个p标签</p>
  <script>
      let oneObj = document.getElementById('one');
      oneObj.style.color = 'red';     //只有第一个p标签字体变红色
      let pArr = document.getElementsByTagName('p');
      console.log(pArr.length);       //获取所有p标签对象，是数组，长度为5
      let firstArr = document.getElementsByClassName('first');
      console.log(firstArr.length);   //获取所有class为first的对象，是数组，长度为2
      let userArr = document.getElementsByName('user');
      console.log(userArr.length);    //获取所有name属性为user的对象，是数组，长度为2
  </script>

2.其他获取DOM对象的方法（扩展）

1.document.documentElement 获取html对象

2.document.body 获取body对象

3.document.querySelector() 通过选择器获取一个DOM对象

4.document.querySelectorAll() 通过选择器获取一组DOM对象

<div>
  <p>这是一个p标签</p>
  <p>这是一个p标签</p>
</div>
<script>
    let htmlObj = document.documentElement;
    htmlObj.style.backgroundColor = 'red';       //设置html背景色
    let bodyObj = document.body;
    bodyObj.style.fontSize = '36px';             //设置body中所有元素的字体大小
    let pObj = document.querySelector('div p');
    pObj.style.color = 'blue';                   //第一个p标签有效
    let pArr = document.querySelectorAll('div p');
    console.log(pArr.length);                    //数组长度为2
</script>

3.获取DOM对象的时机

1）要特别注意一点，javaScript代码要写在body的最后。因此，必须要保证html代码全部加载完毕之后，才执行javaScript代码，才能获取DOM对象。

2）如果一定要将javaScript代码放在html之前要么要做如下写法:

<script>
    //文档就绪函数
    window.onload = function(){
      var obj = document.getElementById("one");
      obj.innerHTML = 'hello world!';
    };
</script>
<p id="one"></p>

4.操作DOM对象属性

操作DOM对象的属性，常用的都有两种方式：

1.通过DOM对象直接操作属性

<p>hello world</p>
<input type="text">
<script>
  document.getElementsByTagName('p')[0].title = 'aaaa';
  let userName = document.getElementsByTagName('input')[0];
  userName.value = 'zhangsan';
  userName.disabled = true;
</script>

2.通过DOM对象中的方法操作属性 setAttribubte（）设置元素的属性值getAttribute（）获取元素的属性值removeAttrjibute（）移除元素的属性值
<p>hello world</p>
<input type="text">
<script>
  document.getElementsByTagName('p')[0].setAttribute('title','aaaa');
  let userName = document.getElementsByTagName('input')[0];
  userName.setAttribute('value','zhangsan');
  userName.setAttribute('disabled',true);
  userName.removeAttribute('disabled');
  console.log(userName.getAttribute('value'))
</script>

5.DOM对象中的常用属性

innerHTML属性：用于设置或获取HTML元素中的内容。

<p id="one">
  <span>这是一个段落</span>
</p>
<script>
  let obj = document.getElementById('one');
  console.log(obj.innerHTML);                  //<span>这是一个段落</span>
  obj.innerHTML = '<span>hello world!</span>';
</script>

innerText属性：用于设置或获取HTML元素中的纯文本。

<p id="one">
  <span>这是一个段落</span>
</p>
<script>
  let obj = document.getElementById('one');
  console.log(obj.innerText);                  //这是一个段落
  obj.innerText = 'hello world!';
</script>

className属性: 用于设置或获取DOM对象的类样式

<div id="one" class="first"></div>
<script>
  let obj = document.getElementById('one');
  console.log(obj.className);                //first
  obj.className = 'two';
</script>

4.style属性：用于设置或获取DOM对象的style样式
<div id="one">我是一个div</div>
<script>
  let obj = document.getElementById('one');
  obj.style.width = '300px';
  obj.style.height = '200px';
  obj.style.backgroundColor = 'blue';
  obj.style.fontSize = '24px';
  obj.style.color = '#fff';
  obj.style.border = 'solid 10px red';
  obj.style.display = 'block';          //设置DOM对象的显示和隐藏
</script>
注意：

在使用javaScript操作DOM对象的CSS样式时，由于javaScript不能识别“-”字符，所以所有CSS样式的书写，要一律从xxxx-xxxx形式转换为xxxxXxxx的形式。

6.遍历DOM数组

在上面的例子中，都是使用getElemmentByld获取一个DOM对象进行操作。但在实际开发中，经常会同时操作多个DOM对象，此时，可以使用循环来遍历DOM数组。

<p>我是p标签</p>
<p>我是p标签</p>
<p>我是p标签</p>
<script>
  let arr = document.getElementsByTagName('p');
  for(let i=0;i<arr.length;i++){
    arr[i].style.color = 'red';
    arr[i].style.fontSize = '36px';
  }
</script>