JS语言（感觉不太会用的亚子)

前言

说说自己对这个JS语言的看法：
怎么说呢，算是自己第一次学习面向对象的语言，就感觉跟后台的语言完全不同，具体的不同或许就是实现功能和编译方式的不同？有点感觉自己无从下手，需要慢慢适应一下这种东东吧，哈哈哈

然后说一些内容的简略，因为已经学过C语言的，这些博客写来也是为了记录自己学前端的过程，所以说，不会特别完整，意思就是可能有些内容重复的我没有放上来！

引用方式

外联式

JS外联引用方式与图片与CSS样式的引用类似
引用的文件为js后缀的文件

<script src=”路径.js“></script>

嵌入在HTML页面

1、首先script允许出来在html标签的任意位置
例如：

后续在script中填入即可

基本语法

定义 var

var即为JS中的定义，一如C语言中的int
需要注意的问题有：不能以数字命名开头

var stuName1; //正确
var 1stuName //错误

输入 prompt();

这个输入是窗口中输入一下，个人觉得在面对对象的语言中并无大用
具体为: prompt(“一些提示信息”);
说一个小用法，判断一个输入数据是否是数字

var input=prompt(“请输入一个数据：”):
console.log(isNaN(数据));

其中isNaN会抛开数据类型来判断数据是否是数字。
如果数据是数字则返回false，否则返回ture

两种输出

输出在控制台 console.log();

控制台是在网页中打开，F12即可，点开右上角的console即可查看

输出在控制台函数为：console.log();
其中可以直接输出变量str, console.log(str);
也可以输出一些信息console.log(“shit”);

输出在页面 document.write();

输出的东西与conso.log();一致，就不在赘述

数据类型

数字number类型

有整数和浮点数类型。
均用var进行定义

var n1=80; //正确
var n2=34.56 //正确
var n3=4.5e10 //正确

字符串string类型

用var进行定义

var str=“炳材”
console.log(str); 即可输出炳材

特殊的一些转义字符：
换行:\n；回车：\r; Tab符：\t;

布尔Boolean类型

空null类型

定义变量不再使用时，可赋值为空

未定义undefined类型

定义了一个变量，未对其赋值则为undefined

var s;
console.log(s); 即输出undefined

运算符与表达式

因为运算符的规则基本都与C语言类似，所以这个放一些特例即可

关系运算符

其次还有就是所有数据与string类型做+运算时，最后结果都为string
ex：

var a=15,b=“20”;console.log(a+b); //输出1520

简单函数

toString

toString函数作用为将任意类型数据转化为string类型。
ex：

var a=15;console.log(a); //输出false
var a=15;console.log(isNaN(toString(a))); //输出ture

目前比较有实战意义的例子还没有遇到，但这是我自己理解记忆的例子

parseInt

parseInt作用为获取指定数据的整数部分，如果此数据的第一个字符是非整数字符，则返回NaN
ex：

var a=115;console.log(parseInt(a)); //输出115
var a=“115s”;console.log(parseInt(a)); //输出115
var a="s115"console.log(parseInt(a)); //输出NaN

parseFloat

与parseInt完全一致

Number

Number函数作用为将一个字符串解析为number类型，其中只要包含非法字符，返回NaN
ex：

var a=“15”;console.log(a); //输出15
var a=“ss15”;console.log(a); //输出NaN
var a=“15ss”;console.log(a); //输出NaN

目前比较有实战意义的例子还没有遇到，但这是我自己理解记忆的例子

自定义函数

函数定义、调用、传参

function为自定义一个函数的关键词，其余的跟C语言一样样的。
ex：

输出的结果为：

用户名:Tom密码:123
上述这个例子其实就是函数的定义、调用、传参的过程

再说一个例子
ex:

console.log(a);
var a=15;console.log(a);

第一个输出是在定义之前，在其他语言中会报错，但是JS中会预读，所以第一个输出的是undefined，第二个输出的则是15

分支结构

if-else结构

这个是非此即彼的关系，当然其中不一定要有else
这个挺简单的，主要说说不同的。
六种iif()中判定情况则为假；

