javaScript入门，新手小白也能会

太过爱你忘了你带给我的痛 2022-10-15 04:54 208阅读 0赞

#### js特点 ####

1.这门语言运行在浏览器中，只要有浏览器就能运行js  
优点  
1.使用JavaScript可以在客户端进行数据验证，节省服务器端的资源  
2.可以方便地操纵各种页面中的对象，使网页更加友好  
3使多种任务仅在客户端就可以完成而不需要网络和服务器的参与，从而支持分布式的运算和处理  
局限  
1.兼容性。互联网上有很多浏览器，如FireFox、Internet Explorer、Opera等，但各种浏览器支持JavaScript的程度是不一样的，所以各个浏览器运行JavaScript的效果会有一定的差距，有时甚至会显示不出来  
2.JavaScript不能打开、读写和保存用户计算机上的文件

**学习目的**  
1.写特效  
2.表单验证  
3.Ajax

js使用方式  
1.在HTML中使用JavaScript

2.使用< script>< /script>标签导入js文件  
注意：当使用script标签的src属性时，script标签中一定不能放入任何JS代码。  
例如：

注意：< script>标签可以放到html页面的任何地方

3.在HTML标签中使用JavaScript（基于事件）

4.基于跳转 使用

< a href=“javascript:alert(‘hello,js’);”>< /a>

JS的输出方式  
1. alert(‘警告框’);  
注意： 没有点击确定按钮的情况下,alert(‘后面的代码不执行’);  
2. window.document.write(‘向页面输出内容’);  
3. console.log(‘在控制台打印’) 推荐使用这种

#### js基本语法 ####

1.定义变量  
1.使用关键字 var 变量名  
var 可以同时声明多个变量，每个之间用逗号隔开  
var aa = ‘张三’;  
**注意：在js中变量必须先定义在使用 ，如果直接使用一个没有定义的变量 会就报错（5.html:11 Uncaught ReferenceError: str is not defined）**  
2.变量的类型 取决于 赋的值（js是弱类型）

3.在js中变量名区分大小写

4.变量名(标识符)定义规则 数字 字母 下划线 $ 组成，不能以数字开头

var  $='111';  //ok

2.注释:

//    单行注释
    		/*     */多行注释

3.语句  
JavaScript中的语句以一个分号结尾，如果省略分号，则由解析器确定语句的结尾，一般情况下，换行会被当做一个语句的结尾

#### js数据类型 ####

**1.基本数据类型**

a.字符串 String

注意是"php"中定义字符串 单双引号的区别,对比学习

