JavaScript黑马教程

算法哥

于 2023-07-16 09:24:14 发布

阅读量290

点赞数 3

本文链接：https://blog.csdn.net/fkx20040610/article/details/131747122

版权

什么是JavaScript？

JavaScript(简称JS)是一门跨平台、面向对象的脚本语言。是用来控制网页行为的，它能使网页可交互。

JavaScrpt和Java是完全不同的语言，不论是概念还是设计。但是基础语法类似。

1、JavaScrpt的引入方式

方式一：内部脚本（将JS代码定义在HTML页面中）

JavaScript代码必须位于标签之间
在HTML文档中，可以在任意地方，放置任意数量的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页制作</title>     
</head>
<body>
</body>

   <!-- 内部脚本 -->
    <script>
        alert("Hello JS");<!-- 写入警告框输出 -->
    </script>

</html>

方式二：外部脚本（将JS代码定义在外部JS文件中，然后引入到HTML页面中）

外部JS文件中，只包含JS代码，不包含

<script src="js/demo.js"></script>

demo.js文件中的代码：

alert("Hello JS");

2、JS基础语法

书写语法

区分大小写：与Java一样，变量名、函数名以及其他一切东西都是区分大小写的
每行结尾的分号可有可无

注释：

单行注释：//注释内容
多行注释：/*注释内容*/

大括号表示代码块

//判断
if(count==3){
   alert(count);
}

输出语句

使用window.alert()写入警告框
document.write()使用写入HTML输出

使用console.log()写入浏览器控制台

<script>
window.alert("Hello JavaScript");//浏览器弹出警告框
    
document.write("Hello JavaScript");//写入HTML，在浏览器展示
    
console.log("Hello JavaScript");//写入浏览器控制台
</script>

变量

Javascript中用var关键字（variable的缩写）来声明变量。
JavaScript是一门弱类型语言，变量可以存放不同类型的值。
变量名需要遵循如下规则：
- 组成字符可以是任何字母、数字、下划线或美元符号
- 数字不能开头
- 建议使用驼峰命名

//var定义变量
var a=20;
a="张三";

//特点1：作用域比较大，全局变量

//特点2：可以重复定义的

注意事项

ECMAScript6新增了let关键字来定义变量。它的用法类似于var，但是所声明的变量，只在let关键字所在的代码块内有效，且不允许重复声明。
ECMAScript6新增了const关键字，用来声明一个只读的常量。一旦声明，常量的值就不能改变。

数据类型（JavaScript中分为原始类型和引用类型）

原始类型：

number：数字（整数、小数、NaN（Not a Number））
string：字符串，单双引号皆可
boolean：布尔。true，false
null：对象为空
undefined：当声明的变量未初始化时，该变量的默认值是undefined

对变量或值调用typeof运算符将返回下列值之一：（使用typeof运算符可以获取数据类型）

undefined-如果变量是undefined类型的
booleann-如果变量是Boolean类型的
number-如果变量是number类型的
string-如果变量是string类型的
object-如果变量是一种引用类型或Null类型的

**注释：**为什么typeof运算符对于那null值会返回"object"。这实际上是JavaScript最初实现中的一个错误，然后被ECMAscript沿用了。现在，null被认为是对象的占位符，从而解释了这一矛盾，但从技术上来说，它仍然是原始值。

引用类型：

引用类型通常叫做类（class），也就是说，遇到引用值，所处理的就是对象。

运算符

算数运算符：+,-,*,/,%,++,- -
赋值运算符：=,+=,-=,*=,/=,%=
比较运算符：>,<,>=,<=,!=,,=
逻辑运算符：&&,||,!
三元运算符：条件表达式?true_value:false_value

注：==会进行类型转换，===不会进行类型转换

var a=10;
alert(a=="10");//true
alert(a==="10");//false
alert(a===10);//true

类型转换

字符串类型转为数字：
- 将字符串字面值转为数字。如果字面值不是数字，则转为NaN。
其他类型转为boolean:
- Number:0和NaN为false，其他均转为true。
- String:空字符串为false，其他均转为true。
- Null和undefined：均转为false。

流程控制语句

if…else if…else…
switch
for
while
do…while

函数

介绍：函数（方法）是被设计为执行特定任务的代码块。

定义：JavaScript函数通过function关键字进行定义，语法为：

function functionName(参数一，参数二…){
//要执行的代码
}

//例如：（定义）
function add(a,b){
    return a+b;
}

注意：
- 形式参数不需要类型。因为JavaScript是弱类型语言
- 返回值也不需要定义类型，可以在函数内部直接使用return返回即可

调用：函数名称（实际参数列表）

//调用
var result=add(10,20);
alert(result);

函数定义方式二：

var functionNamee=function(参数一,参数二…){
//要执行的代码
}

//例如：（定义）
var add=function(a,b){
    return a+b;
}

//调用
var result=add(10,20);
alert(result);

JS对象

Array

JavaScript中Array对象用于定义数组

定义

var 变量名=new Array{元素列表};//方式一     var arr = new Array(1,2,3,4);
var 变量名=[元素列表];//方式二              var arr = [1,2,3,4];

访问

arr[索引]=值;   arr[10]="hello";//特点：长度可变，类型可变

注意事项：JavaScript中的数组相当于Java中的集合，数组的长度是可变的，而JavaScript是弱类型，所以可以存储任意类型的数据。

属性	描述
length	设置或返回数组中的元素
方法	描述
forEach()	遍历数组中的每个有值的元素，并调用一次传入的函数
push()	将新元素添加到数组的末尾，并返回新的长度
splice()	从数组中删除元素