判定内容为假的
0
0.0
“”
null
undefined
NaN

除上述情况外，都为真

switch-cash结构

这个给个结构就好了，怕忘
switch(){
case1: 语句1; break;
case2: 语句2; break;
…
default: 语句3;
}

循环结构

for结构

do-while和while结构

while结构

do-while结构

数组

索引数组

其中索引数组其实就是平常我们大家所熟知的数组

创建数组

两种创建数组的方式：
1、var arr1=[]; //定义一个不包含元素的数组
2、var arr2=[97、85、79]; //定义包含3个元素的数组
3、var arr3=new Array(); //定义一个不包含元素的数组
4、var arr4=new Array(“Tom”,“Mary”,“John”);
//定义包含3个元素的数组
其中Array是关键词，类似于一个函数，作用为创建一个数组
其中的一些技巧：

length属性

数组自带的length属性

关联数组

关联数组即可自定义下标名称的数组，原因是索引数组中的数字下标没有明确的意义

创建数组

var bookInfo=[];
bookInfo[‘bookName’]=‘西游记’; bookInfo[‘price’]=35.5;

数组遍历

for-in循环

ex：

            var bookInfo=[];
            bookInfo['bookName']='西游记';
            bookInfo['bookPrice']=35.5;
          	for(var i in bookInfo)
            {
                console.log(i);           //key 是下标名
                console.log(bookInfo[i]); //bookInfo[key]是数组内容
            }
   			输出结果为：bookName 西游记
   								  bookprice	35.5

数组API函数

其中arr是一个数组

数组转字符串

String(arr)

String函数作用为：将数组中的元素转化字符串，用逗号隔开
ex：

var chars=[“h”,“e”,‘l’,‘l’,‘o’];
var i=String(chars);
console.log(i);

输出结果为：h,e,l,l,o

arr.join("")

arr.join("")函数作用为：将数组中每个元素转化为字符串，用自定义的连接符分隔

var chars=[“h”,“e”,‘l’,‘l’,‘o’];
console.log(chars.join(""));

输出结果为：hello
如果想与String一样的效果，只需改为console.log(chars.join(","));即可
其中的一些固定技巧：

拼接与选取

要点：不直接修改原数组，是直接返回新数组

concat()拼接

concat作用为：拼接两个或多个数组，并返回结果
ex：

var arr1=[90,91,92],arr2=[80,81],arr3=[70,71,72,73];
var arr4=arr1.concat(50,60,arr2,arr3);
console.log(arr1)
console.log(arr4);

   输出结果为：[90,91,92]	//不修改原数组
   [90, 91, 92, 50, 60, 80, 81, 70, 71, 72, 73]	//arr1的值也会拼接		

slice(start,end)选取

slice作用为：返回现有数组的一个子数组，其中有两个参数，相当于一个区间，在区间内选取
特性：其中参数含头不含尾，就是包括头下标的数值，但不包括尾下标
ex：

var array1=[10,20,30,40,50];
var array2=array1.slice(1,4); //20 30 40
var array3=array1.slice(2); //30 40 50
var array4=array1.slice(-4,-2); //20 30
var array5=array1.slice(); //10 20 30 40 50

一些小技巧：

修改数组

要点：原数组会随之改变

splice

splice函数作用较广泛，在下列三个应用中具体操作不同

删除

删除操作中格式为：splice(statr,n);其中start是开始的位置，n是往后删除的个数。
ex：

var arr1=[10,20,30,40,50];
arr2=arr1.splice(2,1)
console.log(arr1);

输出结果为：10,20,40,50

插入

插入操作中格式为：splice(start,0,值);其中start是开始的位置，删除的个数为0，然后接着跟值，就是start的前面插入值。
ex：

var arr1=[10,20,30,40,50];
arr1.splice(2,0,25);
console.log(arr1);

输出结果为：10,20,25,30,40,50

替换

替换操作中格式为：splice(start,n,值);即先删除一些值，再插入一些值。
ex：

