您的位置:首页 > Web前端 > JavaScript

JavaScript基础01—基本概念

2020-08-08 16:23 519 查看

js基础

js书写位置

内部

写在html中直接书写

1、HTML自上向下 同步解释性文档

2、上面的代码无法调用下面的标签或者script,下面的代码可以调用上面的标签或者script

3、ES6严格化后,第二条中有些不完全适用

4、有写在html外面的情况(不建议),利用了浏览器自动修复

标签内

  • 通过事件触发
<button onclick="clickHandler()">按钮</button>
  • 特例代码
    不跳转
<a href="javascript:void(0)">超链接</a>
  • 注:单双引号嵌套使用,不要使用同一种

外部引入

1、可以写在head和body部分

2、载入

<script src=""></script>
- src 地址尽量都用./开始,禁止使用绝对路径

./ 当前文件所在文件夹

../上一级目录

注:地址尽量都用./开始,禁止使用绝对路径

3、 变量污染:如果加载的js中,变量或者函数相同时,就会覆盖

4、async defer ……

5、ES6的代码引入和写法……

注释

单行注释

  • ctrl+/
  • 注释一行的代码

块/多行注释

  • shift+alt+a

  • 用途

    注释一行中的部分内容
  • 注释掉一个函数和大量代码块
  • 函数的注释说明(函数部分讲)

作用

  • 排错
  • 让不用的代码不执行
  • 解释代码

调试

  • 浏览器调试ctrl+shift+i

console

console.log
console.dir
console.error  错误信息
console.info   信息

sources

打断点
计算数据

network

ALL  所有网络请求
XHR   Ajax
WS   长连接
Manifest  应用缓存

performance

录屏

mamory

快照

application

常用方法

书写规范

  • 每行结束,半角分号

  • 大小写严格

  • 一般首字母小写,除了类,一般都使用驼峰式命名

    驼峰式,除了第一个外,每个单词首字母大写,其他字母小写

    例:setWorkDay

alert() 弹出内容框

放置鼠标显示提示:

alert(message?:any):void

message 参数名称 ?可以不写值 :any 这个参数的类型可以是任意的, :void 不返回任何值

  • 方法一般包括 方法名(参数…).都必须是英文半角

confirm() 确认消息框

  • 返回布尔值 是——true 否——false

prompt() 提示消息框----就是专门用来给用户提供输入窗口的

  • 可以有默认值,返回字符串

document.write()

  • js 是点语法,表示某个对象的方法和属性

document.body.innerHTML=

  • 赋值写法,对象的属性需要赋值

对象有两种模式,一种属性,一种方法,属性使用等号赋值,方法使用括号执行

write和innerHTML

  • write仅属于document的方法,可以给整个文档中增加内容
  • innerHTML是所有body内(含body)标签的属性,可以给这些标签内局部增加内容和标签

变量

ECMAscript标准

  • 浏览器都需要按照该标准渲染页面

ES5前

  • 弱类型,不需要定义,随手写,不需要类型
  • 等号左侧变量名称,右侧值
  • 连等,先赋值给等号最左边的元素,再逐级向右
  • 等号赋值有返回值 例:a=3返回值3
  • 代码遵从从左至右的执行方式

