首页 前端知识 JavaScript 基础入门

JavaScript 基础入门

2024-05-10 08:05:41 前端知识 前端哥 410 776 我要收藏

一、JavaScript 介绍

1、web网页标准

  • HTML是一种标记语言,用来结构化我们的网页内容并赋予内容含义,例如定义段落、标题和数据表,或在页面中嵌入图片和视频。
  • CSS是一种样式规则语言,可将样式应用于 HTML 内容,例如设置背景颜色和字体,在多个列中布局内容。
  • javascript是一种脚本语言,可以用来创建动态更新的内容,控制多媒体,制作图像动画,还有很多。(好吧,虽然它不是万能的,但可以通过简短的代码来实现神奇的功能。)

2、 javascript概述

  1. JavaScript主要用于HTML的页面,嵌入在HTML的源码中。
  2. JavaScript是因特网上最流行的脚本语言,它存在于全世界所有的Web浏览器中,能够增强用户与Web站点和Web应用程序之间的交互。
  3. JS是弱类型语言,没有类型声明,它的变量不必具有一个明确的类型。
  4. JS是脚本语言。换句话说,能够用来编程的并且直接执行源代码的语言,就是脚本语言。
  5. JS也是解释性的语言。何为解释性语言?是在运行的时候将程序直接翻译成机器语言。
  6. JS是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言,可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
  7. HTML5的出现更是突出了JavaScript的重要性,例如HTML5的绘图支持、本地存储、离线应用、客户端通信等,都大量使用了JavaScript。

3、 javascript的历史

  • JavaScript 最初被称为 LiveScript,由 Netscape(Netscape Communications Corporation,网景通信公司)公司的布兰登·艾奇(Brendan Eich)在 1995 年开发(这哥们在两周之内设计出了JavaScript语言。你没看错,这哥们只用了10天时间。)。在 Netscape 与 Sun(一家互联网公司,全称为“Sun Microsystems”,现已被甲骨文公司收购)合作之后将其更名为了 JavaScript。
    图:布兰登·艾奇,JavaScript 创始人

  • 之所以将 LiveScript 更名为 JavaScript,是因为 JavaScript 是受 Java 的启发而设计的,因此在语法上它们有很多相似之处 ,JavaScript 中的许多命名规范也都借鉴自 Java,还有一个原因就是为了营销,蹭 Java 的热度。

  • 同一时期,微软Nombas(一家名为 Nombas 的公司)也分别开发了 JScriptScriptEase 两种脚本语言,与 JavaScript 形成了三足鼎立之势。它们之间没有统一的标准,不能互用。为了解决这一问题,1997 年,在 ECMA(欧洲计算机制造商协会)的协调下,Netscape、Sun、微软、Borland(一家软件公司)组成了工作组,并以 JavaScript 为基础制定了 ECMA-262 标准(ECMAScript)。第二年,ISO/IEC(国际标准化组织及国际电工委员会)也采用了 ECMAScript 作为标准(即 ISO/IEC-16262)。

JavaScript与ECMAScript的关系:
本质上都跟一门语言有关,一个是语言本身的名字,一个是语言的约束条件,后者是前者的规格,前者是后者的一种实现。

4、 javscript的组成

ECMAScript : 构成了JS的核心语法
BOM :Browser Object Model【浏览器对象模型】,用来操作浏览器上的对象
DOM :Document Object Model【文档对象模型】,用来操作网页中的元素

  1. ECMAScript: 定义了javascript的语法规范,描述了语言的基本语法和数据类型
  2. BOM (Browser Object Model): 浏览器对象模型
    • 有一套成熟的可以操作浏览器的 API,通过 BOM 可以操作浏览器。
    • 比如: 弹出框、浏览器跳转、获取分辨率等
  3. DOM (Document Object Model): 文档对象模型
    • 有一套成熟的可以操作页面元素的 API,通过 DOM 可以操作页面中的元素。
    • 比如: 增加个 div,减少个 div,给div 换个位置等

