第一周

最新推荐文章于 2019-10-09 23:23:15 发布

Razas

最新推荐文章于 2019-10-09 23:23:15 发布

阅读量178

点赞数

分类专栏： javascript免费课文章标签：免费课

本文链接：https://blog.csdn.net/qq_25354709/article/details/88068142

版权

javascript免费课专栏收录该内容

8 篇文章 0 订阅

订阅专栏

一、课程介绍

二、前端市场发展趋势

JavaScript && Java: 1995年由布兰登艾奇(Brendan Eich)发明。

1、前端目前正处于工程化开发阶段

主流的框架： vue、react、angular

自动化平台：webpack、gulp

协作工具： git

vue是基于mvvm的， react是基于mvc的。

2、以H5为主的移动端开发正在代替传统的ios/android开发

Hybrid混合开发模式

微信二次开发

微信小程序

ReactNative.js移动端开发框架

3、逐步成长的全栈开发(node.js)

https://insights.stackoverflow.com/survey/2016

4、拥抱虚拟现实VR/AR

WebGL(Web Graphics Library)

Canvas

unity3d

三、常用的开发工具

1、网页三剑客

Adobe Dreamweaver、Adobe Fireworks(Adobe Photoshop)、Adobe Flash

目前设计效果图，很多公司都在使用sketch

2、Sublime Text

http://www.sublimetext.com/

3、Webstorm（推荐）

http://www.jetbrains.com/webstorm/

4、Atom

https://atom.io/

5、HBuilder

http://www.dcloud.io/

四、浏览器内核介绍

1、谷歌浏览器(chrome)：Webkit内核(v8引擎)

safari、大部分国产浏览器(360、搜狗、QQ、UC、猎豹、百度...)、安卓和IOS大部分手机浏览器

2、火狐浏览器(firefox)：Gecko内核

3、欧朋浏览器(oprea)：Presto内核

4、IE浏览器： Trident内核

浏览器兼容：

举个例子：谷歌浏览器开发了一个新的CSS属性：

-webkit-border-radius

火狐浏览器发现这个功能很好用，也实现了这个属性：

-moz-border-radius

记录学习笔记的工具：

优秀的开发工程师们基本上都是使用MarkDown来记录技术资料的(gitHub的仓库说明也是基于MD来编写的)

马克飞象：https://maxiang.io/

五、导入JS的三种方式

1、行内导入JS（慎重：不安全）

<div onclick="alert('hello world!')">hello</div>

2、内嵌式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    alert('hello world!');
</script>
</body>
</html>

3、外链式

<script src="./1.js"></script>

导入CSS的4种方式：

1、行内

<!--行内：HTML和CSS混淆，代码结构混乱-->
<div style="width: 100px;"></div>

2、内嵌式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            background: red;
        }
    </style>
</head>
<body>
</body>
</html>

3、外链式

<link rel="stylesheet" href="./1.css">

4、导入式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        @import "./1.css";
    </style>
</head>
<body>
</body>
</html>

扩展：

css的导入式和外链式的本质区别？

如果把JS放在HTML标签前面了，如何等到结构加载完成再加载JS？

(1) window.onload = function(){}，等页面中所有资源文件都加载完成执行操作

(2) $(document).ready(function () {})，页面中的结构加载完成，就会执行操作

或者：

window.addEventListener('load', function (){}, false)

IE6~8下使用：

window.attachEvent('onreadystatechange',function(){})

六、JS常用的输出方式

1、JS中提供的浏览器弹框， alert

alert({name: 'hello'});  //=>  "[object Object]"
alert([12, 23]);         //=>  "12, 23"

使用alert弹框提示信息，提示的内容最后都会被转换为字符串输出。

alert(1 + 1);  // "2"

2、 confirm，在alert基础上增加了让用户选择性的操作。（提供了两个按钮：确定和取消）。

var result = confirm('are you sure delete this!');
alert(result);

当用户点击确定按钮的时候，我们接收到的结果是true，点击的是取消按钮，我们接收到的结果是false。

此后我们可以根据接收的结果做不同的处理即可。

confirm最后弹出的也是字符串。

3、prompt，在confirm基础上增加让用户输入的效果。

var result = prompt('are you sure delete this!');
alert(result);

用户点击取消按钮，我们获取到的结果是null。如果用户点击的是确定按钮，我们将会获取到用户输入的内容（如果用户没有输入任何内容，获取的结果是空字符串）。

真实项目中，尤其是需要样式精美的网站中，我们的提示框一般都是自己封装插件和组件来实现的，不会用内置的。

后面，有使用原生JS封装模态框组件。

七、学会使用控制台

控制台输出：方便开发人员进行调试的。

F12(FN+F12)打开浏览器的控制台。

1、console.log();

在控制台输出，优势是不会转换数据类型，输出什么格式的数据都可以。

console.log({name:'hello'});   // {name: "hello"}

2、console.dir：比LOG输出的更加详细一些

3、console.table，把JSON数据展示成为一个表格

4、document.write，向页面中打印输出内容

八、JS中的变量和常量

JavaScript

