javascript认识与导入
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>