javaScript 基础入门(一)

关注前端体系,获得更多学习资料

对于web前端开发来说,javaScript是核心,说难学也不难,说简单也不简单。有时一些概念,官方文档的解释就及其难懂。对此,我分享我的学习笔记,简单粗暴通俗易懂,看完你基本就会了!

适合人群:至少掌握HTML+CSS基础知识

基本概念

前端三大基础知识

HTML:编写网页内容

CSS:设计网页样式、布局

JavaScript:网页交互的语言

什么是JavaScript:

1.专门设计网页交互的语言

2.运行在JavaScript解释器中

JavaScript特点:

纯文本;解释执行;弱类型;基于对象

JavaScript=ECMAScript+DOM(文档对象模型)+BOM(浏览器对象模型)

ECMAScript标准:JavaScript核心语法

DOM标准:专门操作HTML元素,CSS样式,事件的统一标准!

BOM:专门操作浏览器窗口的工具。没标准,由浏览器厂商自行实现

官方详细介绍:

ECMAScript 规定了 JavaScript 脚本的核心语法,如 数据类型、关键字、保留字、运算符、对象和语句等,它不属于任何浏览器。

文档对象模型(DOM)——对应Document对象

浏览器对象模型(BOM) ——对应window对象

JavaScript典型用途:

1.嵌入动态文本于html页面中

2.客户端数据计算

3.客户端表单(提交到服务器之前)验证(用户注册,登录验证等)

4.增强网页动画,特效等(下拉菜单,图片轮播等)

5.基于Node.js技术进行服务器端编程

JavaScript的使用

如何编写javaScript:

01

使用浏览器自带的js解释器

F12打开控制台,光标处写脚本代码,回车执行。

Console:指代控制台,专门调试程序输出结果的窗口。

log:控制台Console提供的一个功能,向控制台输出一行日志

多行代码输入:【shift】+【enter】→换行

02

随网页一同运行

浏览器包含:【排版引擎】+【解释引擎】

排版引擎:专门加载HTML内容和CSS样式等

解释引擎:专门运行js脚本

标签:专门包含js脚本块的元素,放在网页任何位置都可以。

中脚本块何时运行?随网页加载,解释执行

解释执行,读到才执行。先读到先执行

放置的先后顺序影响程序结果。

优化:放在body的最后

调试js代码

写JavaScript的时候,如果期望的效果没有实现,不要抓狂,也不要泄气,作为小白,要坚信:JavaScript本身没有问题,浏览器执行也没有问题,有问题的一定是我的代码。

如何调试:bug?

只要没反应或效果没出来就是出错-->F12

查看错误原因-->定位错误位置!

脚本块中的错误,仅影响“当前脚本块”中出错“位置之后”的脚本执行。

不影响之外的其他元素加载或脚本块执行。

function中的错误:只有调用方法时才触发!

常见的JS错误类型:

SyntaxError(语法错误)

解析代码时发生的语法错误。

ReferenceError(引用错误)

引用一个不存在的变量时发生的错误

TypeError(类型错误)

1.变量或参数不是预期类型,比如,对字符串、布尔值、数值等原始类型的值使用new命令,就会抛出这种错误,因为new命令的参数应该是一个构造函数

2.调用对象不存在的方法

RangeError(范围错误)

当一个值超出有效范围时发生的错误

javaScript语法

ECMAScript(核心语法)

区分大小写

每条结尾都建议有分号(英文模式下的分号)

语句:发给浏览器的命令,如下例子:

脚本块:多行语句的序列

注释:不会被解释执行或显示的代码说明——给程序员看的

注释也占网页流量!生产环境必须去掉!

HTML注释

CSS注释:/* */

JS注释://单行注释 /*多行注释*/

如下例子:

变量

概念:变量用于存储数据值。一切数据必须存在变量中

何时使用变量?只要在程序中需要存储的数据,都要放在变量中

语法:var 变量名 =值;

赋值:变量名=值,使用等号赋值操作

如果未赋值:js默认赋值undefined

命名规则:见名知意

保留字/关键字不能当变量名

常见的是驼峰法的命名规则,如 lastName (而不是lastname)

保留字:js中已经占用的特殊意义的关键字

强调:只有等号可以向变量中存入新值。

常量

概念:一旦声明,常量的值就不能改变

如何使用常量:const 常量名=常量值

以上重新赋值,就是出错!

数据类型

js是弱类型:

变量本身没有类型。只有变量中的值才有类型。

一个变量,可以反复保存不同类型的数据

为什么要有数据类型:现实中所有数据根据用途不同,分为不同数据类型。

数据类型:变量中存储的数据的类型。

原始类型:字符串(String)、数字(Number)、布尔(Boolean)、空(Null)、未定义(Undefined)

引用类型:对象(Object)

string类型:

字符串是存储字符的变量。

字符串可以是引号中的任意文本。可以使用单引号或双引号

number类型:

表示一切用于比较或数学计算的数字

程序中数字分整数、浮点数(现实中的小数)

js中一切数字都用number保存,不分整数类型和小数类型

程序中数字类型的舍入误差:程序中不能准确表示1/10,就好像现实中不能准确表示1/3一样。

如何修正:按指定位数四舍五入:数字.toFixed(小数位数)

今后计算结果小数位数超长,说明碰到舍入误差。按位四舍五入。

boolean类型:

仅有两个值的特殊数据类型:true,false

何时使用boolean?只要一个值只有真假两种情况,就用boolean类型

undefined类型:

表示一个变量仅声明过,但从未赋值。所有未赋值的变量,默认值都是undefined。

undefined类型的值还是undefined!

null类型:

可以通过将变量的值设置为 null 来清空变量。

object类型:*重点核心内容*

对象由花括号分隔。

在括号内部,对象的属性以名称和值对的形式来定义。属性由逗号分隔

/未完待续 下期再会.

大家想要什么资源/教程,或者学习上遇到问题都可以留言给小编哦~看到会及时给大家回复~

觉得本文对你有帮助,可以分享给更多人

关注【前端体系】,“领干货” 一起提升技能!

  • 发表于:
  • 原文链接http://kuaibao.qq.com/s/20180413G12RLB00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

同媒体快讯

扫码关注云+社区

领取腾讯云代金券