总结JS 就是通过固定的语法去操作 浏览器 和 标签结构 来实现网页上的各种效果

二、javascript基本使用

1、 JS 嵌入方式

在 HTML 中使用 JS 可以用以下几种方式实现:

  • 行内式
  • 内嵌式
  • 外部引用 js 文件

行内式,可以在 html 元素中直接用使用 js 语句,但是一般都是调用函数或简短的语句。

<input type="button" value="Click" onclick="alert('Hellow World')">

内嵌式,一般用于实现比较小的功能,代码不长的情况

<script>
    alert('Hello World');
</script>

外部JS文件,最常见的方式

<script src="js路径"></script>

2、 JS 注释

// 单行注释    
/*  多行注释 */

3、 JS 输入输出语句

  • alter/prompt/confirm来源于window对象
alert(msg)  // 浏览器弹出框
console.log(msg)  // 浏览器控制台打印输出信息
prompt(info)  // 浏览器弹出输入框,用户可以输入
confirm()

4、JS事件

  • onclick 鼠标点击左键
  • ondbclick 鼠标双击
  • oncontextmenu 鼠标点击右键
  • mousedown 鼠标按键被按下
  • mouseup 松开鼠标按键
  • onselect 文本被选中
  • oncopy 元素内容被复制
  • onmouseenter 鼠标移动到事件监听的元素内(不区分子元素)
  • onmouseover 鼠标移动到有事件监听的元素或它的子元素内
  • onmouseleave 鼠标离开元素外(不区分子元素)
  • onmouseout 鼠标离开元素,或它的子元素外
  • onfocus 获得鼠标焦点(点击input输入框)
  • onblur 失去鼠标焦点(进入其他input输入框)
  • onmousemove 鼠标移动
  • onmouseup 鼠标弹起
  • onmousedown 鼠标按下

5、 查找 HTML DOM 中的元素

HTML DOM 能够通过 JavaScript 进行访问(也可以通过其他编程语言)。在 DOM 中,所有 HTML 元素都被定义为对象。我们可以通过 Javascript 对这些对象操作,改变 HTML 元素的内容。

getElementById()

可以通过标签中的id属性来获取这个标签中的值

<div id="a">This is new Element</div>
<script>
    // 页面文档从上往下加载,需要将 script 代码写在下边
    var dom = document.getElementById('a');
	// 显示id为new的对象中内容
    console.log(dom);
	// 可以打印我们返回的元素对象,更好的查看里边的属性和方法
    console.dir(dom);  
</script>

三、ECMAScript

ECMAScript是一种由Ecma国际(前身为欧洲计算机制造商协会,英文名称是European Computer Manufacturers Association)通过ECMA-262标准化的脚本程序设计语言。

  • 语法
  • 类型
  • 语句
  • 关键字
  • 保留字
  • 运算符
  • 对象

1、 变量

1、定义

变量是程序在内存中申请的一块用来存放数据的空间。通过变量名称我们可以使用或修改保存在系统中的对应的数据。

2、声明变量

Js 是一种弱类型或者说动态语言,不用提前声明变量的类型,变量的类型会自动判断。即使赋值之后,变量的类型根据重新赋值的数据类型同样进行改变。

var a;  // 声明一个名称为a的变量
a= 12;  // 给a这个变量赋值为12
3 、初始化变量
var age = 12
var name = 'Tom'
name = 'OO'  // 再次给相同变量赋值则不用 var 进行初始化
4、 输入存储变量
var name = prompt('请输入你的名字')
alert(name)
5、 变量的命名规范
  • 由字母、数字、下划线、$符号组成,不能以数字开头
  • 不能是关键字和保留字,例如:for,while,this,name
  • 区分大小写
  • 变量名必须有意义
  • 小驼峰命名法,如:myName
  • 建议不要用$作为变量名
6、 查看变量
//利用js输出语句进行打印
//F12在控制台上查看
console.log(变量名);

2、数据类型

