js介绍和js引入页面
JavaScript介绍
JavaScript是运行在浏览器端的脚步语言，JavaScript主要解决的是前端与用户交互的问题，包括使用交互与数据交互。 JavaScript是浏览器解释执行的，前端脚本语言还有JScript（微软，IE独有），ActionScript( Adobe公司，需要插件)等。
前端三大块
1、HTML：页面结构
2、CSS：页面表现：元素大小、颜色、位置、隐藏或显示、部分动画效果
3、JavaScript：页面行为：部分动画效果、页面与用户的交互、页面功能
JavaScript嵌入页面的方式
1、行间事件（主要用于事件）
<input type="button" name="" onclick="alert('ok！');">2、页面script标签嵌入
<script type="text/javascript">
var a = '你好！';
alert(a);
</script>3、外部引入
<script type="text/javascript" src="js/index.js"></script>引入js示例
引入js示例
javascript语句与注释
1、一条javascript语句应该以“;”结尾
<script type="text/javascript">
var a = 123;
var b = 'str';
function fn(){
alert(a);
};
fn();
</script>
2、javascript注释
<script type="text/javascript">
// 单行注释
var a = 123;
/*
多行注释
1、...
2、...
*/
var b = 'str';
</script>
JavaScript变量和操作元素
变量
JavaScript 是一种弱类型语言，javascript的变量类型由它的值来决定。 定义变量需要用关键字 'var'：
var a = 123;
var b = 'asd';
//同时定义多个变量可以用","隔开，公用一个‘var’关键字
var c = 45,d='qwe',f='68';
变量类型
5种基本数据类型：
number、string、boolean、undefined、null
1种复合类型：
object
变量、函数、属性、函数参数命名规范
- 区分大小写
- 第一个字符必须是字母、下划线（_）或者美元符号（$）
- 其他字符可以是字母、下划线、美元符或数字
js定义变量使用var定义，可以一行定义一个，也可以一个var定义多个变量；
js变量声明和类型实例
js变量声明和类型实例
获取元素方法一
可以使用内置对象document上的getElementById方法来获取页面上设置了id属性的元素，获取到的是一个html对象，然后将它赋值给一个变量，比如：
<script type="text/javascript">
var oDiv = document.getElementById('div1');
</script>
....
<div id="div1">这是一个div元素</div>
上面的语句，如果把javascript写在元素的上面，就会出错，因为页面上从上往下加载执行的，javascript去页面上获取元素div1的时候，元素div1还没有加载，解决方法有两种：
第一种方法：将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>
如果我们要通过js给元素添加样式，比如设置font-size=30px；注意要将-的书写方式改为驼峰式的书写方式，比如fontSize，否则会报错；
js获取元素改变样式实例
js获取元素改变样式实例
操作元素属性
获取的页面元素，就可以对页面元素的属性进行操作，属性的操作包括属性的读和写。
操作属性的方法 ：
- “.” 操作
- “[ ]”操作
属性写法
- html的属性和js里面属性写法一样
- “class” 属性写成 “className”
- “style” 属性里面的属性，有横杠的改成驼峰式，比如：“font-size”，改成”style.fontSize”
通过“.”操作属性：
操作元素属性实例
操作元素属性实例
通过“[ ]”操作属性：
通过“[ ]”操作属性示例
改变元素内容
innerHTML
innerHTML可以读取或者写入标签包裹的内容
常用于从数据库读取内容，然后塞入标签内；
innerHTML 示例
innerHTML 示例
JavaScript函数
函数的定义和调用
函数
函数就是可以重复执行的代码片。
函数定义与执行
<script type="text/javascript">
// 函数定义
function aa(){
alert('hello!');
}
// 函数执行
aa();
</script>
函数的定义和调用示例
函数的定义和调用示例
变量与函数预解析
JavaScript解析过程分为两个阶段，先是编译阶段，然后执行阶段，在编译阶段会将function定义的函数提前，并且将var定义的变量声明提前，将它赋值为undefined。
<script type="text/javascript">
aa(); // 弹出 hello！
alert(bb); // 弹出 undefined
function aa(){
alert('hello!');
}
var bb = 123;
</script>
变量和函数预解析示例
变量和函数预解析示例
提取行间事件
在html行间调用的事件可以提取到javascript中调用，从而做到结构与行为分离。
为什么要提取行间事件？
原来我们是将函数事件直接放在html代码里面，这样的话，在维护时容易误删导致函数不能正确执行；还有就是应该将js相关的放在一起，实现代码分离，方便观看和维护；
<!--行间事件调用函数 -->
<script type="text/javascript">
function myalert(){
alert('ok!');
}
</script>
......
<input type="button" name="" value="弹出" onclick="myalert()">
<!-- 提取行间事件 -->
<script type="text/javascript">
window.onload = function(){
var oBtn = document.getElementById('btn1');
oBtn.onclick = myalert;
function myalert(){
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>
实际上实现提取行间事件并不是函数的最终写法，我们用的比较多的是 匿名函数的写法，如下。
js匿名函数示例
js匿名函数示例
匿名函数综合示例-网页换肤
匿名函数综合示例-网页换肤
函数传参
<script type="text/javascript">
function myalert(a){
alert(a);
}
myalert(12345);
</script>函数传参示例
函数传参示例
函数'return'关键字
函数中'return'关键字的作用：
- 返回函数执行的结果
- 结束函数的运行
- 阻止默认行为
return关键字使用示例
return关键字使用示例
分支语句
条件语句
通过条件来控制程序的走向，就需要用到条件语句。
运算符
- 算术运算符： +(加)、 -(减)、 *(乘)、 /(除)、 %(求余)
- 赋值运算符：=、 +=、 -=、 *=、 /=、 %=
- 条件运算符：==、===、>、>=、<、<=、!=、&&(而且)、||(或者)、!(否)
if else
if else 的简单使用示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var iNum01 = 12;
var iNum02 = 24;
if(iNum01>iNum02){
alert('iNum01大于iNum02');
}
else{
alert('iNum01不大于iNum02');
}
</script>
</head>
<body>
</body>
</html>
if else 点击按钮隐藏显示示例
if else 点击按钮隐藏显示示例
else if 多重条件判读语句
多重条件判读语句示例
多重条件判读语句示例
switch
switch语句的性能比else if语句的性能高；
switch语句网页换肤示例
switch语句网页换肤示例
运算符
加法运算练习
用.value()获取input输入的两个数字，提交后弹出加法结果
注意，从input框中输入的都是字符串，在js中需要使用 parseInt 转换成int类型；
加法运算练习示例
求余运算符
求余示例
求余示例
赋值运算符
赋值运算符示例
赋值运算符示例
条件运算符
在js中，==判断是否相等存在一个bug，就是数字的2和字符串的2使用==判断其实是True，所以我们需要用到===；
条件运算符示例
条件运算符示例
数组和循环语句
数组及操作方法
数组就是一组数据的集合，javascript中，数组里面的数据可以是不同类型的。
定义数组的方法
//对象的实例创建
var aList = new Array(1,2,3);
//直接量创建
var aList2 = [1,2,3,'asd'];
操作数组中数据的方法
1、获取数组的长度：aList.length;
var aList = [1,2,3,4];
alert(aList.length); // 弹出42、用下标操作数组的某个数据：aList[0];
var aList = [1,2,3,4];
alert(aList[0]); // 弹出13、join() 将数组成员通过一个分隔符合并成字符串
var aList = [1,2,3,4];
alert(aList.join('-')); // 弹出 1-2-3-44、push() 和 pop() 从数组最后增加成员或删除成员
var aList = [1,2,3,4];
aList.push(5);
alert(aList); //弹出1,2,3,4,5
aList.pop();
alert(aList); // 弹出1,2,3,45、unshift()和 shift() 从数组前面增加成员或删除成员
var aList = [1,2,3,4];
aList.unshift(5);
alert(aList); //弹出5,1,2,3,4
aList.shift();
alert(aList); // 弹出1,2,3,46、reverse() 将数组反转
var aList = [1,2,3,4];
aList.reverse();
alert(aList); // 弹出4,3,2,17、indexOf() 返回数组中元素第一次出现的索引值
var aList = [1,2,3,4,1,3,4];
alert(aList.indexOf(1));8、splice() 在数组中增加或删除成员
var aList = [1,2,3,4];
aList.splice(2,1,7,8,9); //从第2个元素开始，删除1个元素，然后在此位置增加'7,8,9'三个元素
alert(aList); //弹出 1,2,7,8,9,4数组及操作方法示例
数组及操作方法示例
多维数组
多维数组指的是数组的成员也是数组的数组。
var aList = [[1,2,3],['a','b','c']];
alert(aList[0][1]); //弹出2;多维数组示例
多维数组示例
循环语句
程序中进行有规律的重复性操作，需要用到循环语句。
for循环
for(var i=0;i<len;i++)
{
......
}for循环简单示例
for循环简单示例
for循环将数据放入页面列表中
for循环将数据放入页面列表中
while循环
var i=0;
while(i<8){
......
i++;
}
数组去重
数组去重示例
数组去重示例
如果有想学习web前端的程序员，加VX：TZ07900, 免费送web前端视频教程噢
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
