简介
JavaScript是互联网上最流行的脚本语言,这门语言可用于web和HTML,更可广泛用
于服务器、pc端、移动端。
JavaScript是一种轻量级的编程语言
JavaScript是可插入HTML页面的编程代码
JavaScript插入HTML页面后,可由所有的浏览器执行
JavaScript用法:
HTML中的脚本必须位于标签之间
JavaScript标签:
在HTML中插入JavaScript,使用
在之间书写代码
JavaScript使用限制:
在HTML中,不限制脚本数量
通常会把脚本放置于标签中,以不干扰页面内容
输出
document.write("
h1测试
");JS外部文件的使用
.html文件
.js文件
document.write("我叫孙创昱");s
JS改变标签内容
内容没有改变s
JS语法
JavaScript语句:
JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。
分号:
语句之间的分割是分号(😉
注意:分号是可选项,有时候看到不以分号隔开的。
JavaScript代码:
按照编写顺序依次执行
标识符:
JavaScript标识符必须以字母、下划线或美元符号开始
JavaScript关键字是不能做标识符。
关键字如下
Js大小写敏感
Js会忽略多余的空格
单行注释// 多行注释/**/
JavaScript变量
var x = 10;
var y = 10.1;
var z = “SunCY”;
变量类型有
字符串(String)
数字(Number)
布尔(Boolean)
数组(Array)
对象(Object)
空(null)
未定义
可以通过赋值为null的方式清除变量
(字符串类型或数字类型)和字符串类型相加等于拼接所得的字符串。
var b = "scy";//字符串
var c = true;//布尔类型
var d = new Array();//数组类型
d[0] = 1;
d[2] = "scy";
var e = [1,2,3]; //数组类型
var f; //未定义,可以赋值任意类型
document.write(a+"
");
document.write(b+"
");
document.write(c+"
");
document.write(d+"
");
document.write(e+"
");
document.write(f+"
");
JavaScript运算符
比较运算符:
“10” 和10的=运算结果为true
“10” 和10的=运算结果为false
!=和!==同理
其他类型的运算符和C语言保持一致
运算符测试:
i = 10,j = 10;1+j=?
计算
var i=10;
var j=10;
var m=i+j;
document.getElementById("sumid").innerHTML = m;
}
结果:点击计算按钮,会显示数字20
选择语句
和C语言一致
if(){
}else if(){
}else{
}
switch(i){
case #:
break;
case #:
break;
default:
break;
}
循环
for循环
while循环
dowhile循环
document.write(i+"
");
}
var j = 5;
while(j<7){
j++;
document.write(j+"
");
}
var k = 666;
do{
document.write(k);
k++;
}
while(k<6)
结果
跳转语句
continue和break和C语言用法一样
函数的使用
var sum = a+b;
return sum;
}
var res = cal(3,4);
alert(res);
运行结果
定义函数
function函数名(){
函数体; (代码块)
}
注意:
JavaScript对大小写+分敏感,所以这里的function必须小写。在函数调用时,也必
须按照函数的相同名称来调用函数。
调用函数
var sum = a+b;
alert(sum);
return sum;
}
cal(1,2);
一开始是这个界面
点击按钮之后是这样的
带参数的函数
函数参数:
在函数的调用中,也可以传递值,这些值被称为参数
例: demo(arg1 ,arg2);
参数的个数可以为任意多,每个参数通过“",” 隔开
注意:
参数在传递时,其顺序必须一致
参数意义:
通过传递参数的个数以及参数的类型不同完成不同的功能
带返回值的函数
返回值:
有时,我们需要将函数的值返回给调用他的地方
通过return语句就可以实现
注意:在使用return语句时,函数会停止执行,同时返回值
局部变量和全局变量
测试
function demo(){
var i = 18;//局部安量只航在当前函数中使用
x=10;//全局变量 任何地方都可以使用
}
demo();
alert(x);
异常捕获
异常:
当JavaScript引擎执行JavaScript代码时,发生了错误,导致程序停 止运行
异常抛出:
当异常产生,并且将这个异常生成一个错误信息
异常捕获:
try[
发生异常的代码块;
}catch(err){
错误信息处理;
try{
var e=document.getElementById("txt").value;
if(e=="")
throw "请输入";
}
catch(err){
alert(err);
}
}
啥都不填点击按钮,会有弹窗警告
JavaScript事件
onClick 单击事件
onMouseOver 鼠标经过事件
onMouseOut 鼠标移出事件
onChange 文本内容改变事件
onSelect 文本框选中事件
onFocus 光标聚集事件
onBlur 移开光标事件
onLoad 网页加载事件
onUnload 关闭网页事件
测试
事件width: 100px;
height: 100px;
background-color: cadetblue;
}
ooj.innerHTML="Hello";
}
function on0ut(ooj){
ooj.innerHTML="World" ;
}
三种状态:
DOM简介
HTML DOM:
当网页被加载时,浏览器会创建页面的文档对象模型(Document Obiect Model)
JavaScript能够改变页面中的所有HTML元素
1改变HTML输出流:
注意:绝对不要在文档加载完成之后使用document.write()。这会覆盖该文档
2寻找元素:
通过id找到HTML元素
通过标签名找到HTML元素
3改变HTML内容:
使用属性: innerHTML
4改变HTML属性:
使用属性: attribute
JavaScript能够改变页面中的所有HTML属性
Baidu
跳转到4399
var tem = document.getElementById("pid");
tem.innerHTML = "4399";
document.getElementById("aid").href = "https://www.4399.com";
}
点击前
点击后
JavaScript能够改变页面中的所有CSS样式
通过DOM对象改变CSS
语法:document.getElementByld(id).style.property=new style
font-size:30px;
color:red;
}
改变前
改变CSS样式
var tem = document.getElementById("pid");
tem.innerHTML = "改变后";
tem.style.fontSize = "55px";
tem.style.color = "blue";
}
结果:
点击按钮:
JavaScript能够对页面中所有事件做出反应
DOM Eventlistener:
addEventListener():
方法用于向指定元素添加事件句柄
removeEventListener():
移除方法添加的事件句柄
addEventListener():测试
按钮
x.addEventListener("click",SCY);
x.addEventListener("click",KCY);
function SCY(){
alert("SCY");
}
function KCY(){
alert("KCY");
}
点击按钮之后连续两个弹窗:
removeEventListener():测试
按钮
x.addEventListener("click",SCY);
x.addEventListener("click",KCY);
x.removeEventListener("click",SCY);
function SCY(){
alert("SCY");
}
function KCY(){
alert("KCY");
}
现在就只有一个弹窗
JavaScript基础
HTML事件处理: 直接添加到HTML结构中
DOM0级事件处理: 把一个函数赋值给一个事件处理程序属性
DOM2级事件处理: addEventListener(“事件名”,“ 事件处理函数”,‘布尔值” );
true:事件捕获
false:事件冒泡
removeEventL istener();
IE事件处理程序
attachEvent
detachEvent
HTML事件处理
例子:
按钮 button>
alert("HTML事件处理");
}
点击按钮之后:
DOM0级事件处理
按钮
测试2
document.getElementById("btn1").onclick = function(){alert("DOM0级事件处理测试加两个")};
结果:
如果这样写的话,点击按钮只会又一个弹窗:
DOM0级事件处理测试加两个
因为上面的那个被覆盖掉了。
DOM2级事件处理
DOM2级事件处理按钮
tem.addEventListener("click",function(){alert("DOM2级事件处理程序a");});
tem.addEventListener("click",function(){alert("DOM2级事件处理程序b");});
运行:
不同浏览器支持的dome级别不同,通常使用下面这个方法。
DOM2级事件处理按钮
alert("按钮被点击了");
}
var tem = document.getElementById("btn1");
if(tem.addEventListener){
tem.addEventListener("click",demo);//DOME2级事件
}else if(tem.attachEvent){
tem.attachEvent("onclick",demo); //IE事件
}else{
tem.onclick = demo(); //DOME0级事件
}
点击按钮会有这个:
本文地址:https://blog.csdn.net/weixin_44532671/article/details/111143477