1、数字类型(number)

NaN 非数字 Not a Number

2、字符串类型(string)
var a="字符串";
//字符串转义符
\n	//换行
\r	//回车
\\
\'
\"
\t
\b  // 空格
\xnn  // 16进制字符,如 \x41 代表 'A'
\unnn  // 16进制 unicode 字符, 如 \u03a3 代表∑
//字符串长度
变量名.length
3、布尔型(Boolean)

布尔型 Boolean 只有两个值,一个是 true,代表1; 一个是 false,代表0

4、null 空值
5 、undefined 未定义

一个声明后没有被赋值的变量会有一个默认值 undefined

  • 变量被声明了,但没有赋值时,就等于undefined。

  • 调用函数时,应该提供的参数没有提供,该参数等于undefined。

  • 对象没有赋值的属性,该属性的值为undefined。

  • 函数没有返回值时,默认返回undefined。

undefined 和 null 的区别

只设置了null作为表示"无"的值。根据C语言的传统,null被设计成可以自动转为0。JavaScript的最初版本是这样区分的:null是一个表示"无"的对象,转为数值时为0;undefined是一个表示"无"的原始值,转为数值时为NaN。

  • undefined和null在if语句中,都会被自动转为false
6、 其他类型
  • 数组
  • 对象
7、数据类型转换
typeof()//查看数据类型
null //返回object类型
toString()//转换为字符串类型
parseInt()//转换为数字类型
parseFont()//转换浮点型
Number()//强制转换
//隐性转换,可以用	-  *   /	(加号正能用作正负值将字符串转为数字型,如果用在变量后边则变为拼接字符串)
Boolen()//转换为布尔类型

3、运算符

表达式:任何能代表值的式子

1、 算数运算符
+ - * / %

浮点数运算精度问题,尽量避免用浮点数直接进行运算

2、 递增递减运算符
++i;  // 前置递增(先自加后返回)
--i;  // 前置递减

i++;  // 后置递增(先返回值,后自增)
i--;  // 后置递减
3、 比较运算符

比较运算符,是两个数据进行比较时所使用的运算符,比较运算后,会返回一个布尔值(true / false)作为运算结果。

// 普通比较运算符
<
>
>=
<=
==  // 不会比较数据类型 (1 == '1' 为真)
=== // 会比较数据类型
!=
!== // 全不等(包括数据类型)
  • 比较运算符两侧表达式先转为布尔型再进行比较
  • ‘0’ 用 Boolen() 做判断的时候是 true,但是用 == 比较运算符和布尔值比较的时候 ‘0’ 是 false,但 ‘0’ == 0 是真
  • undefined 和 null 在 Boolen() 做判断的时候是 flase,但是用 == 比较的时候他们不等于 false
  • NaN 和任何值都不相等,包括它本身,即 NaN == NaN 为假
4、 逻辑运算符
 &&          与 
 \|\|!
  • 如果只是普通逻辑运算(两侧都是布尔型),返回的还是布尔型
  • 与 undefined, null 做 && 运算返回 undefined, null
  • !1 返回 false
5、赋值运算符
+=
-=
*=
/=
6、 运算符优先级
 .[ ]( )                        从左到右
 ++---、!、newtypeof          从右到左
 */%                             从左到右
 +-                                从左到右
 <、<=、>、>=ininstanceof   	从左到右
 ==!====!==                    从左到右
 &&                                  从左到右
 II                                  从左到右
 ?:                                  从右到左 
 =*=/=、%=+=-=&=^=!= 	从右到左
 ,                                  从左到右 

4、流程控制

1、顺序结构
2、选择结构
1)if 分支结构
if(条件表达式){
//执行代码
}
//双开分支
if(){}else{}
///多分支
if(){}else if(){}else{}
2) 三元运算符

如果条件表达式结果为真,则返回表达式1,的值,否则返回表达式2的值