1、ECMAScript(ES)：规定了JS的一些基础核心的知识(变量、数据类型、语法规范、操作语句等）

2、DOM：document object model，文档对象模型，里面提供了一些属性和方法，可以让我们操作页面中的元素

3、BOM：browser object model，浏览器对象模型，里面提供了一些属性和方法，可以让我们操作浏览器

变量和常量：

1、什么叫变量？

变量：值是可以变的

常量：值是不可变的

// JS中定义变量的方式
var 变量名 = 值;  (ES6中定义变量使用let)

var num = 12;
var str = 'hello';

console.log(num);  // 12， 变量其实只是一个无意义的名字，它所代表的意义都是其存储的那个值

num = 13;      // 让原有的num变量存储的值修改为13（变量只能代表一个值）

变量其实只是一个无意义的名字，它所代表的意义都是其存储的那个值。

// 任何一个具体的数据值都是常量，例如: 12就是一个常量

// 和变量类似，我们设置一个常量（也是一个名字），给其存储一个值，但是这个存储的值不能修改

const num = 12;   // 定义一个常量num, 给他存储了12

num = 13;         // Uncaught TypeError : Assignment to constant variable，常量存储的值是不能修改的。不能给常量再定义其他的值。

九、JS中的命名规范

1、JS中严格区分大小写

var test = 'hello';
var Test = 'world';

console.log(test);   // 'hello'， test和Test是两个不同的变量

2、遵循国际命名规则，驼峰命名法

第一个单词首字母小写，其余每一个有意义单词首字母大写。

var studentInfo;


// 1、命名使用英文单词，不要使用拼音
// 2、不是所有单词都能简写，我们需要保证大家看到名字后知道所代表的意思


// 常用的简写
info: information， 信息
init: Initialization， 初始化
add / insert / create: 增加创建插入
remove / rm / clear / del / delete： 删除
update: 修改更新
get / query / select: 查询获取

3、命名的时候可以使用， $ 或者 _ 或者数字或者字母，但是数字不能作为名字的第一位。

var $xxx;   // 一般都是应用JQuery获取到的值
var _xxx;   // 一般这样的情况代表变量是一个全局或者公用的变量

4、JS中有很多的词都是有特殊含义的，我们把这些词叫做关键字，现在没有特殊含义，以后可能会作为关键词的，我们叫做“保留字”，而关键字和保留字都不可以随便用来命名。

十、数据类型分类和检测

1、JS中的数据类型

按照特点划分成两大类：基本数据类型（值类型）和引用数据类型

基本数据类型（值类型）

number：数字

string：字符串

boolean：布尔

null：空对象指针

undefined：未定义

引用数据类型：

object：对象数据类型

对象数据类型里面有， {}普通对象， []数组， /^$/正则

function：函数数据类型

{name: 'hello',  age: 8}

这么多数据类型JS如何的去检测呢？

总共有4种：

1、typeof，检测数据类型的运算符

使用typeof检测，返回的结果是一个字符串。字符串中包含的内容证明了这个值是属于什么类型的。

局限性：

typeof null 不是"null"而是"object"，因为null虽然是单独的一个数据类型，但是它原本意思是空对象指针，

浏览器使用typeof检测的时候，会把它按照对象来检测。

使用typeof无法具体细分出到底是数组还是正则，因为返回的结果都是"object"。

2、instanceof，检测某个实例是否属于这个类

3、constructor，获取当前实例的构造器

4、Object.prototype.toString.call，获取当前实例的所属类信息

typeof 12          // "number"


var num = 13;
typeof num         // "number"


typeof 'hello'     // "string"

typeof  true       // "boolean"

typeof  null       // "object"

typeof undefined   // "undefined"

typeof  {name: 'hello'}    // "object"

typeof function(){}        // "function"

typeof []                  // "object"

typeof  /^$/               // "object"

腾讯的面试题：

console.log(typeof typeof []);    // "string"

typeof []         // "object"

typeof "object"   // "string"

十一、布尔类型详细解读

1、 Boolean() ，这个方法

把其他数据类型的值转换为布尔类型。

只有0、NaN、空字符串、null、undefined这五个数据值转换为布尔类型的false，其余的都会变为true。

Boolean(1)      // true

Boolean(0)      // false

Boolean(-1)     // true

Boolean('')     // false

Boolean(null)   // false

Boolean([])     // true

2、!

!= ，不等于

叹号在JS中还有一个作用：取反，先把值转换为布尔类型，然后再去取反。

!1        // false

![]       // false

!0        // true

3、!!

在一个叹号取反的基础上再取反，取两次反相当于没有做操作，但是却已经把其他类型值转换为布尔类型了，和Boolean是相同的效果。

!!1     // true

!![]    // true

!!0     // false

注意：接下来一篇文章为《第一周（二）》

Razas

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第一周

一、课程介绍二、前端市场发展趋势JavaScript &amp;&amp; Java: 1995年由布兰登艾奇(Brendan Eich)发明。1、前端目前正处于工程化开发阶段主流的框架： vue、react、angular自动化平台：webpack、gulp协作工具： gitvue是基于mvvm的， react是基于mvc的。2、以H5为主的移动端开发正在代替传统...
复制链接

扫一扫