javaScript入门,新手小白也能会

js特点

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

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

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

     <script type=“text/javascript”>
	//里面写js代码
	alert(‘hello,js’);
     </script>

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

	<script src=‘test.js’>
		之间不允许加入任何JS代码….
	</script>

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

3.在HTML标签中使用JavaScript(基于事件)

		<div onclick=“alert(‘hello,js’)”></div>

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+';');
  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
JavaScript入门有多种方法可以实现。一种方法是直接将JavaScript源代码放在网页文档中的<script>标签内。例如,你可以在<head>标签内添加<script>标签,并在其中编写JavaScript代码,然后在<body>标签内使用<button>标签调用JavaScript函数来触发代码执行。这种方法适用于简单的小型项目。 另一种方法是将JavaScript代码保存在外部文件中,并通过<script>标签引入到网页中。你可以在<head>标签内使用<script>标签,并设置type属性为"text/javascript",然后通过src属性指定外部JavaScript文件的路径。这样可以使代码更加清晰和易于维护。 此外,可以在<script>标签内编写JavaScript代码块,直接在网页中执行代码。这种方法适用于简单的交互和调试。 无论使用哪种方法,都需要了解基本的JavaScript语法和语义,并掌握常用的JavaScript函数和操作。可以通过学习在线教程、参考官方文档或阅读相关书籍来深入了解和学习JavaScript入门知识。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [JavaScript基础入门](https://blog.csdn.net/dangfulin/article/details/108061550)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *3* [JavaScript入门到精通(全)](https://blog.csdn.net/weixin_47872288/article/details/118973926)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值