var arr1=[10,20,30,40,50];
arr1.splice(2,3,80,70,60);
console.log(arr1);

输出结果为：10,20,80,70,60

颠倒数组

reverse()

输出结果为：50,40,30,20,10

排序

sort()

ex：

var str=[50,30,10];
str.sort();
console.log(str);

输出结果为：10,30,50

DOM查找

其中DOM的函数代码注意区分大小写！！
body中通用HTML代码：

<div id="myList">
         <li id="m1">首页</li>
         <li id="m2">企业介绍</li>
         <li id="m3">联系我们</li>
     </div>

ID属性查找

关键函数为：document.getElementById
ex：

var ul=document.getElementById(‘myList’);
console.log(ul);

控制台输出结果为

代码延续到后面。

标签名查找

关键函数为：parent.getElementByTagName(“tag”);
其中parent是一个父标签，tag是子节点，都是抽象的一些标签。紧接着返回值是一个集合！！！
ex：

var list=ul.getElementsByTagName(‘li’);
console.log(list);
console.log(list[0]);

输出结果分别为：

name属性查找

关键函数为：document.getElementsByName

输出结果是这个东西（说实话也看不懂）：

class属性查找

关键函数为：document.getElementsByClassName

<div id="news">
        <p class=" mainTitle">新闻标题1</p>
        <p class=" subTitle">新闻标题2</p>
        <p class="mainTitle">新闻标题3</p>
        <p ><img src="css选择器查找.png " /></p>
    </div>

list1=document.getElementsByClassName(‘mainTitle’);
console.log(list1,list1[0]);

输出结果为：

css选择器查找

var elem=div.querySelector(’.subTitle’);
var elems=div.querySelectorAll(".mainTitle");
console.log(elems);

输出结果为：

DOM修改

读取属性值

修改属性值

判断是否包含指定属性

移除属性

修改样式

DOM添加

创建空元素

关键函数：document.createElement("元素名“);相当于创建了一对标签
ex：

var a =document.createElement(‘table’);
console.log(a);

输出结果为：

设置属性和样式

首先创建一个标签，再进行设计
ex：

//设置关键属性
var as=document.createElement(“li”);
as.innerHTML=“go to tmooc”;
//标签内容
as.href=‘http://tmooc.cn’;
//标签href地址

//设置关键样式
as.style.opacity=“1”;
//标签透明度
as.style.cssText=“width:100px;height:100px;”
// 标签CSS属性的设置，可以多种
console.log(as);

输出结果为

添加元素

关键函数：parentNode.appendChild(childNode);

输出结果为：

另一个添加元素的函数：parentNode.insertBefore(newChild,existingChild);

具体例子

这一个操作遇到了一个具体的例子，感觉很好用，比这种枯燥的理论理解起来要好的多。例子的作用就是通过JS来给html去设计他的属性和样式
ex：
HTML代码：

<div class="box-page"><d/iv>

JS代码：

1、首先我们找到这个元素并命名为arr
var arr=document.querySelector(".box-page");
创建一个空元素去构造样式，元素名与标签名一致
var divs=document.createElement(“div”);
紧接着设计样式：
divs.style.cssText = “width: 100px; height: 100px;border:2px solid #fff;box-sizing:border-box;background-color:red;position: absolute;background-image:url(imgaes/0.jpg);background-size:300px 300px;”;
最后我们为这个区域添加样式：
arr.appendChild(divs);

这个案例个人觉得将这章的精华提炼了出来，

定时器

周期性定时器

关键函数：setInterval(exp,time)：exp为执行代码，time为时间，单位为毫秒
ex：

var timer= setInterval(function(){
console.log(“Hello World”);
},3000);

函数作用为：打开网页后延迟三秒，在控制台输出hello world

停止功能：
关键函数：clearInterval();
如上面的例子：停止的话直接：clearInterval(timer);

一次性定时器

关键函数：setTimeout(exp,time);
ex：

var s=setTimeout(function(){
alert(“恭喜过关”);
console.log(“xxx”);
},3000);

后记

好累呀，JS学的太懵了，应用起来感觉不好整的，唉。