餐饮业网络营销方式_网页设计实训目的_神马搜索推广_茶叶网络推广方案

目录

1.js的基本认知

2.js的基本语法

 2.1 变量的声明

三个关键字的区别

2.2数据类型

2.2.1 基本数据类型

2.2.2 复杂数据类型

2.3对象的属性和方法

2.3.1属性

2.3.2访问方式

2.4.3动态操作

 2.4.4方法

2.4字符串的常用属性和方法

2.5运算符

2.6逻辑控制语句

2.7函数

2.7.1 系统函数

2.7.2 自定义函数

2.8页面中的事件

3.BOM的常用对象和方法

3.1浏览器对象

 3.1.1常用属性

3.1.2常用方法

 3.2 history对象

3.3 location对象

3.4 document对象 

3.5内置对象

3.5.1 Date对象

3.5.2 Math对象

---

以下JavaScript简称 js

推荐js的网站：

MDN Web Docs

1.js的基本认知

1. js和java没有任何关系，不要混淆二者
2. js是一种脚本语言，主要用于向HTML页面（网页）添加交互行为
3. js分为三部分 ECMAScript 、 BOM 、 DOM
   • ECMAScript描述了一些内容
     • 语法
     • 变量和数据类型
     • 运算符
     • 逻辑控制语句
     • 关键字、保留字
     • 对象
   • BOM 浏览器对象模型，提供了与浏览器窗口进行交互的对象
   • DOM 文档对象模型，用来访问和操纵HTML文档
4. DOM是BOM的子对象
5. 使用js有三种方式 内部js 外部js 直接在HTML中
   • 内部js

              2.外部js

              3.直接在HTML中

2.js的基本语法

 2.1 变量的声明

        三个关键字 var 、let 、const

• var a=5;
• let b=5;
• const c=5;

三个关键字的区别

2.2数据类型

可以用 typeof(变量名)  查看变量类型

2.2.1 基本数据类型

• undefined (未定义类型)
• null (空类型)
• number（数值类型）
• bollean （布尔类型）

2.2.2 复杂数据类型

• object （对象）
• string （字符串类型）

2.3对象的属性和方法

2.3.1属性

        属性是对象的键值对，键（属性名）为字符串或 Symbol，值为任意类型（原始值、对象、函数等）

let person = {name: '小明',      // 字符串属性age: 18,           // 数值属性address: {         // 嵌套对象属性city: '北京'}
};

2.3.2访问方式

• 点语法：object.property（适用于普通属性名）。
• 方括号语法：object["property"]（适用于含空格、连字符的属性名或动态属性）

console.log(person.name);         // "小明"
console.log(person["age"]);       // 18
console.log(person.address.city); // "北京"

2.4.3动态操作

• 添加属性：通过赋值直接添加新属性。

  person.gender = '男'; // 添加 gender 属性

• 删除属性：使用 delete 操作符，仅能删除自有属性（非继承属性）

delete person.age; // 删除 age 属性

 2.4.4方法

方法是值为函数的属性，用于描述对象的行为

let calculator = {add: function(a, b) {return a + b;},multiply(a, b) { // ES6 简写语法return a * b;}
};
console.log(calculator.add(2, 3)); // 5

2.4字符串的常用属性和方法

 2.5数组常用的对象和方法

2.5运算符

类别	运算符号
算术运算符	+、-、*、/、%、++、--
比较运算符	>、< 、>= 、<= 、== 、!= 、===、!==
逻辑运算符	&& 、|| 、！
赋值运算符	=、+=、-=

2.6逻辑控制语句

• 条件结构    if结构   switch结构
• 循环结构    for 、for..in 、while、do...while
• 中断循环    break 、continue

2.7函数

2.7.1 系统函数

parseInt 、parseFloat 、isNAN

2.7.2 自定义函数

• 函数声明

function add(a, b) {return a + b;
}

• 函数表达式

const multiply = function(a, b) {return a * b;
};

• 箭头函数

  const square = x => x * x;

2.8页面中的事件

3.BOM的常用对象和方法

3.1浏览器对象

 3.1.1常用属性

名称	说明
history	有关用户访问过的url信息
location	有关当前url的信息

3.1.2常用方法

 3.2 history对象

3.3 location对象

• 属性

• 方法

3.4 document对象 

• 属性

• 方法 

方法	语法示例	描述
getElementById()	document.getElementById('id')	通过元素 ID 获取单个元素，ID 唯一。
getElementsByTagName()	document.getElementsByTagName('div')	通过标签名获取元素集合（如所有 <div>）
getElementsByClassName()	document.getElementsByClassName('cls')	通过类名获取元素集合，支持多类名（空格分隔）
getElementsByName()	document.getElementsByName('name')	通过 name 属性获取元素集合（常用于表单元素）
querySelector()	document.querySelector('.class')	通过 CSS 选择器获取第一个匹配元素（如 .class、#id 或复合选择器）
querySelectorAll()	document.querySelectorAll('p.cls')	通过 CSS 选择器获取所有匹配元素的静态列表。

3.5内置对象

内置对象有Array 、String 、Math 、Date

tips: Math对象是js的一个全局对象，不需要示例

3.5.1 Date对象

3.5.2 Math对象