1.双引号解析变量 单引号不解析变量
    			2.程序在解析单引号速度较快
    			3.双引号转译绝大多数字符 ，单引号只能转译单引号本身(') 和 转译符本身(/)
    		js定义字符串
    			1.js中单双引号都不解析变量 （语法限定）
    			2.单引号和双引号均可解析转义字符
    			3.字符串中使用+连接变量
    			4.字符串不能换行声明
    				如需要使用ES6中的模板字符``
    			5.字符串对象函数的使用	
    		1.定义一个字符串

var str='iloveyou';
    		var str1 = "iloveyou";
    		if(str==str1){//单双引号没啥区别
    			// console.log('nice');			
    		}

2.单双引号都不解析变量

var flag = 'zhangsan';
    		var str2 = '{$flag}iloveyou';	
    		// console.log(str2);

3.如何连接变量

var str3 = flag+'loveyou';	
    		// console.log(str3);

4.字符串中的转译问题

//a.将无意义的字符转译成有意义的字符
    	var str4 = "zhangsan";
    	 console.log(str4);
    
    	//b.将有意义的字符转译成无意义的字符	
    	var str5 = '每当夜晚来临的时候，孤独总在\'我\'左右';//《执着》 许巍
    	console.log(str5);

5.字符串不能换行声明

// var str6 = 'ilove
    		// you';

6.字符串对象中方法的使用

var flag = 'iloveyou';
    	//1.字符串转大写
    	var res = flag.toUpperCase();//document.write(); obj.方法()  
    
    	//2.查看字符串长度
    	var res = flag.length//obj.属性名
    	// console.log(res);
    		创建字符
    			1.快捷创建字符串  
       var str = 'nice';
    			2.创建字符串对象
    var str = new String('nice');

在js中除了null undefined 的其他类型数据 都有类似于 new String();这样的创建方式，但是我们一般在

写程序的时候都使用快捷方式，因为快捷方式创建的值和 new创建的值使用起来一样

b.数值型 Number
    		整数Int
    		浮点数float
    		NaN 非数值型
    			1.任何涉及NaN的操作，结果都为NaN
    			2.NaN与任何值都不相等，包括NaN本身
    			isNaN()函数用来检测是否为NAN类型
    		parseInt()
    		parseFloat()
    	c.布尔型Boolean
    		ture 真
    		false  假

2.复合数据类型

a.对象object
    		对象其实就是一些数据的集合，这些数据可以是字符串型、数字型和布尔型，也可以是复合型

创建对象的几种方式

1.  obj = new Object();

属性操作:

添加

1. obj.name = '张三';   //obj.后面 不解析变量
    		2. var sex='sex';
            obj[sex]='boy';  //obj[] 解析变量

删除

delete obj.name

修改

obj.sex = 'man'

查看

console.log(obj.name)

方法操作  
添加

obj.eat = function(){
                console.log(this.name+'爱吃羊肉串');
               }

调用

obj.eat();

删除

delete obj.eat;

修改

obj.eat=function(){
          	console.log(this.name+'羊蝎子');
        }
    	2. var obj={
            name:'张三',
            sex:'nan',
            eat:function(){
    	console.log(this.name+'你好');
     }
    }

推荐这种

(json,xml)
    	3. function MyObject(){
       //通过this 给空的object添加属性
      this.name = 'zhangsan';
      this.sex = 'nan';
      this.eat=function(){
    	console.log(this.name+'你好');
    }
    }

new实例化一个对象的时候会自动触发构造方法

var obj = new MyObject();

使用属性

obj.name;
      obj.eat();
    		遍历对象
    			1 for   in
    				var obj={
    	name:'zhangsan',
    	sex:'nan',
    	age:21,
    
    	classid:'ruanjian_02',
    	eat:function(){
    		console.log('nice');
    	}
     }
    
    for(var o=null  in obj){
    // o 对象的属性
    console.log(obj[o]);
    }
    
    for(var o in obj){
    console.log(o+'是属性'+obj[o]+'里面是值')
    }

注意:是"PHP"中转化成一个通用的格式 json

$arr = [
    'username'=>'zhangsan',
    'sex'=>'age'
    ];
    $json_str = json_encode($arr);
    			将json字符串转化为对象
    				json_decode($json_str)->username;
    			将json字符串转化为数组
    				json_decode($json_str,true)['username'];
    		eval("("+json字符串+")")

b.数组array  
创建数组

快捷创建   var arr=[1,2,3,4,5];

创建数组对象

1.	var arr1 = new Array(1,2,3,4,5);
    2. var  arr2 = new Array(5); //返回一个单元格数是5个长度的空数组

数组单元的访问

var arr= [1,2,3,'abc',['oo','xx'],6,7,8,9];
                arr[1];
               arr[4][0]
    		修改单元
    			arr[4][0]='ooooo';
    		数组的单元个数
    	console.log(arr.length);
    	// console.log(arr);

注意:

1.数组必须指定下标 否则报错	
    arr[11]=100;
    			2.没有关联数组  js中数组是一个对象  对象添加属性- obj['name']='zhangsan'
    	arr['name']='zhangsan';//并不会影响单元个数 ， 相当于给arr对象添加一个name属性	
    		遍历
    			for循环
    				for(var i=0; i< arr.legnth; i++){}
    			for  in
    				for(var i in arr){}
    			forEach()
    				arr.forEach(function(item , index ){})
    			for  of
    				for(var item of arr){ 之间遍历的是元素}

3.其他数据类型  
a. 函数function  
函数是一段可执行的JavaScript代码，在JavaScript中，函数可以带有0个或多个参数，也可以返回一个值或不返回值

作用域

局部变量
    				在函数内部使用var 声明的变量是 局部变量,只能在函数内部使用,
    					局部变量在函数开始执行时创建，函数执行完后局部变量会自动销毁
    			全局变量
    				在函数外面定义的变量,或者在函数内部没有使用var关键字声明的变量
    					全局变量有 全局作用域: 网页中所有脚本和函数均可使用。

函数自执行写法

(function(形参){函数体代码})(实参数)

b. null 空

null是一个特殊的数据类型，其所代表的意思是“空”。需要注意，这个空并不代表是0或空字符串。null代表没有值，不是一个有效的数字、字符串、也不是数组、对象和函数，什么数据类型都不是

c. undefined未定义

undefined也是一个特殊的数据类型，只有定义了一个变量但没有为该变量赋值，使用了一个并未定义的变量、或者是使用了一个不存在的对象的属性时，JavaScript会返回undefined。

4.数据类型的转换

隐式类型转换
    		所谓隐式类型转换，就是不需要程序员定义，JavaScript会自动将某一个类型的数据转换成另一个类型的数据。JavaScript隐式类型转换的规则：
    		
    将类型转换到环境中应该使用的类型。
    		例如：if(1){	//1会自动转换成true
    	document.write(‘ok’);
    }
    
    		0,'',NAN,undefined,false,0.0,null
    		可以隐式类型转换的情况：

1.数字类型：在字符串环境下可以隐式转换为“数字”，在布尔环境下，可以隐式转换为true（非0数字，0为false）

2.非空字符串：在数字环境下，可以隐式转换为字符串中的数字或NaN；在布尔环境下，可以隐式转换为true。

3.空字符串：在数字环境下可以隐式转换为0；在布尔环境下可以隐式转换为false;

4.字符串”true“：在数字环境下可以隐式转换位1；布尔为true

5.字符串“false”：数字环境为0，布尔为false

6.null：在字符串环境下，转换为“null”；数字环境下，转换为0，布尔环境下，转为false

7.NaN：在字符串环境下可以隐式转换为“NaN”;布尔环境下，转换为false

8.undefined：字符串环境下，转换为“undefined”，数字环境下，转为  
NaN，布尔下，转为false  
9.true：字符串转为“true”，数字环境下转为1

10.false：字符串转为“false”，数字环境下转为0

显示类型转换
    		Number()
    			1.如果是布尔值，true和false将分别转换为1和0
    			2.如果是数字值，只是简单的传入和返回
    			3.如果是null，返回0
    			4.如果undefined，返回NaN
    			5.如果是字符串，遵循下列规则：

a.“11”会变成11，“011”会变成11  
b.“1.1”会变成1.1  
c.“0xf”会变成相同大小的十进制整数值  
d. 如果字符串是空的，则将其转换为0  
e. 如果字符串包含除上述格式之外的字符，则将其转换成NaN

parseInt()
    			1.忽略字符串前面的空格，直到找到第一个非空格字符
    			2.如果第一个字符不是数字或者是负号，返回NaN
    			3.空字符串，返回NaN
    			4.如果第一个字符是数字，会继续解析第二个字符，直到解析完所有后续字符或遇到了一个非数字字符。
    			5.如果字符串以0x开头且后面跟数字字符，就会将其转为16进制数，同样，八进制也一样。
    		parseFloat()
    			1.第一个小数点是有效的，第二个小数点无效
    			2.始终忽略前面的0，不分进制数
    			3.十六进制会被转换成0
    			4.空字符串转换为NaN

Boolean()函数将一个非布尔类型转换为布尔类型

注意 name=false 使用 Boolean(name)转换的时候得到是true  
个构造函数传递非空字符串都会创建布尔值为true的boolean对象

解决办法 使用 JSON.parse(name) 转换数据类型 true或false

String()
    	typeof  可以打印数据类型
    		var aa='qqweq';
    		
    console.log(typeof  aa); //string
    	eval() 可以把json字符串转换成json对象
    		var arr = "{'name':'张三','sex':'女'}"
    		var arr1 = eval("("+arr+")");
    		eval('var arr = '+obj.data+';');