JavaScript学习笔记01

lanfordxb

于 2018-05-04 09:06:11 发布

阅读量195

点赞数

分类专栏： JavaScript 文章标签： web前端

本文链接：https://blog.csdn.net/penntime/article/details/80190052

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

JavaScript

和java的关系就是雷锋和雷峰塔的关系就是毛关系都没有

一、组成部分

1、ECMA描述了该语言的基本语法和基本对象

2、DOM document object model 文档对象模型

3、BOM browser object model 浏览器对象模型

二、js使用

1、行内

<button onclick='alert("来了老妹");'>点我啊大爷</button>

2、内联

<button onclick='demo();'>函数</button>
<script type="text/javascript">
    function demo()
    {
        alert('js啊真贱但真贱DNA');
    }
</script>

3、外联

<script type="text/javascript" src='1.js'></script>

4、a 标签中

<a href="javascript:alert('走吧');">走</a>

二、js中简单的输出

1、alert(); 弹窗

2、console.log() 在控制台输出

3、document.write() 页面输出

三、变量的声明

1、使用var关键字声明不带var也可以推荐var

2、字母数字下划线不能以数字开头

3、不能使用系统关键字

4、严格区分大小写

四、注释

1、单行注释 //

2、多行注释 /**/

五、数据类型

python 整型浮点型布尔型字符串列表字典集合元组 none

PHP 整型浮点型布尔型字符串数组对象 null 资源

js 万物皆对象

数值字符串布尔数组对象 null undefined NaN

var oTest var aTest

typeof()

出现undefined的几种情况

1、变量未赋值

2、函数没有返回值

3、对象属性未赋值
单双引号的区别

1、都不解析变量

2、都解释特殊字符

3、使用是自己不要套自己相互嵌套使用
拼接字符串

使用+拼接字符串

六、自动类型转换

js中'0'的布尔型为真

七、有人说js中是三种数据类型

对象 NaN（not a number）未定义

两个NaN永远不相等

isNaN(); 检测一个变量是不是NaN

八、运算符

算数：+ - * / % ++ – += -=

++ 自增一

– 自减一

a++  是先赋值在运算  
++a  是先运算在赋值

比较： < > >= <= != == ===

逻辑：! || &&

var c = a && b;
    c是a和b其中一个值 如果a为假 c=a  如果a为真 c=b
var c = a || b;
    c是a和b其中一个值 如果a为假 c=b  如果a为真 c=a

三元运算符表达式 ? 真区间 : 假区间

var c = a ? a : b;

九、强制类型转换

1、parseInt

字符串强制转化数值类型时如果字符串就是数值字符串那就不会变如果开头是数值那就一直找到非数值字符将后面去掉如果开头就是非数值结果NaN

2、parseFloat

十、流程控制

if else

else if之间必须加空格

while

for

for (var a=0; a<100; a++) {
  document.write(a);
}
# 初始值  要加var 声明
# 结束条件
# 条件

do while

do {
  document.write(a);
  document.write('<br />');
  a++
} while (a > 100);
# do while 和 while的区别  do while 肯定会执行一次循环体 不管条件成不成立 先执行一次再判断

for in 遍历

switch case

var a = 1;
switch (a) {
  case 1:
  case 5:
    document.write(1);
    break;
  case 2:
    document.write(2);
    break;
  case 3:
    document.write(3);
    break;
  case 4:
    document.write(4);
    break;
  default:
    document.write('哈哈哈哈哈');
    break;
}
# break 用来结束switch结构
# default 默认区间
# case 可以给多个

十一、Math对象

Math.random();  随机数
Math.ceil(Math.random()*100+100)    //取100-200之间的随机数
Math.ceil();    进一取证
Math.floor();   舍去取整
Math.max(); 
Math.min();
Math.round()    四舍五入
Math.sqrt()     求平方根
Math.pow()      n次方
手册上有

最大值 Number.MAX_VALUE
最小值 Number.MIN_VALUE

十二、函数

1、形参不加var 加了就错

2、函数名字区分大小写

3、函数可以重复定义的后面的覆盖前面的

4、形参定义了实参不给不报错

变量的作用域
- 全局变量在函数外部使用 var 声明的
- 局部变量在函数内部使用var 声明的
递归函数
匿名函数
变量函数

var a = function () {
  alert('看我其实二的');
}
a();
//通过变量名调用函数

内部函数
回调函数
封闭空间

(function demo(a) {
    document.write(a);
})(100);
//自动调用 后面的括号就是调用 里面可以传实参

闭包

var add = (function () {
  var a = 0;
  return function () {
    return a+=1;
  }
})();
//1、避免变量污染
//2、使变量值一直保存在内存中

arguments 对象

function demo()
{
  //alert(arguments[1]);
  console.log(arguments);
}
demo(1,2,4,4,5,6);

十三、数组

1、var arr = new Array(1,3,4,45);

2、var arr = [1,23,4,5,]

3、追加关联

var arr = [];
arr['name'] = '小花'; //其实是给对象追加属性

4、删除

delete arr['name'];
delete arr.name;

5、. 和 [] 的区别

. 后面不能跟数字变量 [] 可以

[]可以代替. .不能代替[]

6、查看数组长度

arr.length

length只能计算索引下标的数量

7、遍历数组

for 只能遍历纯索引的

for in

for (var i in arr) {
  document.write(i);
}
//i 代表的就是下标 也就是对象的属性

十四、对象

创建方式

1、直接通过系统对象来创建

var obj = new Object();
//alert(obj);
obj.name = '小花';
obj.sex = '男';
obj.zhonghua = function () {
  alert('下吧下吧 我要中华');
}

2、通过json 方式创建

var obj = {name:'小狗',sex:'公',hobby:'吃',wan:function () {
    console.log(this.name);
}};
obj.wan();
//this 代表当前对象

3、自定义函数对象

function Person()
{
  this.name = '皇上';
  this.hobby = '杀人';
  this.sharen = function () {
    alert('朕从不杀人');
  }
}
var obj = new Person();
obj.sharen();

十五、三种弹窗

1、alert();   提示框 警告框
2、confirm();    确认框
    if(confirm('你上课是不是睡觉了')) {
        alert('睡觉罚款');
    } else {
        alert('三号学生');
    }
3、prompt();   输入框
    var res = prompt('你说你昨天是不是去做头发去了？哼！');
    if (res == '去了') {
        alert('当然是选择原谅她了');
    } else if (res == '没去') {
        alert('洗干净等我');
    }

十六、DOM操作

dom操作三要素：获取加事件操作

1、节点

标签节点属性节点文本节点

2、根据id获取节点

document.getElementById

4、常用事件

事件	含义
onclick	单击事件
ondblclick	双击事件
onmouseover	鼠标移入事件
onmouseout	鼠标移出事件
onmouseup	鼠标松开
onmousedown	鼠标按下事件
onfocus	获取焦点事件
onblur	失去焦点
onload	当文档加载完毕时触发