javascript 入门第一天 javascript

今日内容

JavaScript介绍JavaScript的基本语法JavaScript的属性和文本操作JavaScript的Dom操作

一.JavaScript介绍

JavaScript概述

? JavaScript是一门客户端脚本语言，基于对象和事件驱动的一门客户端脚本语言，可以直接在浏览器端运行。

客户端：浏览器脚本语言：无需编译，可以直接运行（只要电脑上安装了浏览器，可以运行javascript语言）基于对象：javascript已经提供好了大部分对象，前端开发者，可以直接使用这些对象（对象无需创建，直接使用）事件驱动：通过触发事件，驱动事件绑定的javascript代码，实现网页的动态效果。核心功能就是增强用户和 HTML 页面的交互过程，让页面有一些动态效果。以此来增强用户的体验！[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ttNeMDuw-1641790802304)(.\img\javaScript表格介绍.png)]

2.JavaScript发展历程

1995 年，NetScape (网景)公司，开发的一门客户端脚本语言：LiveScript。后来，请来 SUN 公司的专家来进行修改，后命名为：JavaScript。1996 年，微软抄袭 JavaScript 开发出 JScript 脚本语言。1997 年，ECMA (欧洲计算机制造商协会)，制定出客户端脚本语言的标准：ECMAScript，统一了所有客户端脚本语言的编码方式。总结在这里插入图片描述

3.JavaScript和Java的关系
==JavaScript和java的不同之处

JavaScript是一门脚本语言：无需编译，可以直接运行（在浏览器运行）Java是一门编程语言：先编译，后运行（编译的过程依赖与jvm）JavaScript是基于对象的脚本语言：对象可以直接使用，无需创建Java是面向对象的编程语言：对象必须先创建，然后再使用JavaScript是一门弱类型的脚本语言，指的在JavaScript所有类型都可以使用var来表示比如：var num=10; var str=“hello”, var flag = true; Java是一门强类型的编程语言，指的在定义变量时，必须先确定类型，然后在定义变量。比如：int num=10; String str=“hello”; boolean flag = true;

==JavaScript和java的相同之处

JavaScript 和 java的定义基本语法很相似 javaScript书写方式和 java的书写的代码方式很相似

4.JavaScript组成

ECMAScript规范了javascript的基本语法DOMdocument object model : 文档对象模型（由一系列文档对象构成的模型）作用：操作标记性的文档(指的xml或者html文档)BOMbrowser object model: 浏览器对象模型（由一系列浏览器对象构成的模型）作用：操作浏览器的。

5.JavaScript小结

javascript是一门客户端脚本语言javascript是一门弱类型语言(即使有时语法写的很不规范，也不报错)javascript的三个组成部分= 基本语法+DOM+BOM常见的前端开发工具前端开发工具:开发前端代码,比如 html,css, javascript HBuilder (国产的开发工具)：强大很好用，收费的 Vscode (非国产的开发工具)：强大很好用，收费的 WebStom (非国产的开发工具)：强大很不好用，收费的 DreamWeaver(非国产的开发工具): 不强大，很好用后端开发工具: 开发后端的代码,当然也可以开发前端代码(缺点:补全功能不是很好) Idea（集成开发工具）：开发所有语言，开发前端语言，不方便 Eclipse（集成开发工具）：开发java语言，开发前端语言，不方便 MyEclipse（集成开发工具）：开发java语言，开发前端语言，不方便 STS（spring tools suitable 集成开发工具）：开发java语言，开发前端语言，不方便

二.JavaScript的基本语法
1.语法规范

区分大小写的每行代码结束，建议使用分号表示。代码书写格式（建议与java的代码书写格式保持一致）

2.javascript入门程序

入门程序

3.javascript与html结合的两种方式

方式一：直接在html里面，嵌入js代码优点：可以直接看到书写的js代码缺点：js代码和html标签在一起，不便于后期的维护

方式二：引入外部的js文件
步骤一：先定义好一个js文件，步骤二：通过script标签的src属性引入外部定义好的js文件
优点：便于后期js的代码维护
outer.js:
在html网页里面引入：外部的js文件

