前端笔记 04:JavaScript入门

文章目录

  • 目的
  • 语法说明
    • 基础语法
      • 代码和代码块
      • 变量
      • 数据类型
      • 数组
      • 对象
      • 算术和赋值运算
      • 比较和逻辑运算
      • 条件判断
      • 循环
    • 函数
    • 面向对象编程
  • 浏览器对象模型(BOM)
  • 文档对象模型(DOM)
    • 获取元素
    • 新增与删除元素
    • 修改元素属性
  • jQuery
  • 在前端使用JS代码
    • 内联方式
    • 嵌入方式
    • 外部引用
  • 总结

目的

JavaScript是前端基础内容中最复杂的一部分。前面两块HTML和CSS差不多都不能当作是编程语言来看待,而JavaScript是一门正式的编程语言。JavaScript入门需要学习的内容比较多,一篇文章难以介绍全面,这里只是稍微对JavaScript涉及的内容做个简单梳理,需要详细学习JavaScript的话可以参考下面链接:
《JavaScript教程》 - 廖雪峰的官方网站
《JavaScript教程》 - w3school

语法说明

注意下面内容都是些简单的记录,只是记个流水账,想要完整学习还是参考上面链接!

基础语法

前端笔记 04:JavaScript入门_第1张图片
上面是个简单的JS代码演示,功能是在页面加载完成后从控制台输出累加计数值。这段代码差不多就包含了JS大部分基础语法了下面分别进行介绍。

代码和代码块

JS代码是一行行一块块堆砌起来的,每一行以 ; 结尾(行结尾不写 ; 很多时候也能运行,但不推荐这么做),使用 { } 包围形成代码块。默认情况下代码从上到下一行行运行。

变量

可以用 varletconst 声明变量,比如 var a = 1; 或者 let b = 2; 等,a、b是该变量的变量名,声明后在各自作用域内就可以通过变量名来调用。
var 是以前就有的变量声明方式,这个东西坑比较多,特别是对于学过其它类C语言的人来说甚至有可能产生理解困难,就我个人来说从有了let以后就不这么推荐用var了。
let 和其它类C语言中声明的变量相似,其作用域就是在 { } 外声明的变量在 { } 内可见,在 {} 内声明的变量在 {} 外不可见:
前端笔记 04:JavaScript入门_第2张图片
const 声明的变量必须在声明是赋值,并且之后无法修改。
除了上面方式声明变量还可以不通过关键词直接声明变量,比如 c = 3 。该方式声明的变量将是全局变量,全局可见。

数据类型

JS中数据最基本的类型有三种:数值、字符串、布尔值。

// 以下是数值
123; // 整数123
0.456; // 浮点数0.456
1.2345e3; // 科学计数法表示1.2345x1000,等同于1234.5
-99; // 负数
NaN; // NaN表示Not a Number,当无法计算结果时用NaN表示
Infinity; // Infinity表示无限大,当数值超过了JavaScript的Number所能表示的最大值时,就表示为Infinity

// JS中使用 '' 或 "" 包围的既是字符串
// 以下是字符串
'' // 空字符串
"" // 空字符串
"Hello World!" //

// 以下是布尔变量
true; // 这是一个true值
false; // 这是一个false值

除了上面的基本类型外JS中还有两个有意思的东西 nullundefined 。这两个东西分别表示 空值未定义 ,对于其它类C语言来说这个有点奇怪,感兴趣的话可以自行百度了解。

数组

数组是一种非常常用的东西,可以把很多数据串在一起,然后通过索引赋值和取值。下面是个简单的演示:

对象

在JS中任何东西都可以看作是一个对象,但通常情况下只把若干键值对组成的集合当作对象。下面是个简单的演示:

算术和赋值运算

和大多数语言一样变量和对象很多可以进行算术和赋值运算。以下是常见算术运算符:

运算符 描述 运算符 描述 运算符 描述 运算符 描述
+ - * /
++ 自增 自减 ** % 取余
<< 左移 >> 右移 & |
^ 异或 () 括号

