当前位置: 首页 > Web前端 > CSS

JavaScript基础语法

时间:2023-03-30 15:49:25 CSS

优秀程序员Web前端培训分享JavaScript基础语法、JavaScript发展史(JS)1994年,Netscape发布了Navigator浏览器0.9版,这是世界上第一个比较成熟的浏览器。网络浏览器,一鸣惊人。但这是一款名副其实的浏览器——它只能浏览页面,浏览器无法与用户进行交互。当时,有两种方法可以解决这个问题。一种是使用现有的语言,让它们直接嵌入到网页中。另一个是发明一种全新的语言。liveScript==>javaScript==>ECMAscriptHTML:标记语言JavaScript:编程语言2、1995年,Sun将Oak语言更名为Java,正式推向市场。Sun的大肆宣传,承诺这种语言可以“编写一次,随处运行”(WriteOnce,RunAnywhere),看来很有可能成为未来的主宰。Netscape深受感动,决定与Sun4结盟。34岁的系统程序员BrendanEich登场了。1995年4月,Netscape聘用了他,他只用了10天就设计出了Javascript。(多态语言)5.(1)从C语言的基本语法开始学习;(2)学习Java语言的数据类型和内存管理;(3)借鉴Scheme语言,将函数提升为“一等公民”(firstclass)地位;(4)借鉴Self语言,采用基于原型的继承机制。JavaScript能做什么1.常见的网页效果【表单验证、轮播图。..】2.配合H5实现游戏【水果忍者:http://www.jq22.com/demo/html...】3.实现应用级程序【http://naotu.baidu.com】4.实现统计效果[http://echarts.baidu.com/exam...]5.地理定位等功能[http://lbsyun.baidu.com/jsdem..._5]6.在线学习编程[https://codecombat.163.com/play/]7.js可以实现人工智能【人脸识别】8....JavaScript的组成1.ECMASCRIPT:定义了javascript的语法规范,描述了语言的基本语法和数据类型2.BOM(BrowserObjectModel):浏览器对象模型——拥有成熟的可以操作浏览器的API,通过BOM可以操作浏览器。例如:弹出框、浏览器跳转、分辨率获取等。3.DOM(DocumentObjectModel):文档对象模型——有一套成熟的API可以操作页面元素,可以操作页面中的元素通过DOM。例如:增加一个div,缩小一个div,改变一个div的位置等。总结:JS是通过固定的语法来操作浏览器和标签结构,从而在网页上实现各种效果。JavaScript代码的写法位置和css是一样的,我们的js在页面上也可以写成多种方式使之生效js也可以写成多种方式,分为内联、内嵌、外链内联JS代码(不推荐)js代码写在label上需要依赖事件(行为)来触发_//我是index.js文件_alert('我是弹窗层')__点击试试__点击试试

