javascript 学习

html是结构,CSS是表示,js是动态

graph TB
ES5
ES6
node(node.js ES服务端运行环境)
ES6-->babel(babel转码器)
babel-->ES5
less-->css
jsonp[jsonp可以跨域]-->api
axios[axios不能跨域]-->api

一个变量,多个数组

变量

变量要先声明再赋值

变量名规范:

必须以字母、下划线或美元符号开头，后面可以跟字母、下划线、美元符号和数字
变量名区分大小写
不允许使用JavaScript关键字和保留字做变量名

var 变量名,变量2,变量n; //变量需要声明
var mychar;
mychar="javascript";
var mynum = 6;

输出变量,字符串可以使用+号串连

ES6增加let代码块作用域变量

数组

创建数组语法：

1	var myarray=new Array(num); //num是数组初始长度,可为空, 可扩展

数组赋值:

JS的数组中添加元素只需要使用未使用的索引即可.

var myarr=new Array(); //定义数组
 myarr[0]=80; 
 myarr[1]=60;
 myarr[2]=99;
var myarray = new Array(66,80,90,77,59);//创建数组同时赋值
var myarray = [66,80,90,77,59];//直接输入一个数组（称 “字面量数组”）

数组长度

1	myarray.length; //获得数组myarray的长度

数组的维度

一维数组的表示: myarray[ ]
二维数组的表示: myarray[ ][ ]
var Myarr = [[0 , 1 , 2 ],[1 , 2 , 3]]
myarr[0][1]=5; //将5的值传入到数组中，覆盖原有值。说明: myarr[0][1] ,0 表示表的行，1表示表的列。

操作符

算术操作符(+、-、*、/等)，比较操作符(<、>、>=、<=等)，逻辑操作符(&&、||、！)

自加一“++”；自减一“--”

操作符之间的优先级（高到低）:

算术操作符 → 比较操作符 → 逻辑操作符 → “=”赋值符号

condition

if(条件1)
{ 条件1成立时执行的代码}
else  if(条件2)
{ 条件2成立时执行的代码}
...
else  if(条件n)
{ 条件n成立时执行的代码}
else
{ 条件1、2至n不成立时执行的代码}

// 当有很多种选项的时候，switch比if else使用更方便。
switch(表达式)
{
case值1:
  执行代码块 1
  break;
case值2:
  执行代码块 2
  break;
...
case值n:
  执行代码块 n
  break;
default:
  与 case值1 、 case值2...case值n 不同时执行的代码
}

迭代

for(初始化变量;循环条件;循环迭代)
{     
    循环语句 
}

while(判断条件)
{
    循环语句
}

do //先执行一次再循环
{
    循环语句
 }
while(判断条件)

break语句退出当前循环，直接执行后面的代码

continue的作用是仅仅跳过本次循环

function

函数定义后需要调用

function 函数名()
{
     函数代码;
}
函数名()

JavaScript-警告（alert 消息对话框）

1	alert(字符串或变量);

JavaScript-确认（confirm 消息对话框）

1	confirm(str);

参数说明:

1 2	str：在消息对话框中要显示的文本返回值: Boolean值

返回值:

1 2	当用户点击"确定"按钮时，返回true 当用户点击"取消"按钮时，返回false

JavaScript-提问（prompt 消息对话框）

语法:

1	prompt(str1, str2);

参数说明：

1 2	str1: 要显示在消息对话框中的文本，不可修改 str2：文本框中的内容，可以修改

返回值:

1 2	1. 点击确定按钮，文本框中的内容将作为函数返回值 2. 点击取消按钮，将返回null

JavaScript-打开新窗口（window.open）

语法：

1	window.open([URL], [窗口名称], [参数字符串])

参数说明:

URL：可选参数，在窗口中要显示网页的网址或路径。如果省略这个参数，或者它的值是空字符串，那么窗口就不显示任何文档。
窗口名称：可选参数，被打开窗口的名称。
    1.该名称由字母、数字和下划线字符组成。
    2."_top"、"_blank"、"_self"具有特殊意义的名称。
       _blank：在新窗口显示目标网页
       _self：在当前窗口显示目标网页
       _top：框架网页中在上部窗口中显示目标网页
    3.相同 name 的窗口只能创建一个，要想创建多个窗口则 name 不能相同。
   4.name 不能包含有空格。
参数字符串：可选参数，设置窗口参数，各参数用逗号隔开。

参数表:

JavaScript-关闭窗口（window.close）

close()关闭窗口

用法：

1	window.close(); //关闭本窗口

或

1	<窗口对象>.close(); //关闭指定的窗口

认识DOM

文档对象模型DOM（Document Object Model）定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构（节点树）。

HTML文档可以说由节点构成的集合，三种常见的DOM节点:

<元素标签属性>文本<元素>

为元素标签配置惟一ID属性,通过ID获取元素

语法:

1	document.getElementById(“id”)

结果:null或[object HTMLParagraphElement]

Object.innerHTML; //获取/修改元素的内容

Object.style.property=new style; //修改元素的CSS样式
<p id="pcon">Hello World!</p>
<script>
   var mychar = document.getElementById("pcon");
   mychar.style.color="red";
   mychar.style.fontSize="20";
   mychar.style.backgroundColor ="blue";
</script>

Object.style.display = none/block；//显示或隐藏对象

object.className = classname; //配置对象类名

整理链接:https://www.imooc.com/code/468