赋值运算主要是一些带有 = 的运算,经常还会和上面的算术运算组合。下面列举一些赋值运算:

运算符 例子 等同于 描述 例子 等同于
= x=y x=y += x+=y x=x+y
-= x-=y x=x-y *= x*=y x=x*y
/= x/=y x=x/y %= x%=y x=x%y
>>= x>>=y x=x>>y <<= x<<=y x=x<
&= x&=y x=x&y |= x|=y x=x|y
^= x^=y x=x^y

比较和逻辑运算

比较与逻辑运算通常应用在条件判断的语句中,通过运算最终得到 truefalse 的结果。常见的比较运算符如下:

运算符 描述 运算符 描述 运算符 描述 运算符 描述
== 值相等 === 值和类型都相等 > 大于 >= 大于等于
!= 值不等于 !== 值或类型不相等 < 小于 <= 小于等于

和其他语言不同的,JS中使用 == 时对于不同类型的对象会自动转换类型再进行比较,所以还弄出来一个 ===
前端笔记 04:JavaScript入门_第3张图片
常见的逻辑运算符如下:

运算符 描述 运算符 描述 运算符 描述
&& || !

条件判断

条件判断最常用的就是 if ( ... ) { ... } 语句了,如果圆括号中语句为真则执行花括号中语句。这个语句还有一个变种 if ( ... ) { ... } else { ... } 语句了,如果圆括号中语句为真则执行第一个花括号中语句,否则执行else后面花括号中语句。再更进一步的可以用 if ( ... ) { ... } else if ( ... ) { ... } else { ... } ,如果有多个条件就写多个else if语句。
除了上面的语句外JS中还可以用 switch ( ... ) { case x: ... ; break; case y: ... ; break; default: break;} 语句,该语句直根据圆括号中传入的值来选择后面执行的语句。
另外JS也支持三元运算符。

前端笔记 04:JavaScript入门_第4张图片

循环

循环最常用的就是 for ( ... ) { ... } 语句了只要圆括号中条件为满足就会循环执行花括号中语句。在JS中可以使用 for ( ... in ... ) { ... } 直接循环访问对象或数组中的内容。
除了上面循环语句外,常用的还有 while ( ... ) { ... } 语句。
前端笔记 04:JavaScript入门_第5张图片

函数

JS可以使用下面方式定义函数:

function fun(x){
      // 方式一
 ... 
}

var fun = function (x){
      // 方式二
 ... 
}

函数定义了之后就可以通过函数名(fun)进行调用了 。
JS函数的和其它很多语言一样可以设置默认值:
前端笔记 04:JavaScript入门_第6张图片

面向对象编程

JS传统的面向对象编程和其它类C语言有点差别,传统的JS并没有类的概念,它把某个对象当作原型,其它对象可以指向该原型,继承该原型的属性和方法,从而实现类似类和对象的功能。
在ES6标准中引入了用 class 定义类的方式,下面是个简单的演示:
前端笔记 04:JavaScript入门_第7张图片

浏览器对象模型(BOM)

JS可以通过BOM获取浏览器相关内容或与浏览器交互。BOM对于JS来说表现为一个 window 对象,用户可以操作这个对象来获取信息或交互。 window 对象还充当全局作用域,使用时可以省略 window 本身。这里列举些常用的 window 对象的属性与方法:

  • innerWidth 页面宽度
    innerHeight 页面高度
    outerWidth 浏览器总宽度
    outerHeight 浏览器总高度
    在这里插入图片描述

  • screen.width 显示屏总宽度
    screen.height 显示器总高度
    screen.availWidth 显示器可用宽度
    screen.availHeight 显示器可用高度
    在这里插入图片描述

  • location.href 当前页面url
    location.protocol 使用的web协议
    location.host 主机名与端口号
    location.hostname 主机名
    location.port 端口号
    location.pathname url路径
    location.search url参数
    location.hash url锚部分
    location.assign(url) 加载新页面
    location.replace(url) 用新页面代替当前页面
    location.reload() 刷新页面
    前端笔记 04:JavaScript入门_第8张图片

  • navigator.language 浏览器设置的语言
    navigator.platform 操作系统类型
    navigator.userAgent 访问者信息
    在这里插入图片描述

  • history.back() 相当于点击浏览器的后退按钮
    history.forward() 相当于点击浏览器的前进按钮

  • alert("sometext") 弹出警告框
    confirm("sometext") 弹出确认框
    prompt("sometext","defaultText") 弹出提示框

  • setTimeout(function, milliseconds) 指定毫秒时间后单次执行函数,该方法返回定时器对象
    clearTimeout(timeoutVariable) 取消已设置的setTimeout对象
    setInterval(function, milliseconds) 指定毫秒时间后反复执行函数,该方法返回定时器对象
    clearInterval(timerVariable) 取消已设置的setInterval对象

  • onload(function) 在网页文档加载完成后执行该方法