嵌入JS代码Embedded页面打开时直接触发js代码__外链js代码(推荐)·只要在html页面中引入外链js代码,打开页面时直接触发新建一个后缀为.js后缀,在文件中写入js代码,将写入的js文件导入html页面____JS中的注释·学一门语言,先学一门语言的注释,因为评论是给我们自己和开发者的。写一个评论,这将有助于我们以后阅读代码。单行注释一般用于描述后面一行代码的功能。可以直接写两个/,或者按ctrl+/_//我是单行注释__//下面的代码表示在浏览器中出现一个弹出层_alert('我是一个弹出层')多行注释一般用于写一个长段,或者注释一段代码。可以直接写/**/然后在两个星号之间写注释,或者按shift+alt+a_/*我是多行注释*/__/*被注释的代码不会执行alert('Iamapop-uplayer')alert('我是一个弹出层')*/_alert('我是一个弹出层')variable(强调)·variable是指程序中保存数据的容器·变量是存储在计算机内存中的数据的标识符。根据变量名,可以获取内存中存储的数据。也就是我们在内存中存入一段数据,然后给这段数据起一个名字,方便我们以后再找。He语法:var变量名=valuedefinevariableandassignvalue_//defineavariable_varnum;_//assignavaluetoavariable_num=100;_//defineavariableandassignavalueatthesame时间_varnum2=200;注意:一个变量名只能存储一个值。当再次给一个变量赋值时,之前的值将丢失。变量名区分大小写(JS区分大小写)变量命名规则及命名规则规则:必须符合,不符合则为错误变量名可以由数字、字母、英文组成下划线(_)、美元符号($)严格区分大小写不能以数字开头,不能用汉字命名不能是保留字或关键字不能有空格。规范:建议遵循(开发者默认),不遵循不会报错。变量名称应尽可能有意义(语义)。遵循驼峰命名规则。当它由多个单词组成时,从第二个单词的第一个字母开始。大写数据类型(强调)是指我们在内存中存储的数据类型。我们通常将其分为两类:基本数据类型和复杂数据类型。基本数据类型1.数值类型(number)所有数字都是数字类型(包括二进制、十进制、十六进制等)NaN(不是数字),非数字2,字符串类型(string)所有内容用引号括起来(可以是单引号也可以双引号)3.布尔类型(boolean)只有两种(true或false)4.空类型(null)只有一种,也就是null,意思是空5.未定义类型(undefined)只有一种,也就是undefined,也就是复杂数据类型表示对象类型(object)和函数类型(function)表示没有值。.判断数据类型既然数据已经分好类型,那么我们就需要知道我们存储的是什么类型的数据。使用typeof关键字判断_//第一种方式使用_varn1=100;console.log(typeofn1);_//第二种方式使用_vars1='abcdefg';console.log(typeof(s1));判断变量是否为数字可以使用isNaN方法判断变量是否为isNaN:isnotanumber//如果变量是数字_varn1=100;控制台日志(isNaN(n1));_//=>false__//如果变量不是数字_vars1='Jack'console.log(isNaN(s1));_//=>true数据类型转换·数据类型之间的转换,比如数字转字符串,字符串转布尔值,布尔值转数字等数据类型转换为值1,数字(变量)变量可以强制转换变成数字类型可以转换小数,小数会保留可以转换boolean值可以返回NaN2,遇到不可转换的值时parseInt(variable)从第一个开始检查数字,如果是数字就转换,如果知道的不是数字,如果开头不是数字,那么直接返回NaN,如果不知道小数点,只能保留整数3,parseFloat(variable)从中查第一个数字,它是一个数字转换一下,知道不是数字的东西。开头不是数字,直接返回NaN。知道小数点4一次,加法以外的数学运算。运算符两边必须是可运算的数字。如果任何一个运算符不是一个数,则可以计算出NaN。加法不能用其他数据类型转换成字符串1.Variable.toString()有些数据类型不能使用toString()方法,比如undefined和null2。字符串(变量)·所有数据类型都可以使用加法运算。在JS中,+有两种含义。字符串拼接:只要+的两边是字符串,就会进行字符串拼接。加法运算:只有+两边都有数字其他数据类型转换成Boolean(变量)时会进行数学运算。在js中只有'',0,null,undefined,NaN,这些都是false,其余的他们都是真正的运营商。它是在代码中执行计算时使用的符号。不仅仅是数学运算,我们在js中也有很多计算方法。数学运算符1、+只在符号两边都有数字时才使用进行加法运算只要符号两边是字符串类型,就会进行字符串拼接2、-会进行减法运算,两边都会自动转换成数字进行运算3,*会进行乘法运算,会自动转换两边都转换成数字进行运算4,/会进行除法运算,两边都会自动转换成数字进行计算5,%会进行取余运算,两边自动转为数字进行计算赋值运算符1、=表示将=右边的值赋给等号左边的变量名。varnum=100表示将100赋值给num变量。那么num变量的值为1002。+=vara=10;a+=10;控制台日志(一);//=>20·a+=10等价于a=a+103,-=vara=10;a-=10;控制台日志(一);//=>0a-=10等同于a=a-104,*=vara=10;a*=10;console.log(a);//=>100a*=10等同于a=a*105,/+vara=10;一个/=10;控制台日志(一);//=>1·a/=10等价于a=a/106,%=vara=10;%=10;console.log(a);//=>0·a%=10等价于a=a%10比较运算符1,==·比较符号两边的值是否相等,与数据类型无关·1=='1'·两个值相同,所以得到true2,===·比较符号两边的值和数据类型是否相等·1==='1'·虽然两个值一样,但是因为数据类型不一样,所以得到false3,!=比较符号两边的值是否不相等1!='1'因为两边的值两边相等,所以得到false4,!==·比较符号两边的数据类型和值是否不相等1!=='1'因为两边的数据类型确实不同,所以得到true5,>=比较左边的值是否大于等于右边的值1>=1true1>=0true1>=2false6,<=比较左边的值是否小于等于右边的值1<=2true1<=1true1<=0false7,>比较左边的值是否大于右边的值1>0true1>1false1>2false8,<比较左边的值是否小于右边的值1<2true1<1false·1<0false逻辑运算符1,&&·执行AND运算·符号的左边必须为真,右边也必须为真才能返回真·只要有一边不为真,则返回false·true&&truetrue·true&&falsefalse·false&&truefalse·false&&falsefalse2、||·用于或运算·符号左边为真或右边为真会返回true·只有两边都为false才会返回false·true||真真真||假真假||真真假||假假3,!进行取反运算。如果它是真的,它就会变成假的。如果它是假的,它就会变成真的。!truefalse!falsetrue自增自减运算符(一元运算符)1、++进行自增运算分为pre++和post++两种,pre++,值会放在最前面自动+1,然后returnvara=10;console.log(++a);_//会返回11,并且把a的值改成11_后置++,会先返回值,automatic+1之后vara=10;console.log(a++);_//会返回10,然后将a的值改为11_2,--·进行自减操作,分为pre--和post--两种,同上++运算符