九阴真经-第二层-第4天

关于前端开发神器--WebStorm

从sublime text 转到webstorm ，但发现里面主题颜色很丑
webstorm搭配Monokai-Sublime主题颜色方法:打开fhttps://github.com/OtaK/jetbrains-monokai-sublime 链接，然后点击右边的下载ZIP文件即可。解压之后，会得到一个Monokai-Sublime.jar文件，这个文件就是配色的打包文件，可以使用 webstorm 导入即可。 字体推荐用consola

快捷键：ctrl+alt+t 环绕

===========================================================================================

三个 js 内置对象 输出

1.Window 对象 窗口 一般情况是可以省略的
2.Console.log()
3.document.write() 文档打印输出 (document 文档对象 它不可以省略)

结构

document.getElementById("demo").style.width = "200px";
Get 获取 element 元素 by 通过 id 名字
通过 id 名字为 demo的 得到这个元素
因为这个div 是在 文档中，文档中很多个div其中的一个。所以我们
先document

变量命名的规则

1.变量命名必须以字母或是下标符号”_”或者”$”为开头。 (我经常会无意使用var close-all = XXX，这是错误的)
2.变量名长度不能超过255个字符。
3.变量名中不允许使用空格。
4.不用使用脚本语言中保留的关键字及保留符号作为变量名。
5.变量名区分大小写。(javascript是区分大小写的语言)

变量作用域

1  var a = 10;
2      function fun()
3      { a = "global"; }
4      console.log(a);
5      //输出 ？    a是10 ，因为方法没调用 
6      var a;
7      function fun()
8      { a = "global"; }
9      fun();
10      console.log(a);      //输出是"global"

根据变量的作用范围 可以分为 全局变量 和 局部变量
全局变量：

1. 在最外层声明的变量。
2. 在函数体内部，但是没有声明var 的变量也是全局变量
   局部变量：
   在函数体内部的 声明的变量
   小知识点：
   隐式的全局变量

11  在函数体内部，但是没有声明var 的变量也是全局变量。
12  var a = 1 
13  function func() { 
14      a = b = 2 
15  } 
16  func() 
17  alert(a) 
18  alert(b)  

事件三要素

事件源 = 被触发者
事件 = 点击 双击 移开 ……

事件处理 ： **= function(){ } **
使用公式：

入口函数

window.onload = function(){ 
     内部放js
  }

这个函数的意思就是说，当我们页面加载完毕之后，采取执行函数体里面的js部分。 就是说等 页面的结构 样式 节点等加载完毕。。。

模态框效果

Padding 的小细节牢记

内边距 会影响盒子大小
行内元素 尽量不用 上下的padding和margin
继承的宽度 padding不会挤开， 注意：如果padding的值>父盒子宽度，那么它还是会挤开的。另外：子盒子如果不设置自己的宽度，用了padding 就会挤开 变大。
一般父盒子有宽高，子盒子只需设自己的高度即可。因为这里它有自己的高度，所以用padding 会挤开。

Js 的书写位置与叫法

Js 的书写位置非常的自由

行内式

<button onclick="alert('你好吗')">点击我</button>
一般情况，单双引号是一样 的 但是出现 了包裹的情况。
我们一般采取的是 外双内单的格式。

内嵌式

<script type=”text/javascript”> </script> 任何一个地方

外链式

<script type=”text/javascript” src=”xx.js”></script>
这对标记之间不能写任何的东西。

数据类型

Js 的数据类型分为：
字符型 数值型 布尔型 null undefined
Js 是一个是一种弱数据类型 (Js 的变量你给什么值，他就是什么数据类型)

字符型 (string):

1. 利用 “” (双引号)
   加了引号的都是字符型。
2. 利用String(); 转换为字符型
   

布尔型 (boolean):
就两个值 正确的和错误的 true 和 false
数据类型转换为布尔型：

1. 利用 !!
   

2. 利用 Boolean()
   false、undefined 、null、0、”” 为 false
   true、1、”somestring”、[Object] 为** true**

数值型:
Var num = 10
数值的前面带 0 表示 八进制
Var num = 020;
080+281 = 16
数值的前面带 0x 表示 十六进制
var result = 0xb; 11

转换为数值型:

1. 利用 - * / 都可以转换
   

2 利用Number( )

小心溢出位：尽量避免小数计算。若用可用约进

**ParseInt() parseFloat(): **
parseInt(值, 进制)

Null undefined
Null 空的 没有值 。
Undefined 未定义的 应该有值，但是没有给。
Null “”

============================================
考题：

alert(parseInt(a)+Number(b)+parseFloat(c));    //15.15 + 10.15 +10.0=35.15

额外笔记：换图片时，JS 没有../的概念