文档对象模型(DOM)

DOM其实也是BOM中的一部分,它是网页的主体内容,网页中的各种动态或交互效果很多都是操作它实现的。JS对DOM的操作主要是对一个个具体的html标签元素进行操作。

获取元素

获取元素方法常用的下面几个:
document.getElementById(id) 通过元素 id 来查找元素
document.getElementsByTagName(tagname) 通过标签名来查找元素
document.getElementsByClassName(classname) 通过类名来查找元素
通过id查找是最常用的方式,它返回单个元素对象。另外两种方式会返回一个对象数组。
前端笔记 04:JavaScript入门_第9张图片
除了上面的方式外还可以通过下面方法获取元素:
document.querySelector(CSS selectors) 通过CSS选择器字符串来获取符合条件的第一个元素
document.querySelectorAll(CSS selectors) 通过CSS选择器字符串来获取符合条件的所有元素

新增与删除元素

元素新增与删除主要通过下面方法:
document.createElement(tagname) 通过标签创建元素
document.removeChild(element) 移除元素
document.appendChild(element) 添加元素
document.replaceChild(newelement, oldelement) 替换元素
前端笔记 04:JavaScript入门_第10张图片

修改元素属性

对于具体某个元素可以用下面方法修改它的属性内容:
element.innerHTML = new html content 直接改写元素内部html文档内容
element.attribute = new value 修改元素属性
element.setAttribute(attribute, value) 修改元素属性
element.style.property = new style 修改元素样式
element.onclick = function(){code} 添加单击事件
前端笔记 04:JavaScript入门_第11张图片

jQuery

jQuery是一个第三方JavaScript库,可以让JavaScript前端操作变得简单非常多。不过这里我并不是要介绍jQuery,只是要说一点: 当你网上搜索JS代码时,注意这个代码是原生JS代码,还是使用的jQuery的JS代码。 当你看到JS代码中以 $ 开头的就有可能是用了jQuery的。 jQuery当年的影响力实在是太过巨大了。

在前端使用JS代码

在前端使用JS代码主要有三种方式。

内联方式

前端笔记 04:JavaScript入门_第12张图片

嵌入方式

嵌入方式主要就是把JS代码放到 标签之间,看下面演示:
前端笔记 04:JavaScript入门_第13张图片
这种方式有时候对代码前后顺序有要求,因为文档是从上到下解析的,如果JS代码中引用的元素还未加载则会报错,看下面演示:
前端笔记 04:JavaScript入门_第14张图片

外部引用

前端笔记 04:JavaScript入门_第15张图片
外部引用的方式也会出现文档解析顺序的问题,可以通过加 defer 属性来处理:
前端笔记 04:JavaScript入门_第16张图片

总结

JavaScript是一门类C语言,对于学过C、C++、C#、Java等语言的人来说上手都蛮简单的。对于没学过这类语言的人可能需要多花点时间才能入门。JavaScript这门语言因为其历史原因有各种各样的BUG,但并不妨碍它在这几年随着web技术的发展变得越来越流行。对于前端开发来说JavaScript是值得花时间好好学习的。更详细的内容请参考本文开头给出的链接。

你可能感兴趣的:(WEB前端相关,js,javascript,es6,网页)