条件表达式 ? 表达式1 : 表达式2
3) Switch
switch(表达式){
    case value1:
        // 执行语句1
        break;
    case value2:
        // 执行语句2
        break;
    default:
        // 如果无条件满足,最终执行语句
}

开发中表达式通常写为变量,变量值需要和 case 的 value 值全匹配,值和数据必须完全一致

Switch 与 IF 区别

  1. switch…case 语句通常处理 case 为比较确定值的情况,if…else语句通常用于范围判断(大于、小于)
  2. switch 语句进行条件判断直接跳转到case,效率更高,if 语句是顺序判断,效率低

5、 循环结构

1、 for 循环
for(初始化变量; 条件表达式; 操作表达式){
    // 循环体
}

// 初始化变量: 用 var 声明的一个普通变量,通常用于计数器使用
// 条件表达式: 用来判断每一次循环是否继续执行,是终止的条件
// 操作表达式: 是每次循环最后执行的代码,经常用于计数器变量的更新(递增或递减)
2、 嵌套循环
for (外层循环初始化变量; 外层循环表条件达式; 外层操作表达式){
    for(内层循环初始化变量; 内层循环表条件达式; 内层操作表达式){
        // 循环代码
    }
}
3、 while 循环
while(条件表达式){
    // 循环体
}
// while 循环一般需要配一个计数器,然后再循环体内设置一个终止循环,否则会陷入死循环
4、 do while 循环
do {
    // 循环体
} while(条件表达式)
//和 while 循环比,do while 循环至少需要执行一次,然后进行判断是否终止循环。
5、 continue 和 break
  • break 关键字用于直接跳出循环
  • continue 关键字用于立即跳出本次循环,进入下一次循环
6、 断点调试

在 Chrome 中 F12 进入调试模式,进入 Sources,在代码行数下断点,然后刷新则会进入到断点

6、 数组

数组可以把一组相关的数据一起存放,并提供方便的访问方式。

1、 创建数组
// 利用对象创建数组
var list= new Array();

// 利用 [] 快捷创建数组
var list= [];
var list = [1, 2, 3, 'Pink', True];
2、 访问数组元素

数组可以通过索引来访问、设置、修改对应的数组元素,可以通过 “数组名[索引]“ 的方式来获取数组中的元素。

var list= ['张三', '李四', '王五'];
// 索引号:   0       1      2      

console.log(list);  // 输出整个数组所有元素
console.log(list[0]);  // 使用 数组名[索引号] 获取数组数组内指定元素的值
3、遍历数组
list= ['a', 'b', 'c', 'd'];
for (var i = 0; i <= 3; i++) {
    console.log(list[i]);
}
4、 数组长度属性 length
arr= ['a', 'b', 'c', 'd'];
console.log(arr.length);  // 输出4
5、冒泡排序
var arr = [5, 4, 3, 2, 1];
for (var i = 0; i < arr.length - 1; i++) { // 外层循环
    for (var j = 0; j <= arr.length - i - 1; j++) {
        if (arr[j] > arr[j + 1]) {
            var temp = arr[j];
            arr[j] = arr[j + 1];
            arr[j + 1] = temp;
        }
    }
}

7、 函数

1、 声明函数
// 声明函数
function 函数名(){
    // 函数内部代码,又称为函数体
}

// 调用函数
函数名();  

8、 作用域

全局变量:

  • 变量在<script>标签之内,或者是一个单独js文件
  • 如果在函数内部没有声明的变量也属于全局变量(即在函数内部可以使用外部的变量)
  • 浏览器关闭才会销毁

局部变量:

  • 变量声明在函数内部

  • 函数的形参也可以看做是局部变量

  • 函数执行完毕就会销毁

链式作用域:

  • 函数内部可以调用父集中的变量
var num = 10;
function fn(){
    var num = 20;
    
    function fun(){
        console.log(num);  // 链式作用域,找父集中的变量,如果没有再找上级
    }
}


下一章:函数和BOM编程(JS)

转载请注明出处或者链接地址:https://www.qianduange.cn//article/7942.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!