03-JavaScript语法介绍
本篇主要关于原生JavaScript的介绍,其中包括其嵌入HTML页面方式,JavaScript的语法结构,以及贪吃蛇案例;
一、绪论
JavaScript是运行在浏览器端的脚步语言,JavaScript主要解决的是前端与用户交互的问题,包括使用交互与数据交互,JavaScript是浏览器解释执行的。
前端三大块
1、HTML:页面结构
2、CSS:页面表现:元素大小、颜色、位置、隐藏或显示、部分动画效果
3、JavaScript:页面行为:部分动画效果、页面与用户的交互、页面功能
二、JavaScript的嵌入方式
1、行间事件(主要用于事件)
<input type="button" name="" onclick="alert('ok!');">
2、页面script标签嵌入
<script type="text/javascript">
alert('ok!');
</script>
3、外部引入,在日常项目中我们通常将 .js 文件放在js文件夹内;
<script type="text/javascript" src="js/index.js"></script>
而在第二种方式中,我们想要获取HTML中的元素时,若直接写则会获取不到HTML中的元素,那么有两种解决方式:
一、将<script></script>标签写在<html></html>标签的下面;
二、在<script></script>下写入document.onload事件,例如:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>javascript引入方式</title>
<script type="text/javascript">
document.onload = function(){
// JavaScript代码
}
</script>
</head>
<body> </body>
</html>
三、变量、数据类型及语法规定
JavaScript 是一种弱类型语言,javascript的变量类型由它的值来决定。 定义变量需要用关键字 'var';
var iNum = 123;
var sTr = 'asd'; //同时定义多个变量可以用","隔开,公用一个‘var’关键字 var iNum = 45,sTr='qwe',sCount='68';
3.1 变量类型--5种基本数据类型:
1、number 数字类型 1种复合类型:object,可能是数组、对象等 |
3.2 变量、函数、属性、函数参数命名规范
1、区分大小写
2、第一个字符必须是字母、下划线(_)或者美元符号($)
3、其他字符可以是字母、下划线、美元符或数字
3.3 匈牙利命名风格:
对象o Object 比如:oDiv
数组a Array 比如:aItems
字符串s String 比如:sUserName
整数i Integer 比如:iItemCount
布尔值b Boolean 比如:bIsComplete
浮点数f Float 比如:fPrice
函数fn Function 比如:fnHandler
正则表达式re RegExp 比如:reEmailCheck
四、函数及匿名函数
4.1 函数
函数就是重复执行的代码片。
<script type="text/javascript">
function fnAdd(iNum01,iNum02){
var iRs = iNum01 + iNum02;
return iRs;
alert('here!');
} var iCount = fnAdd(3,4);
alert(iCount); //弹出7
</script>
函数参数:类似于Python的函数,也是可以传参!!
函数返回值:'return'关键字的作用:1、返回函数中的值或者对象;2、结束函数的运行。
4.2 函数预解析:
JavaScript解析过程分为两个阶段,先是编译阶段,然后执行阶段,在编译阶段会将function定义的函数提前,并且将var定义的变量声明提前,将它赋值为undefined。
<script type="text/javascript">
fnAlert(); // 弹出 hello!
alert(iNum); // 弹出 undefined
function fnAlert(){
alert('hello!');
}
var iNum = 123;
</script>
4.3 匿名函数
而定义的函数可以不给名称,这个叫做匿名函数,可以将匿名函数的定义直接赋值给元素的事件属性来完成事件和函数的关联,这样可以减少函数命名,并且简化代码。函数如果做公共函数,就可以写成匿名函数的形式。
<script type="text/javascript"> window.onload = function(){
var oBtn = document.getElementById('btn1');
/*
oBtn.onclick = myalert;
function myalert(){
alert('ok!');
}
*/
// 直接将匿名函数赋值给绑定的事件
oBtn.onclick = function (){
alert('ok!');
}
}
</script>
五、条件语句
通过条件来控制程序的走向,就需要用到条件语句。
条件运算符 :==、===、>、>=、<、<=、!=、&&(而且)、||(或者)、!(否)
var iNow = 1;
if(条件1){
... ;
}
else if(条件2){
... ;
}
// 条件1、条件2不满足时,执行else语句
else{
... ;
}
六、循环语句
程序中进行有规律的重复性操作,需要用到循环语句。例如:
var aList = [1,2,3,4,4,3,2,1,2,3,4,5,6,5,5,3,3,4,2,1]; var aList2 = []; for(var i=0;i<aList.length;i++){
if(aList.indexOf(aList[i])==i)
{
aList2.push(aList[i]);
}
} alert(aList2);
与Python不同的时:JavaScript中的for循环的结构为:
for(声明变量i;条件语句;变量变化){
执行语句;
}
over~~~为了减少篇幅,请看下篇~~~~~~
最新文章
- Day6-python基础之模块
- 命令大全/cmd/bash
- 通病问题:错误如for architecture arm64: ";_OBJC_CLASS_$_CBUUID";, referenced from: objc-class-ref in BluetoothLinkOperation.o 类似的问题解决办法
- Java 集合系列01之 总体框架
- 转:Nginx 配置 location 总结及 rewrite 规则写法
- Performance Analysis Methodology
- OCP读书笔记(27) - 题库(ExamG)
- 你的float用对了吗
- 网络服务器系统wamp的安装
- DOM事件代码小结
- linux 下怎样查找一个文件夹在哪个目录下?
- Postman-----Response body:JSON value check的使用介绍
- LoadRunner的函数
- 【JS】js操作json object
- shell编程小技巧(命令篇)
- Html.DropDownListFor练习
- 【链表】Add Two Numbers
- springboot学习笔记-2 一些常用的配置以及整合mybatis
- BZOJ1835: [ZJOI2010]base 基站选址【线段树优化DP】
- 关于使用 ps脚本来处理图片的排层问题