c语言scytem用法,JavaScript基础

于 2021-05-23 15:11:28 发布
阅读量263 收藏
点赞数
文章标签： c语言scytem用法

简介

JavaScript是互联网上最流行的脚本语言，这门语言可用于web和HTML，更可广泛用

于服务器、pc端、移动端。

JavaScript是一种轻量级的编程语言

JavaScript是可插入HTML页面的编程代码

JavaScript插入HTML页面后，可由所有的浏览器执行

JavaScript用法:

HTML中的脚本必须位于标签之间

JavaScript标签:

在HTML中插入JavaScript,使用

在之间书写代码

JavaScript使用限制:

在HTML中，不限制脚本数量

通常会把脚本放置于标签中，以不干扰页面内容

输出

document.write("

h1测试

");

81cf01fe08ae4daf9d87c47706566ce4.png

JS外部文件的使用

.html文件

.js文件

document.write("我叫孙创昱");s

d306dfadb08e0e63d06c8052e1580e61.png

JS改变标签内容

内容没有改变s

44b15cd57a2df6d257bf06666ddb425c.png

JS语法

JavaScript语句:

JavaScript 语句向浏览器发出的命令。语句的作用是告诉浏览器该做什么。

分号:

语句之间的分割是分号(😉

注意:分号是可选项，有时候看到不以分号隔开的。

JavaScript代码:

按照编写顺序依次执行

标识符:

JavaScript标识符必须以字母、下划线或美元符号开始

JavaScript关键字是不能做标识符。

关键字如下

ba84fc8ba9de22f95cd7bf3c6787b45b.png

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+"
");

5ccd67208ce1f63bcd33e47979b6df19.png

JavaScript运算符

2a7156465e7152796e9bce152fe2b2ac.png

比较运算符：

“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

0b0889474ce89d52af6502787d23231b.png

选择语句

和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)

结果

e87da5e74daaada68816a385023f4577.png

跳转语句

continue和break和C语言用法一样

函数的使用

var sum = a+b;

return sum;

}

var res = cal(3,4);

alert(res);

运行结果

b343082906c76019b024351ebd1e65f2.png

定义函数

function函数名(){

函数体; (代码块)

}

注意:

JavaScript对大小写+分敏感，所以这里的function必须小写。在函数调用时，也必

须按照函数的相同名称来调用函数。

调用函数

var sum = a+b;

alert(sum);

return sum;

}

cal(1,2);

一开始是这个界面

353acd6c4a880d8f179899fa8592b82b.png

点击按钮之后是这样的

73c64ade8a7b1e38ed31b541eb0ae092.png

带参数的函数

函数参数:

在函数的调用中，也可以传递值，这些值被称为参数

例: 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);

}

}

啥都不填点击按钮，会有弹窗警告

a9ad37097a822c61ae6482f415615686.png

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" ;

}

三种状态：

db4b504922a9eed17e82aa7bc43c7ea8.png

c193173c544cb6d4d05513999ac3ae6a.png

5d90317a8ce512a17a4bea85ffaeb965.png

DOM简介

HTML DOM:

当网页被加载时，浏览器会创建页面的文档对象模型(Document Obiect Model)

1d724d845a57e30daafc4042cbd1817a.png

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";

}

点击前

807e06f2ec7b1b93f3f162e3956866de.png

点击后

bf9f7b7337048c584d2d3649e168b711.png

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";

}

结果：

342237fa72a56344a0f4ab25d66aef48.png点击按钮：

29ca7ea57165ac1d8d7556ef07f9520e.png

JavaScript能够对页面中所有事件做出反应

DOM Eventlistener:

addEventListener():

方法用于向指定元素添加事件句柄

removeEventListener():

移除方法添加的事件句柄

addEventListener():测试

按钮

x.addEventListener("click",SCY);

x.addEventListener("click",KCY);

function SCY(){

alert("SCY");

}

function KCY(){

alert("KCY");

}

点击按钮之后连续两个弹窗：

5fd66a074d785f046e0a217cc31d63a5.png

50f429326d959c83cb22b7e8622b2144.png

removeEventListener():测试

按钮

x.addEventListener("click",SCY);

x.addEventListener("click",KCY);

x.removeEventListener("click",SCY);

function SCY(){

alert("SCY");

}

function KCY(){

alert("KCY");

}

现在就只有一个弹窗

50f429326d959c83cb22b7e8622b2144.png

JavaScript基础

HTML事件处理: 直接添加到HTML结构中

DOM0级事件处理： 把一个函数赋值给一个事件处理程序属性

DOM2级事件处理： addEventListener(“事件名”，“ 事件处理函数”，‘布尔值” );

true:事件捕获

false:事件冒泡

removeEventL istener();

IE事件处理程序

attachEvent

detachEvent

HTML事件处理

例子：

按钮 button>

alert("HTML事件处理");

}

点击按钮之后：

2a7a0d16452af84fba1f84e2d7705e9b.png

DOM0级事件处理

按钮

2422a0c9a4e5a29d80a3a2a3638ee9e8.png

测试2

document.getElementById("btn1").onclick = function(){alert("DOM0级事件处理测试加两个")};

结果：

如果这样写的话，点击按钮只会又一个弹窗：

DOM0级事件处理测试加两个

因为上面的那个被覆盖掉了。

6a5ac91a55ca11edab81a230910caac9.png

DOM2级事件处理

DOM2级事件处理

按钮

tem.addEventListener("click",function(){alert("DOM2级事件处理程序a");});

tem.addEventListener("click",function(){alert("DOM2级事件处理程序b");});

运行：

1d2d2d3e5fb735d0aad7f7d3e25f7e3b.png

9c3108c69167deca5736c7ea0917dcbb.png

不同浏览器支持的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级事件

}

点击按钮会有这个：

89ef1a08e5b202b21b18b7149d26836e.png

本文地址：https://blog.csdn.net/weixin_44532671/article/details/111143477

蒂埃里亨利
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值