JavaScript基础：

Posted 2020-10-12 5号平凡的我

一. javascript概述

JavaScript一种直译式脚本语言，是一种动态类型、弱类型、基于原型的语言，内置支持类型。

document.write("<h1>这是一个标题</h1>") 在网页上显示内容
alert(“你好”) 弹窗，

二. JavaScript变量

var ad = 1; 字母开头，区分大小写，不能是关键字和保留字

三. JavaScript数据类型 用typeof()查看

JavaScript中的数据类型：Undefined、Null、Boolean、Number、String和Object。

1.字符串　　 var carname=‘Head teacher‘;
2.Number类型　　 var x1=34.00; //使用小数点来写
3.布尔类型　　 var x=true;
4.数组 　　 var cars=new Array();   就是Python里的列表
5.对象 对象由花括号分隔。    在括号内部，对象的属性以名称和值对的形式 (name : value) 来定义
　　var person={firstname:"John", lastname:"Doe", id:5566};
6.Undefined类型     在使用var声明变量，但没有对其初始化时，这个变量的值就是undefined。var box;
7.Null类型       是一个只有一个值的数据类型，即特殊的值null。它表示一个空对象引用(指针)，typeof操作符检测null会返回object。

四. JavaScript运算符

1.ECMAScript定义了5个算术运算符，加减乘除，取余。递增++和递减--
　　前置和后置的区别:没有赋值操作时，前置和后置一样。有赋值操作时，前置的运算符会 先累加或累减 再赋值，后置运算符则 先赋值 再累加或累减。
2.比较运算符：小于(<)、大于(>)、小于等于(<=)、大于等于(>=)、相等(==)(大小相同即可 如true为1)、不等(!=)、全等(恒等)(===)(要求大小和类型都相同)、不全等(不恒等)(!==)。
3.赋值运算符：等于(=) 加等于(+=) 减等于（-=） 乘等于（*=） 除等于（/=） 取余等于（%=）
4.JavaScript逻辑运算符 ：逻辑与(AND) ：&& ，，逻辑或(OR)：||  ，，逻辑非(NOT)：!
5.逗号运算符：可以在一条语句中执行多个操作。var box = 100, age = 20, height = 178; //多个变量声明
6.三元条件运算符：var box = 5 > 4 ? ‘a‘ : ‘b‘; //对，5>4返回true则把‘a‘赋值给box，反之把‘b‘赋值给box。
7. 运算符优先级：

五. JavaScript流程控制语句

1.条件分支语句if () {} else {}

if (条件表达式) {语句;}
else if (条件表达式) {语句;} ...
else {语句;}

2.多重分支语句switch () { case n : ...}; switch语句是多重条件判断，用于多个值相等的比较。

var box = 1;
switch (box) {　　　　 //用于判断box相等的多个值
case 1 :
alert(‘one‘);
break; 　　　　　　 //break;用于防止语句的穿透
case 2 :
alert(‘two‘);
break;
default : 　　　　 //相当于if语句里的else，否则的意思
alert(‘error‘);   }

3.do...while语句：先运行，后判断的循环语句。即不管条件是否满足，至少先运行一次循环体。

var box = 1;　　　　       //如果是1，执行五次，如果是10，执行1次
do {alert(box);box++;}
while (box <= 5);　　　　 //先运行一次，再判断

4. while语句：一种先判断，后运行的循环语句。必须满足条件了之后，方可运行循环体。

var box = 1;　　　　　　//如果是1，执行五次，如果是10，不执行
while (box <= 5) 　　　　 //先判断，再执行
{ alert(box); box++; }

5. for语句：也是一种先判断，后运行的循环语句。但它具有在执行循环之前 初始化变量和定义循环后要执行代码的能力。

for (var box = 1; box <= 5 ; box++) { alert(box); }

//第一步，声明变量var box = 1;

//第二步，判断box <=5

//第三步，alert(box)

//第四步，box++

//第五步，从第二步再来，直到判断为false

6. for...in语句：是一种精准的迭代语句，可以用来枚举对象的属性。

