黑马pink老师前端从入门到精通教程汇总(附源码+配套资料)

本篇内容主要是PINK老师教程汇总(主要内容如下)

1.web端布局:先讲解HTML5常用标签,接着讲解CSS3常见样式增加的H5C3新特性,新语法,最后讲解PC端品优购项目。以及CSS3动画 2d 3d效果

2. 移动端布局:主要讲解视口、二倍图、流失布局,flex布局,rem布局,响应式布局,还会增加摹客使用等工具。

3.JavaScript基础从变量的定义与使用、流程控制语句、数组、函数、构造函数、内置对象以及对象等

4.web API 讲解如何获取DOM元素,如何操作DOM 元素,BOM操作 移动端制作网页特效

5. 后面还会有js高级,ES6类面向对象语法,面向对象案例,原型和原型链等等。

6. 还有会jquery 综合 + echarts数据可视化(待更)

教程推荐:

前端Html5+Css3+移动Web教程,前端Web入门教程,零基础前端开发视频教程Jav

JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts黑马pink老师前端入门基础视频教程(500多集)持续

 一、初识 JavaScript

1 JavaScript 是什么

布兰登·艾奇(Brendan Eich,1961年~)。

神奇的大哥用10天完成 JavaScript 设计。

最初命名为 LiveScript后来在与 Sun 合作之后将其改名为 JavaScript

JavaScript 是世界上最流行的语言之一,是一种运行在客户端的脚本语言 Script 脚本的意思)

脚本语言:不需要编译运行过程中由 js 解释器( js 引擎逐行来进行解释并执行

现在也可以基于 Node.js 技术进行服务器端编程

黑马pink老师前端从入门到精通教程汇总(附源码+配套资料)_第1张图片 

2、JavaScript 的作用

1、表单动态校验(密码强度检测)  JS 产生最初的目的

2、网页特效

3、服务端开发(Node.js)

4、桌面程序(Electron)

 5、App(Cordova)

6、控制硬件-物联网(Ruff)

7、游戏开发(cocos2d-js)

3、 HTML/CSS/JS 的关系

HTML/CSS 标记语言--描述类语言

HTML 决定网页结构和内容( 决定看到什么 ),相当于人的身体

CSS 决定网页呈现给用户的模样( 决定好不好看 ),相当于给人穿衣服、化妆

JS 脚本语言--编程类语言

实现业务逻辑和页面控制( 决定功能 ),相当于人的各种动作

4、浏览器执行 JS 简介

浏览器分成两部分渲染引擎和 JS 引擎

渲染引擎用来解析HTML与CSS,俗称内核比如 chrome 浏览器的 blink 版本的 webkit

JS 引擎:也称为 JS 解释器 用来读取网页中的JavaScript代码,对其处理后运行比如 chrome  浏览器的 V8

浏览器本身并不会执行JS代码,而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码 JS 引擎执行代码逐行解释每一句源码转换为机器语言),然后由计算机执行,所以 JavaScript 语言归为脚本语言,会逐行解释执行。

黑马pink老师前端从入门到精通教程汇总(附源码+配套资料)_第2张图片

 5、JavaScript 的组成

黑马pink老师前端从入门到精通教程汇总(附源码+配套资料)_第3张图片

  1、ECMAScript

ECMAScript 是由ECMA 国际 原欧洲计算机制造商协会)进行标准化的一门编程语言,这种语言在万维网上应用广泛,它往往被称为 JavaScript JScript,但实际上后两者ECMAScript 语言的实现和扩展。

黑马pink老师前端从入门到精通教程汇总(附源码+配套资料)_第4张图片

 

ECMAScriptECMAScript 规定了JS的编程语法和基础核心知识,是所有浏览器厂商共同遵守的一套JS语法工业标准。

更多参看MDN:  https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/JavaScript_technologies_overview

2. DOM ——文档对象模型

文档对象模型Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标记语言标准编程接口通过 DOM 提供的接口可以对页面上的各种元素进行操作(大小、位置、颜色等

3. BOM ——浏览器对象模型

BOM (Browser Object Model,简称BOM) 是指浏览器对象模型,它提供了独立于内容的、可以与浏览器窗口进行互动的对象结构通过BOM可以操作浏览器窗口比如弹出框、控制浏览器跳转获取分辨率等

6 JavaScript 初体验

JS 3种书写位置分别为行内外部

1. 行内式 JS


  • 可以将单行或少量 JS 代码写在HTML标签的事件属性以 on 开头的属性),如:onclick
  • 注意单双引号的使用:在HTML中我们推荐使用双引号, JS 中我们推荐使用单引号
  • 可读性差, 在html中编写JS大量代码时,不方便阅读;
  • 引号易错,引号多层嵌套匹配时,非常容易弄混;
  • 特殊情况下使用

2. 内嵌 JS


  • 可以将多行JS代码写到
    • 利于HTML页面代码结构化,把大段 JS代码独立到 HTML 页面之外既美观,也方便文件级别的复用
    • 引用外部 JS文件的 script 标签中间不可以写代码
    • 适合于JS 代码量比较大的情况

    二、JavaScript注释

    1 单行注释

    为了提高代码的可读性,JSCSS一样,也提供了注释功能。JS中的注释主要有两种,分别是单行注释多行注释

    单行注释的注释方式如下:

    // 我是一行文字,不想被 JS引擎 执行,所以 注释起来

    //  用来注释单行文字(  快捷键   ctrl  +  /   )

    2. 多行注释

    多行注释的注释方式如下:

    /*
    
      获取用户年龄和姓名
    
      并通过提示框显示出来
    
    */

    /* */  用来注释多行文字( 默认快捷键  alt +  shift  + a

    快捷键修改为:   ctrl + shift  +  / 

    vscode à 首选项按钮  à  键盘快捷方式 à  查找 原来的快捷键  à 修改为新的快捷键 à 回车确认

    三、JavaScript 输入输出语句

    为了方便信息的输入输出,JS中提供了一些输入输出语句,其常用的语句如下:

    黑马pink老师前端从入门到精通教程汇总(附源码+配套资料)_第5张图片

    注意:alert() 主要用来显示消息给用户,console.log() 用来给程序员自己看运行时的消息

     

你可能感兴趣的:(CSS,前端,JavaScript,前端,javascript,echarts,HTML,css)