javasript(简写：JS)属于轻量型的脚本语言，常运用于网页源码上。
我刚开始接触JS的时候，以为JS就是异步(ajax)。后来查询资料才知道，ajax指的是基于JS语言，主要组合JS、CSS、XML三种技术的新技术，是用于创建交互式网页应用的网页开发技术。
前端三大块：
- HTML：页面结构
- CSS：页面表现：元素大小、颜色、位置、隐藏或显示、部分动画效果
- JavaScript：页面行为：部分动画效果、页面与用户的交互、页面功能
JavaScript嵌入页面的方式
行间事件（主要用于事件）
<input type="button" name="" onclick="alert('ok！');">
页面script标签嵌入
<script type="text/javascript">alert('ok！');</script>
外部引入
<script type="text/javascript" src="js/index.js"></script>
和我学的python很像
变量
JavaScript 是一种弱类型语言，javascript的变量类型由它的值来决定。 定义变量需要用关键字 'var'，个人感觉很像python
var iNum = 123;
var sTr = 'asd';
//同时定义多个变量可以用","隔开，公用一个‘var’关键字
var iNum = 45,sTr='qwe',sCount='68';
变量类型
- number 数字类型
- string 字符串类型
- boolean 布尔类型 true 或 false
- undefined类型，变量声明未初始化，它的值就是undefined
- null类型，表示空对象，如果定义的变量将来准备保存对象，可以将变量初始化为null在页面上获取不到对象，返回的值就是null
javascript语句与注释
- 一条javascript语句应该以“;”结尾
<script type="text/javascript">
var iNum = 123;
var sTr = 'abc123';
function fnAlert(){
alert(sTr);
};
fnAlert();
</script>
- javascript注释
<script type="text/javascript">
// 单行注释
var iNum = 123;
/*
多行注释
1、...
2、...
*/
var sTr = 'abc123';
</script>
变量、函数、属性、函数参数命名规范
区分大小写
第一个字符必须是字母、下划线（_）或者美元符号（$）
其他字符可以是字母、下划线、美元符或数字匈牙利命名风格
对象o Object 比如：oDiv 数组a Array 比如：aItems 字符串s String 比如：sUserName 整数i Integer 比如：iItemCount 布尔值b Boolean 比如：
bIsComplete 浮点数f Float 比如：fPrice 函数fn Function 比如：fnHandler 正则表达式re RegExp 比如：reEmailCheck
获取元素方法:
第一种方法：将javascript放到页面最下边
....
<div id="div1">这是一个div元素</div>
....
<script type="text/javascript">
var oDiv = document.getElementById('div1');
</script>
</body>
第二种方法：将javascript语句放到window.onload触发的函数里面,获取元素的语句会在页面加载完后才执行
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
}
</script>
....
<div id="div1">这是一个div元素</div>
操作元素属性
- 属性写法 1、“.” 操作 2、“[ ]”操作
html的属性和js里面属性写法一样 2、“class” 属性写成 “className” 3、“style” 属性里面的属性，有横杠的改成驼峰式，比如：“font-size”，改
成”style.fontSize”
函数
- 函数定义与执行
在定义JS函数前需要加上function关键字
<script type="text/javascript">
// 函数定义
function fnAlert(){
alert('hello!');
}
// 函数执行
fnAlert();
</script>
- 变量与函数预解析 JavaScript解析过程分为两个阶段，先是编译阶段，然后执行阶段，在编译阶段会将function定义的函数提前，并且将var定义的
变量声明提前，将它赋值为undefined。
<script type="text/javascript">
fnAlert(); // 弹出 hello！
alert(iNum); // 弹出 undefined
function fnAlert(){
alert('hello!');
}
var iNum = 123;
</script>
- 提取行间事件 在html行间调用的事件可以提取到javascript中调用，从而做到结构与行为分离
<!--行间事件调用函数 -->
<script type="text/javascript">
function fnAlert(){
alert('ok!');
}
</script>
......
<input type="button" name="" value="弹出" onclick="fnAlert()">
<!-- 提取行间事件 -->
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById('btn1');
oBtn.onclick = fnAlert;
function fnAlert(){
alert('ok!');
}
}
</script>
......
<input type="button" name="" value="弹出" id="btn1">
匿名函数
- 定义的函数可以不给名称，这个叫做匿名函数，可以将匿名函数直接赋值给元素绑定的事件来完成匿名函数的调用
<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>
函数传参
<script type="text/javascript">
function fnAlert(a){
alert(a);
}
fnAlert(12345);
</script>
- 函数'return'关键字 函数中'return'关键字的作用： 1、返回函数执行的结果 2、结束函数的运行 3、阻止默认行为
<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>
封闭函数
- 封闭函数是javascript中匿名函数的另外一种写法，创建一个一开始就执行而不用命名的函数
(function myalert(){
alert('hello!');
})();
- 还可以在函数定义前加上“~”和“!”等符号来定义匿名函数
!function myalert(){
alert('hello!');
}()
- 封闭函数的好处 封闭函数可以创造一个独立的空间，在封闭函数内定义的变量和函数不会影响外部同名的函数和变量，可以避免命名冲突，在页面
上引入多个js文件时，用这种方式添加js文件比较安全，比如：
var iNum01 = 12;
function myalert(){
alert('hello!');
}
(function(){
var iNum01 = 24;
function myalert(){
alert('hello!world');
}
alert(iNum01);
myalert()
})()
alert(iNum01);
myalert();
好了，就写这么多了。好好消化把，学过Python的同学应该比较好理解。
最后老规矩，福利图一张 ，嘻嘻
网友评论