String

String字符串对象的创建方式有两种：

var 变量名=new String("…");  var str=new String("Hello String");//方式一 
var 变量名="…";  var str="Hello String";  var str='Hello String'//方式二

属性	描述
length	字符串的长度
方法	描述
charAt()	返回在指定位置的字符
indexof()	检索字符串
trim()	去除字符串两边的空格
substring()	提取字符串中两个指定的索引号之间的字符

JSON

介绍JSON之前先来了解一下JavaScript中的自定义对象

定义格式：

var 对象名 = {                 var user = {                              var user = {
属性名1:属性值1,                    name:"Tom",                               name:"Tom",
属性名2:属性值2,                    age:20,                                   age:20, 
属性名3:属性值3,                    gender:"male",                            gender:"male",
函数名称:function(形参列表){}        eat:function(){ alert("用膳~"); }          eat(){ alert("用膳~"); }
};                                };                                        }; //方法可简化

调用格式：

对象名.属性名;                       console.log(user.name);
对象名.函数名();                     user.eat();

JSON-介绍
概念：JavaScript Object Notation，JavaScript对象标记法。
JSON是通过JavaScrip对象标记法书写的文本。

由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输。

{                           {
     name:"Tom",                "name":"Tom", 
     age:20,                    "age":20,
     gender:"male",             "gender":"male",
}//JS对象                     }//JSON字符串

JSON-基础语法

定义

var 变量名 = '{"key1":value1,"key2":value2}';
var userStr = '{"name":"Jerry","age":"18","addr":["北京","上海","西安"]}'

JSON字符串转为JS对象
```
var jsobject = JSON.parsee(userStr);
```

JS对象转为JSON字符串

var jsonStr = JSON.stringify(jsobject);

BOM
- 概念：Browser Object Model 浏览器对象模型，允许JavaScript与浏览器对话，JavaScript将浏览器的各个组成部分封装为对象。
- 组成：
  - window：浏览器窗口对象
    - 获取：直接使用window，其中window.可以省略。
```
window.alert("Hello Window");      alert("Hello Window");
```
    - 属性：
      - history:对history对象的只读引用。请参阅History对象(按下Ctrl点击)
      - location：用于窗口或框架的Location对象。请参阅Location对象
      - navigator：对Navigator对象的只读引用。请参阅Navigator对象
    - 方法：
      - alert()：显示带有一段消息和一个确认按钮的警告框。
      - confirm()：显示带有一段消息以及确认按钮和取消按钮的对话框。
      - setIntrval()：按照指定的周期（以毫秒计）来调用函数或计算表达式。
      - stTimeout()：在指定的毫秒数后调用函数或计算表达式。
  - Navigator：浏览器对象
  - Screen：屏幕对象
  - History:历史记录对象
  - Location:地址栏对象
    - 获取：使用window.location获取，其中window.可以省略。
```
window.location.属性;     location.属性;
```
    - 属性：href:设置或返回完整的URL。
```
location.href = "https://www.itcast.cn"; 
```
DOM（DOM是W3C（万维网联盟）的标准，定义了访问HTML和XML文档的标准，分为3个不同的部分）
- 概念：Documeeent Obbjeect Model，文档对象模型。
- 将标记语言的各个组成部分封装为对应的对象。
  1. Core DOM-所有文档类型的标准模型
    - Documnt：整个文档对象
    - Element：元素对象
    - Attribute：属性对象
    - Text：文本对象
    - Comment：注释对象
  2. XML DOM-XML 文档的标准模型
  3. HTML DOM-HTML 文档的标准模型
    - Image：
    - Button:
- JavaScript通过DOM，就能对HTML进行操作：
  - 改变HTML元素的内容
  - 改变HTML元素的样式（CSS）
  - 对HTML DOM事件作出反应
  - 添加和删除HTML元素
在DOM操作当中，如何获取元素对象：
HTML中的Element对象可以通过document对象获取，而Document对象是通过window对象获取的。
Document对象中提供了以下获取Element元素对象的函数：
1. 根据id属性值获取，返回单个Element对象
```
var h1 = document.getElementByID('h1');
```
2. 根据标签名称获取，返回Element对象数组
```
var divs = document.getElementsByTagName('div');
```
3. 根据name属性值获取，返回Element对象数组
```
var hobbys = documeent.getElementsByName('hobby');
```
4. 根据class属性值获取，返回Element对象数组
```
var class = document.getElementsByClassName('cls');
```

事件监听

事件：HTML事件是发生在HTML元素上的“事情”。比如：
- 按钮被点击
- 鼠标移动到元素上
- 按下键盘按键
事件监听：JavaScript可以在事件被侦测到时执行代码。

事件绑定

方式一：通过HTML标签中的事件属性进行绑定

<input type="button" onclick="on()" value="按钮1">

<scrpt>
    function on(){
       alert('我被点击了!');
    }
</scrpt>

方式二：通过DOM元素属性绑定

<input type="button" id="btn" value="按钮2">

<scrpt>
    document.getElmentByID('btn').οnclick=function(){
       alert('我被点击了!');
    }
</scrpt>

常见事件

事件名	说明
onclick	鼠标单击事件
onblur	元素失去焦点
onfocus	元素获得焦点
onload	某个页面或图像被完成加载
onsubmit	当表单提交时触发该事件
onkeydown	某个键盘的键被按下
onmouseover	鼠标被移到某元素之上
onmouseout	鼠标从某元素移开