zoukankan      html  css  js  c++  java
  • JavaScript入门

    JavaScript入门

    JavaScript是什么

    首先,JavaScript里面的Java是因为JavaScript的创造者在Sun公司工作,本来的LiveScript改名为JavaScript是一个双赢决策。JavaScript是一种运行在客户端(在用户设备运行,不运行在服务器)的脚本语言(高级编程语言),是目前世界上最流行的语言之一。脚本语言不需要编译,运行过程中由js解释器(js引擎)逐行来进行解释并执行,按代码从上到下逐步解释执行。目前也可以基于Node.js技术进行服务器端编程。

    快速扫盲开胃JavaScript视频

    本文的大部分内容都来自于这个视频中的知识点总结:较全的JavaScript视频教程-黑马程序员

    HTML/CSS/JS的关系

    • HTML/CSS标记语言——描述类语言
      • HTML决定网页结构和内容(决定看到什么),相当于人的身体
      • CSS决定网页呈献给用户的模样(决定好不好看),相当于给人穿衣服和化妆
    • JS脚本语言——编程类语言
      • JS实现业务逻辑和页面控制(决定功能),相当于人的各种动作
      • JavaScript的组成包括EVMAScript(JavaScript语法)、DOM(页面文档对象模型)、BOM(浏览器对象模型)

    浏览器执行JS简介

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

    • 渲染引擎:用来解析HTML和CSS,俗称内核,比如chrome浏览器的blink,老版本的webkit
    • JS引擎:也称为JS解释器。用来读取网页中的JavaScript代码,对其处理后运行,比如chrome浏览器的V8(号称目前最快的JS引擎)

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

    JavaScript的作用

    1. 表单动态校验(密码强度检测)(JS产生最初的目的)
    2. 网页特效
    3. 服务端开发(Node.js:前端后端通吃)
    4. 桌面程序(Electron)
    5. App(Cordova)
    6. 控制硬件-物联网(Ruff)
    7. 游戏开发(cocos2d-js)

    JavaScript输入输出语句

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

    方法 说明 归属
    alert(msg) 浏览器弹出警示框,展示给用户 浏览器
    console.log(msg) 浏览器控制台打印输出信息,控制台输出,给程序员用 浏览器
    prompt(info) 浏览器弹出输入框,用户可输入 浏览器

    变量

    变量的本质:变量是程序在内存中申请的一块用来存放数据的空间。

    申明变量:var是一个JS关键字,用来申明变量(variable变量的意思)。使用该关键字申明变量后,计算机会自动为变量分配内存空间,不需要程序员管。

    申明一个变量并赋值,称为变量的初始化。(比如:var age = 18; //声明变量的同时赋值为18)

    声明变量特殊情况:

    情况 说明 结果
    var age; console.log(age); 只声明,不赋值 undefined
    console.log(age); 不声明,不赋值,直接使用 报错
    age = 10; console.log(age); 不声明,只赋值 10

    变量命名规范:

    • 由字母(A-Z,a-z)、数字(0-9)下划线(_)、美元符号($)组成。
    • 严格区分大小写。
    • 不能以数字开头。
    • 不能是关键字、保留字。
    • 变量名必须有意义。
    • 遵守驼峰命名法,首字母小写,后面单词的首字母需要大写。

    数据类型

    在计算机中,不同的数据所需占用的存储空间是不同的,为了便于把数据分成所需内存大小不同的数据,充分利用存储空间,于是定义了不同的数据类型。JavaScript是一种弱类型或者说动态语言。这意味着不用提前声明变量的类型,在运行过程中,类型会被自动确定。

    在代码运行时,变量的数据类型是由JS引擎根据 = 右边变量值的数据类型来判断的,运行完毕之后,变量就确定了数据类型。JavaScript拥有动态类型,同时也意味着相同的变量可用作不同的类型。

    JS把数据类型分为两类:

    • 简单数据类型(Number,String,Boolean,Undefined,Null)
    • 复杂数据类型(object)

    简单数据类型在内存中会存在栈里面,复杂数据类型在内存中会存在堆里面。

    数据类型 说明 默认值
    Number 数字型,包含整型值和浮点型值,如21、0.21。Number数字型,只要在前面加0就会自动标识为8进制,数字前面加0x表示十六进制。Number.MAX_VALUE可表示数字中的最大值,Number.MIN_VALUE表示最小值。infinity表示无穷大,大于任何数;-infinity表示无穷小,小于任何数值;NaN,Not a number,表示非数。isNan()这个方法可以返回一个值验证一个值是否是非数字,如果是数字则返回false,不是数字返回true。 0
    Boolean 布尔值类型,如true、false,当它们和数字型相加时等价于1和0 false
    String 字符串型,如“张三”。注意在js里面,字符串都带引号,可以是双引号“”,也可以是单引号''。JS可以用单引号嵌套双引号或者用双引号嵌套单引号(外双内单或外单内双)。字符串中存在一些转移字符,但是这些字符要写到引号里面。字符串是由若干字符组成的,这些字符的数量就是字符串的长度。通过字符串的length属性可以获取整个字符串的长度。使用+号时,数值相加,字符相连。 “”
    Undefined var a; 声明了变量a但是没有给值,此时a = undefined。Undefined型和String型相加出来的是String型,和Number型相加出来的是NaN。 undefined
    Null var a = null; 声明了变量a为空值 null

    在String中,存在一些转义符,可以在String串中起到转义作用而不会直接输出渲染,它们以开头,常用的转义符及说明如下:

    转义符 解释说明
    转行符,n是newline的意思
    斜杠
    单引号
    双引号
    tab缩进
     空格,b是blank的意思

    注:typerof 可以检测变量的类型。

    关于数据类型转换,我们通常会实现3种方式的转换:

    转换为字符串类型

    方式 说明 案例
    toString() 转成字符串 var num = 1; alert(num.toString());
    String()强制转换 转成字符串 var num = 1; alert(String(num));
    加号拼接字符串 和字符串拼接的结果都是字符串 var num = 1; alert(num + "我是字符串");

    转换为数字型(重点)

    方式 说明 案例
    parseInt(string)函数 将string类型转成整数数字型 parseInt('78')
    parseFloat(string)函数 将string类型转成浮点数数值型 parseFloat('78.21')
    Number()强制转换函数 将string类型转换为数值型 Number('12')
    js隐式转换(- * /) 利用算术运算隐式转换为数值型 '12' - 0

    转换为布尔型

    方式 说明 案例
    Boolean()函数 其他类型转换成布尔值 Boolean('true');

    代表空、否定的值会被转换为false,如"、0、NaN、null、undefined,其余值都会被转换为true。

    运算符

    运算符包括:算数运算符(浮点数运算会有误差,尽量避免直接运算浮点数)、递增和递减运算符、比较运算符(注意JS有全等的概念:=,要求两侧的值和数据类型都相等,双等符号只要求两边的值相等)、逻辑运算符(&&、||)、赋值运算符(=、+=、-、%=、*=...)。还需要知道运算符的优先级,表单如下:

    优先级 运算符 顺序
    1 小括号 ()
    2 一元运算符 ++ -- !
    3 算数运算符 先* / % 后 + -
    4 关系运算符 > >= < <=
    5 相等运算符 == != === !==
    6 逻辑运算符 先 && 后 ||
    7 赋值运算符 =
    8 逗号运算符 ,

    流程控制

    if else、switch、for、while、do-while、continue、三元表达式 ? :

    断点调试

    断点调试可以帮我们观察程序的运行过程。断点调试是指自己在程序的某一行设置一个断点,调试时,程序运行到这一行就会停住,然后你可以一步一步往下调试,调试过程中可以看各个变量当前的值,出错的话,调试到出错的代码行即显示错误,停下。

    浏览器中按F12——>sources——>找到需要调试的文件——>在程序的某一行设置断点

    Watch:监视,通过watch可以监视变量的值得变化,非常常用。

    F11:程序单步执行,让程序一行一行的执行,这个时候,观察watch中变量的值得变化。

    代码调试的能力非常重要,只有学会了代码调试,才能学会自己解决bug的能力。初学者不要觉得调试代码麻烦就不去调试,知识点花点功夫肯定学的会,但代码调试不去练的话永远学不会。

    数组

    创建方式:var arr = [],可以在数组中混合存放任意数据类型的数据。arr.length可以获取数组长度。

    新增数组长度可以通过:arr.length = 长度,或者直接arr[5]赋值就可以扩容到下标为5的位置。

    函数

  • 相关阅读:
    HDU 1800 Flying to the Mars 字典树,STL中的map ,哈希树
    字典树 HDU 1075 What Are You Talking About
    字典树 HDU 1251 统计难题
    最小生成树prim算法 POJ2031
    POJ 1287 Networking 最小生成树
    次小生成树 POJ 2728
    最短路N题Tram SPFA
    poj2236 并查集
    POJ 1611并查集
    Number Sequence
  • 原文地址:https://www.cnblogs.com/keep250/p/12237777.html
Copyright © 2011-2022 走看看