var box = {‘name‘ : ‘Head Teacher’,‘age‘ : 28,‘height‘ : 178 };　　 //创建一个对象
for (var p in box)
{ alert(p); } 　　　　//列举出对象的所有属性

break和continue语句用于在循环中精确地控制代码的执行。

六：JavaScript函数

1.函数是完成某一功能的代码段 ，2.函数是可重复执行的代码段， 3.函数方便管理和维护

function 函数名称（[参数][ 参数][ 参数]）{
代码段
return 返回值 }

例如：function PeopleNameAge(name,age){

alert(‘你的姓名:‘+name+‘你的年龄:‘+age);

}

函数注意：
1.函数名称不要包含特殊字符 ，最好遵循驼峰式的命名方法 ，严格区分大小写 ，如果重复会覆盖
2.函数可以有参数也可以没有参数，可以有一个参数也可以有多个参数
3.函数通过return返回值，如果没有默认返回undefined
4.函数不调用不执行

七. JavaScript数组

1.使用new关键字创建数组，，var box = new Array(‘曹老师‘,‘web‘,‘学神‘); 　　 //创建一个数组并分配好了元素
2.可以省略new关键字。
3.使用字面量方式创建数组 var box = [‘曹老师‘,‘web‘,‘学神‘]; 　　 //创建包含元素的数组

使用索引下标来读取数组的值，alert(box[2]);　　//获取第三个元素
使用length属性获取数组元素量 alert(box.length) 　　//获取元素个数
box.length = 10; 　　 //强制元素个数
box[box.length] = ‘JS技术‘; 　　 //通过length给数组增加一个元素

八.JavaScript对象

JavaScript 中的所有事物都是对象：字符串、数值、数组、函数...

1.使用new运算符创建Object

ar people= new Object();　　 //new方式
people.name=‘Head‘; 　　 //创建属性字段
people.age=18; 　　 //创建属性字段

2.new关键字可以省略

3.使用字面量方式创建Object

4.使用字面量及传统复制方式

var people ={};
people.name=‘head‘;　　//字面量声明为空对象
people.age=18;　　 //点符号给属性复制

6.两种属性输出方式

alert(people.age); 　　 //点表示法输出
alert(people [‘age‘]);　　 //中括号表示法输出，注意引号

7.给对象创建方法

var people ={

run:function(){
return ‘跑步中！！！‘; }

}
alert(people.run());　　 //调用对象中的方法

8.使用delete删除对象属性

在实际开发过程中，一般我们更加喜欢字面量的声明方式。

九.JavaScript BOM

浏览器对象模型 (BOM)浏览器对象模型（Browser Object Model (BOM)）尚无正式标准。

1.警告框  即：Alert(‘aaa’); 当警告框出现后，用户需要点击确定按钮才能继续进行操作。用于确保用户可以得到某些信息。
2.确认框  用于验证是否接受用户操作。

当确认卡弹出时，可以点击 "确认" 或者 "取消" 来确定用户操作。点击 "确认", 返回 true；点击 "取消", 确认框返回 false。
if(confirm("你喜欢我吗？"))
{ alert(‘喜欢！‘);}
else{ alert(‘不喜欢！‘);}

3.提示框：用于提示用户在进入页面前输入某个值。

当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。如果点确认，返回值为输入的值。如果点取消，返回值为 null。
var name = prompt("请输入你的名字","");
if(name){alert("欢迎您"+name); }

十.JavaScript DOM （Document Object Model）即文档对象模型

W3C提供了比较方便简单的定位节点的方法和属性，以便我们快速的对节点进行操作。

分别为：getElementById()、getElementsByTagName()、getElementsByName()、getAttribute()、setAttribute()和removeAttribute()。

1.getElementById()方法

document.getElementById(‘box‘);　　//获取id为box的元素节点

2.getElementsByTagName()方法 ；返回一个对象数组htmlCollection(NodeList)，保存着所有相同元素名的节点列表。

