cday4(javascript)
一、js认识与引入
1.认识js
js是运行在浏览器端的解释型脚本语言,由浏览器解析且执行
负责网页行为动作:包含动画特效、页面与用户的交互、页面与服务端的交互
2.js嵌入网页的方式
嵌入式
外链式
行内式
<head>
<!-- 嵌入式 -->
<script >
//print()
alert('hello 嵌入式')
</script>
<!-- 外链式 -->
<script src="my.js"></script>
<!-- 行内式js要求:必须是事件的格式 事件:用户触发了才执行命令 k="v" -->
<div onclick="alert('hello 行内式')">测试行内式js</div>
</head>
二、js修改html的内容和样式
1.js入口函数
<script>
// 等网页加载完毕后,再执行函数中的代码
window.onload = function(){
//js代码
}
</script>
2.修改html元素的内容
<script>
//等网页加载完毕后,再执行函数中的代码
window.onload=function(){
// document通过html的id查找元素,且改html内容
document.getElementById('box').innerHTML='js语言'
}
</script>
<!--html部分-->
<div id="box">divdivdiv</div>
3.修改html元素的css样式
使用HTMLElement.sytle 控制html的样式
对于普通css属性,直接写 ,css 的 color:red–>style.color=‘red’
类似font-size属性,则转为小驼峰写法fontSize 即xx-xx --> xxXx
<script>
window.onload=function(){
/* 控制css样式
1. HTMLElement.sytle
2. 对于普通属性,直接写即可 ,css 的 color:red-->style.color='red'
3. 类似font-size属性,则转为小驼峰写法fontSize 即xx-xx --> xxXx
*/
// 改颜色
document.getElementById('box').style.color='red'
// 改背景
document.getElementById('box').style.background='#ccc'
// 改字体
document.getElementById('box').style.fontSize='30px'
}
</script>
<!--html部分-->
<div id="box">文字</div>
三、js语法基础
1、变量定义
变量定义语法: var 变量名=值
变量名(函数名、属性名、参数名)命名规范:
区分大小写
满足标识符命名规则,且可使用 字 符 , 首 字 符 需 是 字 母 、 下 划 线 、 字符,首字符需是字母、下划线、 字符,首字符需是字母、下划线、
遵循匈牙利命名风格 oBox
基本原则是:变量名=属性+类型+对象描述
匈牙利命名法关键是:标识符的名字以一个或者多个小写字母开头作为前缀;前缀之后的是首字母大写的一个单词或多个单词组合,该单词要指明变量的用途
变量命名参考
对象o Object 比如:oDiv
数组a Array 比如:aItems
字符串s String 比如:sUserName
整数i Integer 比如:iItemCount
布尔值b Boolean 比如:bIsComplete
浮点数f Float 比如:fPrice
函数fn Function 比如:fnHandler
正则表达式re RegExp 比如:reEmailCheck
2、数据类型
js分为6种数据类型, 用typeof() 可查数据类型
数字型 (number) 比如: 1, 1.2
字符串型(string) 比如:‘abc’,‘123’
布尔型(boolean) 比如:true,false
未定义型(undefinded) : 变量未定义或者定义了但没有初始化
对象型(object) : html标签都是对象型
空类型(null) : 比如:变量初始化为null,而通过typeof() 输出为object类型,即null就是一个空的对象
3、js语句与注释
js语句可缩进,也可不缩进 ,一行语句要么换行结束,要么以分号;结束
js注释分//单行注释和/* 多行注释(块注释)*/
//单行注释, 快捷方式 ctrl+/
/*多行注释 快捷方式 alt+shift+a
多行注释
*/
4、函数
将具有独立功能的代码块封装起来,形成一个整体,在需要的时候 调用
函数定义与调用
<script>
//定义函数
function 函数名(参数){
//语句...
return xxx
}
//调用函数
函数名(参数列表)
</script>
js的预解析功能
JavaScript解析执行过程分为两个阶段,预编译阶段和执行阶段
在预编译阶段会将function定义的函数提前,将定义的变量声明提前,但不会对声明的变量初始化
return语句
返回函数中的值或者对象
结束函数的运行
<script>
// alert(num)
var num = 1
// 定义 和 调用 函数名(参数)
// 定义:function 函数名(参数){代码}
alert(fnAlert()) // js函数预解析功能
// 需求:自定义一个函数完成弹窗功能
function fnAlert() {
alert('自定义函数的弹窗')
return 1
alert('ok')
}
</script>
5、条件判断
js的运算符
if条件判断
语法1:
if(条件) {
条件成立执行的命令
}
语法2:
if( 条件) {
}
else{
}
语法3:
if(条件){
}
else if (条件){
} ...
else{
}
<script>
var gender = '男'
if (gender == '男') {
alert('同性')
}
else if (gender == '女') {
alert('异性')
}
else {
alert('xxxxxx')
}
</script>
6、js事件与匿名函数
html元素中有样式,id属性,src等属性外,还有事件属性
js事件处理机制: 将定义好的函数赋给事件属性后, 当事件触发时,就会自动调用函数
事件属性(类型)
单击事件 onclick
鼠标滑过事件 onmouseover
鼠标离开事件 onmouseout
匿名函数
匿名函数就是没有名字的函数
语法规则: function () {}
事件处理语法
事件发生在谁身上(html元素).事件属性=匿名函数
<script>
window.onload=function(){
//查找元素
var oBtn1=document.getElementById('btn1')
// 匿名函数: 就是没有名称的函数
// 事件语法: 事件发生在谁身上(变量).事件属性(事件类型)=匿名函数
//鼠标单击事件
oBtn1.onclick=function(){
alert("单击成功")
}
// 鼠标滑过事件
oBtn1.onmouseover=function(){
alert("鼠标滑过")
}
//鼠标离开事件
oBtn1.onmouseout=function(){
alert("鼠标离开")
}
}
</script>
//html部分
<button id="btn1">单击</button>
四、综合案例
1.网页换肤案例
网页换肤html+css部分
/*外链式css: pifu1.css*/
body{
background: #ccc;
}
button{
width: 200px;
height: 50px;
background: pink;
border: none;
font-size: 20px;
color: black;
/* 边角设置, 默认是尖角
border-radius : css3新特性,把边角设置为圆角
- 具体像素值px
- 百分比值,比如50%*/
border-radius: 25px;
}
<!--html部分-->
<h1>网页换肤</h1>
<button>皮肤1</button>
<button>皮肤2</button>
网页换肤js部分
<script>
window.onload=function(){
// 按钮单击, 控制link标签 , 换link标签的href属性值
var oBtn1=document.getElementById('btn1')
var oBtn2=document.getElementById('btn2')
var oMylink=document.getElementById('mylink')
//添加单击事件
oBtn1.onclick=function(){
// 所有的html属性,在js中写法只有class="" 在js中写为className,其余的都是相
oMylink.href='pifu2.css'
}
oBtn2.onclick=function(){
oMylink.href='pifu1.css'
}
}
</script>
2.打印名片
<script>
window.onload = function () {
//1. 取得标签元素input01
var oInput01 = document.getElementById('input01')
var oInput02 = document.getElementById('input02')
var oInput03 = document.getElementById('input03')
var oInput04 = document.getElementById('input04')
var oInput05 = document.getElementById('input05')
var oInput06 = document.getElementById('input06')
var oInput07 = document.getElementById('input07')
var oSetcard = document.getElementById('setcard')
//1 .取得右侧要更新的显示区域标签
var oCard_wrap = document.getElementById('card_wrap')
//2. 对设置按钮添加单击监听
var str = ''
oSetcard.onclick = function () {
// 4. 所有的输入项都是必填项
if (oInput01.value == '' || oInput02.value == '' || oInput03.value == '' || oInput04.value == '' || oInput05.value == '' || oInput06.value == '') {
alert('请输入内容')
return
}
//3. 把左侧用户输入的信息更新到右侧对应的内容中
str = '<div class="p01">' + oInput01.value + '<em>' + oInput02.value + '</em></div><div class="p02"><p class="company">' + oInput03.value + '</p><p>手机:' + oInput04.value + '</p><p>email:' + oInput05.value + '</p><p>地址:' + oInput06.value + '</p></div>'
oCard_wrap.innerHTML = str
//5. 换风格:如果选中风格1,右侧区域显示风格1效果 -- class的取值变化
if (oInput07.value == '0') {
oCard_wrap.className = 'idcard01'
}
else if (oInput07.value == '1') {
oCard_wrap.className = 'idcard02'
}
else {
oCard_wrap.className = 'idcard03'
}
}
}
</script>