javascript基础笔记

小黑哎代码
111 阅读4分钟
javascript
  • js是一门脚本语言
    • 直接通过浏览器执行的为脚本语言
    • js是轻量级编程语言
  • javascript组成
    • ECMAScript语法和基本对象(核心)
    • DOM描述了处理网页内容的方法接口(文档对象模型)
    • BOM描述了与浏览器进行交互的方法接口(浏览器对象模型)
  • 变量声明不是必须的(不一定要写var)
    • 在方法中带var，此时该变量为局部变量
    • 在方法中不带var，此时该变量为成员变量
  • 网页加载完成之后自动调用该函数

[JavaScript]
纯文本查看
复制代码
01
02
03
04
05
06
07
08
09
10
<script>
window.onload = function(){
//获取页面指定位置的元素
var uEle = document.getElementById("username");
//alert(uEle);
//获取页面指定位置的内容(值)
var uValue = uEle.value;
alert(uValue);
}
</script>
  • 校验表单用onsubmit,写在form里
    • onsubmit后接收一个函数的调用,调用的函数有返回值,然后拿到返回值后再return给onsubmit

[HTML]
纯文本查看
复制代码
1
2
<form action="#" method="get">
</form>

js基本语法
  • ECMAScript:
    • undefined 和 null区别
      • undefined:没有定义
      • null:定义了没赋值
    • == 和 ===区别
      • ==:"66"和66是一样的(尝试将字符串向number类型转型)(一般笔试题会出现 )
      • ===:"66"和66是不一样的
      • js中没有equals,所有的比较都用==或===
    • 数据类型
      • undefined
      • boolean
      • number
      • string
      • object
      • null


简单的数据校验
  • 获取元素:
    • document.getelementbyid('id_name')
  • 获取元素值:
    • document.getelementbyid("id_name").value
    • 如果id是一个字符串,则加上引号,如果是一个变量,则不需要
    • 表单提交设置监听为: onsubmit,如果时普通事件就用onclick
  • 输出:
    • 在制定位置写内容
      • doculment.getElementById('id_name').innerHTML = 'inner string'
    • 文档输出
      • document.write():向页面中写内容
    • 弹框
      • alert

  • js中比较特殊的事件
    • onsubmit:一般用于表单提交,需要有返回值
      • 函数返回值为false不提交
    • onload:浏览器加载完成后调用
  • onsubmit="return checkForm()"下载表单form的位置,不是写在submit按钮的位置
  • onload方法写在body的属性中,表示body中的内容加载完成后调用
轮播图
  • serInterval("函数名",time)函数中,函数名必须用引号括起来,不然只执行一次,不会周期性执行.
[JavaScript]
纯文本查看
复制代码
01
02
03
04
05
06
07
08
09
10
11
<!--简单切换图片-->
<script type="text/javascript">
var picNum = 1
function switchImg() {
picNum++;
if (picNum > 3) {
picNum = 1;
}
picSrc = document.getElementById('img1').src = "../../img/"+picNum+".jpg"
}
</script>
  • 自动轮播
    • 在body中通过onload方法在网页加载完后调用自定义init方法
    • 通过window.setinterval('func()',time)调用函数实现自动轮播

[JavaScript]
纯文本查看
复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
<!--自动轮播-->
<script type="text/javascript">
var num = 1
function init() {
window.setInterval("swithcImgAtuo()",3000)
}
function swithcImgAtuo() {
num++
if (num > 3) {
num = 1
}
document.getElementById("img1").src = "../img/"+num+".jpg"
}
</script>
定时弹出广告
  • onload事件只能绑定一次
[JavaScript]
纯文本查看
复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<script type="text/javascript">
function init(){
//书写轮图片显示的定时操作
setInterval("changeImg()",3000);
//1.设置显示广告图片的定时操作
time = setInterval("showAd()",3000);
}
//书写函数
var i=0
function changeImg(){
i++;
//获取图片位置并设置src属性值
document.getElementById("img1").src="../img/"+i+".jpg";
if(i==3){
i=0;
}
}
//2.书写显示广告图片的函数
function showAd(){
//3.获取广告图片的位置
var adEle = document.getElementById("img2");
//4.修改广告图片元素里面的属性让其显示
adEle.style.display = "block";
//5.清除显示图片的定时操作
clearInterval(time);
//6.设置隐藏图片的定时操作
time = setInterval("hiddenAd()",3000);
}
//7.书写隐藏广告图片的函数
function hiddenAd(){
//8.获取广告图片并设置其style属性的display值为none
document.getElementById("img2").style.display= "none";
//9.清除隐藏广告图片的定时操作
clearInterval(time);
}
</script>
javascript引入方式
  • 内部引入: script标签内书写
  • 外部引入: <script type="text/javascript" src="1.js" ></script>
  • 行内引入:
BOM
  • window:浏览器打开的窗口,需要掌握的方法
    • alert():弹框
    • confirm():弹出对话框
    • prompt():显示输入对话框
    • setInterval():周期性调用函数,返回一个code
    • clearInterval():清楚周期性调用函数
    • setTimeout():在指定的毫秒数后调用函数或者计算表达式
    • clearTimeout():同上
  • history:用户在浏览器中浏览过的url
    • back():上一个url
    • forward():下一个url
    • go():加载history列表中的具体页面
  • location:包含有关当前url的信息
    • href:制定url进行跳转

表单验证
  • 聚焦事件onfocus
  • 失焦事件onblur
js中正则校验
  • 使用String对象中的match方法
  • 使用正则对象中的test方法
更多技术资讯可关注:gzitcast


avatar
文章
阅读
粉丝