前言
前端三件套: HTML , CSS , JavaScript
我们熟知的前端应用范围很广, 浏览器网页, 各类小程序,手机app, 电脑应用 都可以使用 JavaScript编写
W3C组织确定JavaScript为现代web唯一正统的语言之前,php也是可以写前后端,但根据W3C的规定,现代前端的正统就是JavaScript
HTML: 超文本标记语言
这门语言实际上是一个标签语言,就相当于在画框内的标签纸,你可以随意的摆放它的位置,画框也不会出错
它很像人体的骨骼,你可以随意的设置骨骼的位置从而拼凑成不同的物体
例如
这是一个块元素
html元素大多形如 内容
<div class="content">
<h2>我是一个标题</h2>
<p> 标签元素</p>
<span>文字</span>
</div>
<ul id="list">
<li>这是一个个列表</li>
<li>这是一个个列表</li>
<li>这是一个个列表</li>
<li>这是一个个列表</li>
</ul>
CSS: 层叠样式表
这门语言规定了HTML的外观,比如你用HTML拼凑的物体外观是什么颜色,它应该在什么位置显示,他的宽高有多大,他是否可以以3D的方式显示等等
.content{ // 通过 '.' 来命中html中经过 class 声明的元素
width: 300px;
height: 200px;
background-color:#ff0; // 背景色
border:1px solid #f00; // 边框 1像素 实线 红色
}
#list{ // 通过 '#' 来命中html中经过 id 声明的元素
list-style: none; // 列表样式为none
}
JavaScript(js): web正统
这门语言可以用来实现你拼凑的物体可以有什么行为
比如你拼凑了一个小狗,那么这只小狗可以跑,可以叫,可以趴着,可以站着....
这一系列的行为由JavaScript来操控,本文重点讲JavaScript
1. 变量
在计算机中,所有的单位都可以被称为一个变量,变量存在于内存中
在js中声明一个变量的方式有三种 let ,const ,var , 其中 const(constant) 声明的是一个常量,意为不会改变的量,
ECMAScript(js的官方组织)组织在2015年规定(即ECMAScript2015,又称ES6),js声明变量的方式新增的两个关键字 let / const, 也就是说在2015年以前声明变量都是用的var,这种声明变量的方式有很多弊端,本文主旨是带你入门,所以不再介绍var的使用
var name = "你的名字"
let name1 = "我的名字"
const name2 = "他的名字"
2. 数据类型
在计算机中,每一种变量都有他指定的类型,
在js中分为两大类数据类型
2.1. 原始类型:
- String(字符串)
- Boolean(布尔,true/false)
- Number(数字)
- null(空)
- undefined(未定义)
- Bigint(大数)
- Symbol(唯一字符)
const str = "一只字符串(const声明的变量不可更改)"
let str1 = "另一只字符串(let声明的变量可以更改)"
str = "我改不了" // const 声明的原始类型不可更改 , 会报错
str1 = "我改咯" // 不会报错
const flag = true
flag = false // 会报错
let num = 2
num = num + 1 // num 为 3 ,num+1后的值重新赋值给了 num
let n = null // n为null
let un // un为undefined, 经过let 声明的变量初始值不赋值,那么它的值为undefined
const k // 会报错, 因为常量必须有初始值,因为它不可变,而你不给他赋值,那么这个常量就没有任何意义
// 所以不允许这样声明常量,如何你想改变一个变量,请使用let声明
...
2.2. 对象类型
Object
- Object
- Array(数组(元素集合)属于特殊的对象,它的key是有规律的从0开始的自然数)
- Function(函数属于特殊的对象,在对象内部有了[[call]]这个方法就被成为函数)
- Date(日期对象,特殊的对象)
- RegExp(正则对象,特殊的对象)
- ...
const obj = {
key: "我是对象类型",
list: ["123",123],
obj1:{
key1: "对象类型的key只能是string ,而value可以为任意类型 "
}
}
obj.key = "我改了obj.key"
obj = { a:"我是a" } // 会报错, 因为 obj 不能被更改,但是obj内部的key可以被更改
const arr = ["我是数组类型的第一个元素,索引为 '0' ",213,true,false,{ key: "你好" }, ['hello,我又来啦!'] ]
function fn(){
console.log("我是一个函数")
}
fn() // 函数名为 fn + () 即为调用函数(在对象内部执行 [[call]] 方法)
const date = new Date() // 获取当前时间
let reg = /abc/ // 这是一个可变的正则表达式, 意为匹配 abc
3. for循环
for循环用来循环一个可迭代对象
const arr = [1,2,3,45555,6666,1,2,3,45,6]
for (let i = 0; i< arr.length; i = i + 1){
// 声明一个i变量初始值为0 , 因为要从arr的第一个开始循环, arr的索引是 0 ~ arr.length-1
// arr.length 就是arr的长度,即: arr 一共有多少个元素
// i = i + 1 就是每次循环都要让 自增 1 ,于是i就会变成 1, 2, 3, 4, 5, ...
const item = arr[i] // 使用 [] 来填充一个变量i ,如果使用 arr[0] , 那么代表每次拿到的都是arr 的第一个此元素
// 此时的 item 就是arr每次循环时对应的第i+1个 元素
console.log(item) // 输出打印一下 item
}
// 循环可以嵌套
const arr = [["1",2,3,5],[2,2,5,55,"adf"]]
outer: for (let i = 0; i< arr.length; i = i + 1){
const item = arr[i]
for (let j = 0; j < item.length; j = j + 1){
const ele = item[j]
if(ele===55){
break outer // 跳出外层循环
}
}
}
4. 函数
// 函数一般有两种常见的格式
fn() // 执行函数 fn
function fn(arguments){
// function 是关键字
// fn 是函数名
// arguments 是函数的参数
return 1 // return 表示终止函数 并且函数fn 抛出了一个值 `1`
}
// 声明一个变量func来接收箭头函数
const func = (args) => {
//
}
func() // 执行函数 func
4. 项目实战
<div class="wrapper">
<h1 id="title"> 我是标题</h1>
<p class="content">这里是html元素</p>
</div>
<script>
// js 代码写在 script 标签里面
const wrapper = document.querySelector(".wrapper")
const title = document.querySelector("#title") // document是js的dom顶层对象,所有获取dom元素的方法都可以从document里面找到
const content = document.querySelector(".content") // querySelector就是可以用来查找dom元素的一个函数,查找元素的方式类似于 css
title.addEventListener("click",handleClick) // 给title 注册点击事件,每次点击title元素都会触发 handleClick函数
function handleClick(e){ // e 为事件参数,在本文中是由title 的点击事件创建的,所有e是由点击事件提供的
const target = e.target // 目标元素
target.innerText = " 我被改变了! " // innerText 是title元素的文本内容, 所以我们更改了它的内容
// 它由原来的 '我是标题' 经过点击变为 ' 我被改变了! '
}
const wrapperChildren = [...wrapper.children]
for (let i = 0; i < wrapper.children.length; i = i + 1){
const child = wrapper.children[i] // wrapper 的子元素
console.log(child)
}
</script>