细节

4.javascript的注释

和java的注释基本一样单行注释： // 注释内容多行注释：/* 注释内容 */

5.五种原始类型

java的类型和javascript的类型基本一样javascript里面的类型分为两大类型判断变量属于什么类型的，可以使用关键词：typeof原始类型 number类型：数字类型 string类型：字符串或者字符 null类型：比如：定义一个变量，赋值为null , var a =null; undefined类型：未定义类型，比如：定义一个变量，没有赋值，var a; boolean类型：表示true或者false…引用类型 Boolean类型 Number类型 String类型等等代码演示

6.常量和变量

javascript是一门弱类型的脚本语言，在定义变量或者常量时，不用指定类型，或者可以使用var, let, const定义局部变量，使用关键词： let比如：let num=10; 建议把let放在方法内部（放在方法方法外部也可以，不建议）

定义全局变量，
基本语法：变量名称= 值 //变量名称就是全局变量 ,不建议这样书写.
建议的书写格式：
var 变量名称A；//变量名称A就是全局变量
变量名称A =赋值
常量值（不能改变的值），关键词：const
细节

如果定义变量时，使用var关键词：存在类型变量的提升（直接来说：先使用，后定义）如果定义变量或者常量时，使用let或者const关键词：不存在类型变量的提升

7.运算符

算术运算符在这里插入图片描述细节：如果数字与字符串类型的数字进行运算时：如果是 + 号，进行的是字符串拼接如果不是 + 号，进行的是算术运算赋值运算符在这里插入图片描述细节：同算术运算符的道理一样。比较运算符在这里插入图片描述

? 细节：
?
? == : 只比较值是否一样
? === :即比较值,又比较数据类型

逻辑运算符在这里插入图片描述三元运算符场景：数据进行分页，100条数据，每页显示10条，求总页数?

8.流程控制语句

if 语句switch 语句for 循环while 循环小练习: 99乘法表

9.数组

数组的创建：方式一：直接创建一个指定元素的数组var arr1 = [1,“a”,“b”,true]; var arr2= new Array(1,“a”,“b”,true); 方式二：创建一个空的数组var arr1=[ ]; 或者 var arr2= new Array(); 方式三：创建一个指定长度的数组var arr= new Array( size 数字)数组的特点：数组的元素类型：可以是任意类型数组的长度可以变化的数组的长度 = 数组的最大索引值+1数组的属性： length属性：获取数组的长度数组的方法：[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-x5cCoWyY-1641790802309)(img/image-20200707152734084.png)]在这里插入图片描述1.var str = 数组对象.join(连接符号); //字符串2.var endEle = 数组对象.pop(); // 删除最后一个元素并返回3.var lenght = 数组对象.push(ele); //向数组末尾添加一个元素ele,返回新的长度 var arrNew = 数组对象.reverse(); //颠倒数组元素的顺序，返回一个新的数组

10.函数

函数的创建方式一：动态函数var fun1 = new Function(参数，方法体); 方式二：普通函数function 方法名称（方法的参数）{方法体内容}方式三：匿名函数var 方法名称 = function (方法的参数）{? 方法体内容}

函数的调用
? 遵循原则：

先创建函数再调用函数注意细节：在定义参数时，参数前面不加var ,let

函数的属性
获取参数的个数： length

注意：在获取参数的个数时：函数名称.length 调用函数：函数名称（参数）；

11.基本语法小结

注释：单行// 多行/**/ 输入输出语句：prompt()、alert()、console.log()、document.write() 变量和常量：let、const 数据类型：boolean、null、undefined、number、string、bigint typeof 关键字：用于判断变量的数据类型运算符：算数、赋值、逻辑、比较、三元运算符流程控制和循环语句：if、switch、for、while 数组：数据类型和长度没有限制，let 数组名 = [长度/元素] 函数：类似方法，抽取代码，提高复用性

三.JavaScript的Dom操作
1.Dom概述
? DOM： Document Object Model 文档对象模型，作用：操作标记性文档（目前学过的xml，html文档）
? 演示DOM操作过程：
在这里插入图片描述
2.Dom分类