document.getElementsByTagName(‘*‘); 　　 //获取所有元素
document.getElementsByTagName(‘li‘); 　　 //获取所有li元素，返回数组

3.getElementsByName()方法 ；获取相同名称(name)的元素，返回一个对象数组HTMLCollection(NodeList)。

document.getElementsByName(‘add‘) 　　 //获取input元素

4.getAttribute()方法 ；获取元素中某个属性的值。

document.getElementById(‘box‘).getAttribute(‘id‘);　　//获取元素的id值

5.setAttribute()方法 ：设置元素中某个属性和值。它需要接受两个参数：属性名和值。如果属性本身已存在，那么就会被覆盖。

document.getElementById(‘box‘).setAttribute(‘align‘,‘center‘);　　 //设置属性和值

6.removeAttribute()方法 ：可以移除HTML属性。

document.getElementById(‘box‘).removeAttribute(‘style‘); 　　 //移除属性

十一.JavaScript事件

事件是 由访问Web页面的用户引起的一系列操作，当用户执行某些操作的时候，再去执行一系列代码。  例如：用户点击，则执行相应的如下代码：。
　　//在HTML中把事件处理函数作为属性执行JS代码：

<input type="button" value="按钮" onclick="alert(‘Lee‘);" />    等效于：

var input = document.getElementsByTagName(‘input‘)[0]; 　　 //得到input对象
input.onclick = function () {　　　　 //匿名函数执行
alert(‘Lee‘); };

onclick 　　 当用户单击对象时 链接、按钮、表单对象、图像映射区域
onblur 　　 当焦点从对象上移开时 窗口、框架、所有表单对象
ondblclick 　　当用户双击对象时 链接、按钮、表单对象
onError 　　 当脚本中发生语法错误时 脚本
onfocus 　　 当单击鼠标或者将鼠标移动聚焦到窗口或框架时 窗口、框架、所有表单对象
onkeydown 　　 当按键被按下时 文档、图像、链接、表单
onkeypress 　　当按键被按下然后松开时 文档、图像、链接、表单
onkeyup 　　 当按键被松开时 文档、图像、链接、表单
onmouseout 　　当图标移出链接时 链接
onmouseover　　当鼠标移到链接时 链接
onreset 　　 单击表单的reset按钮 表单复位按钮
onresize 　　 当选择一个表单对象时 窗口
onselect 　　 当选择一个表单对象时 表单元素
onsubmit 　　 当发送表格到服务器时 表单

十二.JavaScript尺寸样式操作

如需改变 HTML 元素的样式，请使用这个语法：

document.getElementById(id).style.属性名=新样式

var box = document.getElementById(‘box‘);　　//获取box

    box.style.css.style;　　//CSSStyleDeclaration

    box.style.css.style.color;　　//red

    box.style.css.style.fontSize;　　//20px

 　　注意:如果遇到css样式具有横杠例：font-size需要改写成fontSize，去除横杠并将首字母大写

1.通过style内联获取元素的大小

var box = document.getElementById(‘box‘);　　//获取元素

box.style.width;　　//200px、空

box.style.height;　　//200px、空

2.scrollWidth和scrollHeight  这组属性可以获取滚动内容的元素大小。

box.scrollWidth;　　//200

box.scrollWidth;　　//200

3.offsetWidth和offsetHeight   这组属性可以返回元素实际大小，包含边框、内边距和滚动条。

box.offsetWidth;　　//200

box.offsetHeight;　　//200

4.clientLeft和clientTop    这组属性可以获取元素设置了左边框和上边框的大小。

box.clientLeft;　　//获取左边框的长度

box.clientTop;　　//获取上边框的长度

5.offsetLeft和offsetTop    这组属性可以获取当前元素相对于父元素的位置。

box.offsetLeft;　　//50

box.offsetTop;　　//50

    scrollTop和scrollLeft

6.这组属性可以获取滚动条被隐藏的区域大小，也可设置定位到该区域。

box.scrollTop;　　//获取滚动内容上方的位置

box.scrollLeft;　　//获取滚动内容左方的位置