ES5

  • ES5 IE8时代支持的js标准

  • 不允许直接使用变量的赋值

  • var 定义变量

    变量命名规则

    1、变量必须驼峰式命名法
  • 2、临时变量必须使用_起头,后面接驼峰式命名,有时候会在函数的参数中使用临时命名
  • 3、变量不可以使用关键词和保留字
  • 4、全局的变量名不能与window下的属性和方法同名
  • 不使用var ,那变量是window的属性

  • 在函数以外的地方使用var声明 也是设置了window的属性

  • 使用var 不返回值,例:console.log(var a = 1);无返回值

  • ES6

    • 2015年正式使用ES6 又称为ES2015

    • let 变量 定义后可以变化值

    • const 常量 定义后不能被改变

      常量定义时,名称全部大写,并且使用下划线_区分单词
    • 使用常量目的是,不会被别人修改或者变量污染改变
    • 不改变对象的引用地址(有消耗性能)

    常用变量定义方式

    • var a,b,c;
    • var a1=3,b1=4,c1=”a”,d1=true;
    • 尽量不适用连等赋值

    数据类型

    Typeof判断数据类型,两种表示方法都可

    console.log(typeof a);

    ypeof a);

    console.log(typeof(a));

    字符类型

    • string
    • 所有使用 ‘’ “” ``都是字符型
    • 单双引号套用,也是字符型
    • console打印颜色为黑色

    数值类型

    • number

    • 所有数字

      小数叫做浮点数
  • 表示方式,十进制,十六进制,八进制,科学计数法

  • 定义的和打印结果不一定完全相同(八进制,十六进制,科学计数法会转为十进制)

  • 布尔类型

    • boolean
    • 是否,对错,任何事情的两面
    • true,false

    未定义型

    • undefined
    • 两种情况,一种仅定义变量未设置值,一种定义变量并且设定值为undefined
    • 两种值相等,但是实际是不同形态
    • 第一种用于全局定义,根据需要使用赋值,初始是没有值的
    • 第二种用于初始值必须是undefined,或者将原有有值的变量修改为undefined

    空值

    • null
    • 将所有引用地址标记清空,用于清理内存(垃圾回收)
    • 字符类型,数值,布尔,未定义都不需要null清除

    对象型

    • object

    • var obj={} 空对象

    • obj=null;设值为空

    • key:value 键值对

      关键词和值唯一匹配

    • 对象中不能出现重复的key

    • key不需要加””

    • 描述对象时,最好不加双引号

    • 变量作为key,需要在外层增加中括号[ ]

    • 获取key的值的两种方法

      1、 点语法,使用范畴仅限于key属性固定,且明确
    • 2、 中括号语法,如果是固定的key就使用字符串方式来设定,如果不固定,直接中括号及变量就可以,例:[ 变量 ]。

    数据类型转换

    强制转换和隐式转换

    数值转字符串

    • 类型强制转换 Stiring()

    • 隐式转换方式(没有强制转换,根据运算特征自动转换为字符串) a=a+””

    • 隐式转换所使用的转换方法是自动执行String();

    • . toString()实际上是Object对象的方法,因此,万物皆对象,任何类型都可以调用这个方法

      toString(2)参数必须是2-36之间,否则报错,数字表示转化为指定的进制数,2即为转为二进制

    • .toFixed(小数点位数) 转换为字符串,并且保留小数点位数,自动四舍五入

    • .toExponential();

    • .toPrecision();

    数值转布尔值

    • 强制转换Boolean()
    • 除了0以外所有的数值转布尔都是true,0是false

    数值转对象

    • 强制转化 Object()
    • 转为数值型对象,数值型对象存储在堆中

    字符串转数值

    • 强制转换 Number();

      有一个非数字即为NaN
  • NaN 数值类型中的非数值,例:非数值字符串转数值时

  • parseInt 转换为整数

      parseInt(a,2)字符串转换为2进制
    • 截止到第一个非数字
  • parseFloat 转换为浮点数

      parseFloat 不能转换进制
  • 隐式转换遵从Number()转换方法

  • 空格问题,两端的空格自动去除,中间的空格会被认定为字符

  • 字符串转布尔

    • 仅空字符串转换为布尔值是false,除此之外全部是true
    • 空格不是空字符串

    字符串转换为对象

    • 强制转化 Object()
    • 转换为字符串对象

    布尔转数值

    • true转为1,false 转为0

    布尔转字符

    • 转换后就是字符串true和false

    布尔转对象

    • 转换后就是布尔值对象

    任何类型转布尔

    • 六种布尔值是false,其他都是true

      var a="";
    • var b=0;
    • var c=NaN;
    • var d=false;
    • var e=null;
    • var f=undefined;

    字符串方法

    • str.trim();

      清除字符串前后空格,中间不清除

    undefined null 转换为字符串、数值

    • u转字符串,字符串的u,n相同
    • u用Number转数值NaN,n转为0
    • u,n用parseInt转全为NaN

    运算符

    算术运算符

    • 加+,减-,乘*,除/,取模(取余)%
    • 浮点数运算时,会有误差(计算机精度问题)
    • 在算数运算符中前后出现字符串,且使用+号,则实现字符串首尾相连的方式将内容连接
    • 运算过程中没有使用字符串,使用+符号,其他类型都会转为数值并相加
    • 所有类型遇到减乘除取模,都会隐式转换为数值后运算,包括字符串

    赋值运算符

    • =、+=、-=、/=、*=、%=

    • 赋值运算符优先级最低

    • <<=左移、>>=右移

      计算机先转为二进制,在二进制基础上左移,右侧补0,计算结束后转为十进制输出。右移同理

    一元运算符

    • ++、–
    • 运算优先级很高,但不代表返回优先级高
    • 单独使用,结果相同。参与其他一起运算或赋值时,考虑先返回还是先运算后返回。
    • 对于++ / – 通常都会直接使用算术运算来处理,也就是会将内容先隐式转换为数值,然后再运算

    关系运算符

    • < 、> 、<=、 >=

      返回布尔值
  • == 判断值是否相等、 === 判断值和类型是否相等

      以后所有代码必须用===(更严谨)
  • 注:undefined==null独立相等,NaN和任何数据(包括它自己)都不相等

  • isNaN,将字符串转换为数值后,判断是否是NaN非数值

  • = !==

  • 逻辑运算符

    • !

      逻辑非

      取反
  • &&

      逻辑与
  • ||

      逻辑或

      如果obj转换布尔值是true,直接熔断

    XMind: ZEN - Trial Version
    undefined
    undefined
    undefined
    undefined
    undefined
    undefined
    undefined
    undefined
    undefined
    undefined

  • 内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
    标签: