javaScript入门,新手小白也能会
2021/5/23 20:25:31
本文主要是介绍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+';');
这篇关于javaScript入门,新手小白也能会的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-09-28AI给的和自己写的Python代码,都无法改变输入框的内容,替换也不行
- 2024-09-27Sentinel配置限流资料:新手入门教程
- 2024-09-27Sentinel配置限流资料详解
- 2024-09-27Sentinel限流资料:新手入门教程
- 2024-09-26Sentinel限流资料入门详解
- 2024-09-26Springboot框架资料:初学者入门教程
- 2024-09-26Springboot框架资料详解:新手入门教程
- 2024-09-26Springboot企业级开发资料:新手入门指南
- 2024-09-26SpringBoot企业级开发资料新手指南
- 2024-09-26Springboot微服务资料入门教程