2019-03-19 js practice one

展示markdown笔记的网站

马克飞象 https://maxiang.io/

页面由三部分组成

• html 超文本标记语言
• css 层叠样式表
• js 轻量级的脚本语言
  开发过程中，行为样式结构相分离

js由三部分组成

• ECMAScript 实际就是JS的语法，包含变量、条件判断、循环、数据类型等等;无兼容性问题
• DOM document object model 有很多兼容性问题，开发人员可以解决（文档对象模型）
• BOM browser object model 不兼容，开发人员不能解决（浏览器对象模型）

css的引入方式有几种

• 行内样式 style属性
• 内嵌样式 style标签
• 外链样式 link

js的引入方式有几种

• 行内 onclick="alert('aaa')"
• 内嵌 <script></script>
• 外链

js编程思路的形成

• 找到谁 - 获取元素

• 给谁加什么事件

• 干什么事

• 小总结:JS是用来操作CSS的:

作业:

• css题: 左边容器的宽度固定为200,右边容器自适应,请用至少三种方法来实现;
• 只有一个按钮,点击按钮,div显示隐藏
  提示:不会写写文字思路.

对象具有两个特征

1、属性
2、方法
属性和方法的区别：属性无括号，方法有括号；

this的小总结

• 当函数被调用时，看前面是否有“.”，点前面是谁，this就是谁；
• 当函数被调用时，如果前面没有“.”,说明被window调用的，this就是window;
• 点元素身上的事件被触发时，会触发一个函数，函数中的this指向当前被触发事件的这个元素;

  oDiv.onclick=function(){
      this -> oDiv
  }
  

输出方式 ——调试测试代码

• alert() 弹出框
• console.log() 打印括号的内容，在控制台输出
• console.dir() 打印出对象的所有方法和属性;即打印对象身上的详细信息
• confirm() 会有返回值，true or false
• document.write() 在页面上输入
• innerHTML 可输出元素的包裹的内容; innerText 输出文本;
• console.table() 把对象以表格形式输出; ——很少用

命名方式：匈牙利命名法 也叫做 驼峰式命名法

• 除了第一个单词外，从第二个单词开始，每个单词的首字母大写
• 常用的命名前缀
  • a 数组 比如：array,arr,ary
  • o 对象 比如：obj普通对象 oDiv 获取到一个元素对象
  • s 字符串 string
  • n 数字 number
  • b 布尔值 boolean:true false;

数据类型

1、 基本数据类型
+ string 字符串，number 数据，boolean 布尔值，null,undefined
2、 引用数据类型
+ 对象数据类型
+ 普通的对象 object，数组 array，Date,RegExp
+ 函数数据类型
+ function(){}
3、基本数据类型和引用数据类型的区别：
基本数据类型是对值的引用，引用数据类型是对地址的引用

循环

• for 循环四步曲
  1、定义
  2、条件
  3、语句
  4、自增

  
  for循环图解

• 判断

  • if...else if...else

  if (num == 0){
      alert(0)
       }else if (num==1){
           alert(1);
       }else{
           alert(2);
       }
  

  • switch...case...break

  switch (num){
      case 0:
          alert(0);
          break;
      case 1:
          alert(1);
          break;
      default :
          alert(2);
          break;
  }
  

隔行换色，两种思路

• 条件判断：if...else if..else.. switch...case break...
• 用%的思想：
  • 小技巧：用几种情况，就%几