JavaScript入门

两栏自适应布局

/*html body代码*/
 <div class="layout">
        <div class="left">left</div>
        <div class="right">right</div>
        <div class="mian">mian</div>
    </div>

/*less代码*/
.clearfix() {
  &:after {
    content: '';
    display: block;
    clear: both;
  }
}

.layout {
  .clearfix();
  border: 5px solid red;

  .left {
    border: 5px solid orange;
    width: 100px;
    float: left;
    opacity: .5;
    /*透明度*/
  }

  .mian {
    border: 5px solid blue;
    margin-left: 100px;
    margin-right: 100px;
  }

  .right {
    border: 5px solid green;
    width: 100px;
    float: right;
  }
}

CSS布局中圣杯布局与双飞翼布局的实现思路差异在哪里？

引入JavaScript

• 可以直接在script标签里写js代码，如：

alert('hello world'); /*刷新网页的时候回弹出hello world*/

• script要放到单独的文件中，在html中用script引用，格式如下：

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

给元素加内容

• 用选择器选中要修改的元素，如：

/*把label的名字从‘颜色值’改为‘hello world’*/
var label = document.querySelector('.color-mixer .label');/*选中.color-mixer .label选择器，label和选择器可以改*/
label.innerHTML = 'helloworld';

排查js错误

• 使用Chrome开发者工具中的Console面板排查错误，常见错误：
  1.单词拼写错误，如大小写错误，提示出错的行数：

  
  1.png
  

  2.英文半角全角错误。
  3.选择器单词拼写错误，提示null，如：

  
  2.png
  4.元素单词拼写错误，提示not defined，如：
  3.png

给元素添加样式

var indicator = document.querySelector('.color-mixer .indicator');/*选中需要添加样式的元素*/
console.log(indicator);/*确定选中该元素*/
indicator.style.backgroundColor =  'rgb(' + red + ',' + green + ',' + blue + ')';/*给该元素添加样式*/

查询和笔记

• 常用浏览器
  IE、Edge、Firefox、Chrome、Safari、iOS Safari、Opera Mini、Chrome for Android、UC Browser for Android、Samsung Internet、QQ Browser。
• 常用浏览器的主流版本
  IE：IE8、IE11。
  Edge：Edge16、Edge17、Edge18。
  Firefox：Firefox59、Firefox60、Firefox61。
  Chrome：Chrome55、Chrome56、Chrome63、Chrome64、Chrome65、Chrome66、Chrome67、Chrome68。
  Safari：Safari11.1、Safari TP。
  iOS Safari：Safari & Chrome for iOS 10.3、Safari & Chrome for iOS 11.2、Safari & Chrome for iOS 11.3。
  Chrome for Android：Chrome 64 for Android.
  UC Browser for Android：UC Browser 11.8 for Android
  Samsung Internet：Samsung Internet6.2。
  QQ Browser：QQ Browser1.2。
• 浏览器排行榜2018最新浏览器市场份额排名
• JS变量名命名规则
  a、变量命名必须以字母或是下标符号””或者”$”为开头。
  b、变量名长度不能超过255个字符。
  c、变量名中不允许使用空格，首个字不能为数字。
  d、不用使用脚本语言中保留的关键字及保留符号作为变量名。
  e、变量名区分大小写。(javascript是区分大小写的语言)。
  举例：
  a：以字母或下划线或$开头

oa、ob、AA、$aaa、_fag/*合法*/
oa*b、h&b、hh#jj/*不合法*/

b：长度不超过255字符

oa、oaaaaaaaaaa、o.........aaaaaaa(......为省略，但是总长不超过255字符)/*合法*/
o.........aaaaaaa(......为省略，但是总长超过255字符)/*不合法*/

c：不能使用空格

oa、o_a、o_A/*合法*/
o a、oa a、oA_h h b/*不合法*/

d：不能使用关键字及保留字

class、style、html/*不合法*/

e：区分大小写

oBtn与obtn不同、oa与oA不同

• 定义变量的格式

var  变量名;
var  变量名=初始值;  //初始值不受数据类型的限制