前端学习第四天-圣杯布局+js语法入门

最新推荐文章于 2024-09-26 01:42:12 发布

疯声

最新推荐文章于 2024-09-26 01:42:12 发布

阅读量35

点赞数

文章标签： javascript 前端学习

本文链接：https://blog.csdn.net/qq_42723759/article/details/131115398

版权

文章介绍了前端开发中的圣杯布局，讲解了iframe的使用以及表格相关标签。接着深入到JavaScript，阐述了ES规范中的基本数据类型，包括let和const的区别，以及数组、函数等复杂数据类型的概述。同时提到了BOM和DOM在浏览器交互中的作用。

摘要由CSDN通过智能技术生成

from：Joshua老师前端课程第四天

圣杯布局

在这里插入图片描述

iframe:引入一个外部页面到本页面, src:外部页面的路径 frameborder:引入页面边框默认 0 无边框,此页面一般设置宽高占满父元素,否则引入的页面不会撑满父元素
```
 <iframe src="./17-面板.html" frameborder="0" style="width:100%;height:100%" name="etoak"></iframe>
```
target属性：可以给标签添加target属性，当target的值与iframe中name的值相同时，点击该标签渲染的结构，该标签的目标页会替换iframe中src引入的页面

表格

标签
- table:表格
- tr：行
- td：列，左对齐
- caption：表格标题，非必须
- tread：嵌套在表头搭配css使用
- th：使用在表头的列，默认文本加粗居中
- tbody：嵌套表格主体，如果不屑，浏览器自动添加，搭配css使用

js语法入门

Javascript的语法结构：ES规范 BOM(浏览器对象模型) DOM(文档对象模型)

ES规范

完全遵循 ES5 ES6等规范

基本数据类型

string number boolean null undefined bigint(ES8新增) symbol(ES6新增)

string
- tostring()
- ES5
```
var count = 100;
var str = "etoak";
```
- ES6：let和const取代了var作为标识符， let：赋值变量， const：赋值常量
  
  let声明的变量可以改变,值和类型都可以改变;const声明的常量不可以改变,这意味着,const一旦声明,就必须立即初始化,不能以后再赋值
```
let count = 100
const str = 'etoak'
```
number：数字
- NaN：表示not a number
- Infinity：正无穷
- -Infinity：负无穷
- number()
- parseInt()
- -0
boolean：布尔值 true和false
- 在 js 中null NaN underfined false 0 ‘’ 被统称为假值，等同于false
- 去除假值意外的值统称为真值，在流程控制中等同于true
```
let str = ''
id(!str){//执行该分支
}
const arr = [1,2.3]
if(arr.length){
    //如果数组长度不为0，则进入此分支
}
```
- !!：根据真假值进行数据转换，假值转换为false
null

undefined


//Java

int count = 100;

String str = "etoak";

int count2;

String str2;

//Js

let count = 100 //number

let count2  // undefined

//Ts

let count:number = 100

const str:string = 'etoak'

bigint(ES8新增)： let count2 = 100n
symbol(ES6新增)

复杂数据类型（地址数据类型、引用数据类型）
- Array：数组
- Function：函数
  
  js中的函数必定存在返回值，要么return数据，要么返回undefined
- RegExp：正则表达式 https://any86.github.io/any-rule/
- Math：数学运算
- Date：日期运算

BOM 浏览器对象模型

Browser Object Model

将浏览器看做一个大的对象 window

根据浏览器不同的功能还存在六个子对象,此七个对象是内置对象,我们可以直接使用

BOM 就是提供了一组用户使用脚本操纵浏览器的接口

window:顶层对象,全局变量,表示整个浏览器窗口
- document:表示页面正文,配合 DOM,可以修改页面的结构和样式等
- location:封装页面的地址栏信息,通过此对象可以进行跳转,路径截取等
- history:封装浏览器的历史记录,缓存等
- screen:可以获取当前屏幕的信息,例如获取分辨率,颜色,控制鼠标指针等
- navigtor:可以获取当前打开页面的浏览器信息
- frame:已经被淘汰,页面的一种框架,是 iframe 的前身

DOM 文档对象模型

提供了使用 js 脚本操纵页面结构和样式的多种接口

其实就是各种节点,存在较大差异性问题

文档节点:就表示根元素,一个 html 页面只有一个文档节点
元素节点:就是指页面中的各种元素,通过 document 使用 js 选择器可以从模型中获取一个或者多个元素节点
- ES5
  - document.getElementById(‘id’):根据 id 属性从模型中获取唯一一个元素节点
  - document.getElementsByName(‘name’):根据 name 属性从模型中获取多个元素节点,被封装在一个类数组中
  - document.getElementsByTagName(‘tag’):根据标签名从模型中获取多个元素节点,被封装在一个类数组中
  - document.getElementsClassName(‘class’):根据 class 属性从模型中获取多个元素节点,被封装在一个类数组中
- ES6
  - document.querySelector(‘sel’):使用 css 选择器从全文获取唯一一个元素节点
  - document.querySelectorAll(‘sel’):使用 css 选择器从全文获取多个元素节点,封装在一个类数组中
属性节点:就是指元素中的各种属性
- <tagName 属性名=“属性值” />
文本节点:就是指页面中的各种文本

注释节点:就是指页面中的各种注释

<html>
    <body>
    <div id="outter">测试1<span>测试2</span>测试3</div>
    </body>
</html>

疯声

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