泗洪网站,中国做的儿童编程网站,网站源码.net,苏州工程建设网目录一、前提简介1.1什么是JavaScript1.2JavaScript和Java语言的区别1.3Html、Css和Javascript1.4Javascript作用二、实操代码2.1Javascript写在本html内2.2Javascript可以写在单独的文件中#xff08;外联方式#xff09;2.3实战#xff1a;点击一个盒子#xff0c;让另外…
目录一、前提简介1.1什么是JavaScript1.2JavaScript和Java语言的区别1.3Html、Css和Javascript1.4Javascript作用二、实操代码2.1Javascript写在本html内2.2Javascript可以写在单独的文件中外联方式2.3实战点击一个盒子让另外一个盒子变色2.4实战一个按钮绑定一个事件2.4实战变换皮肤一、前提简介
1.1什么是JavaScript
JavaScript是一种动态的计算机编程语言。它是轻量级的最常用作网页的一部分其实现允许客户端脚本与用户交互并创建动态页面。它是一种具有面向对象功能的解释型编程语言。
1.2JavaScript和Java语言的区别
Javascript和Java没有任何关系它们是不同的两种语言(java是一种程序设计语言javascript 是客户端的脚本语言)只是名字上都有一个Java而已。
1.3Html、Css和Javascript
这三个要素共同构成了Web开发的基础。
HTML页面的结构-标题正文要包含的任何图像 CSS控制该页面的外观这将用于自定义字体背景颜色等 JavaScript不可思议的第三个元素。创建结构HTML和美学氛围CSS后JavaScript使您的网站或项目充满活力。
1.4Javascript作用
表单数据验证表单数据验证是JavaScript最基本也是最能体现效率的功能。动态HTML即DHTML动态HTML指不需要服务器介入而动态变化的网页效果包括动态内容、动态样式、动态布局等。 比如改变盒子的尺寸背景颜色图片等。用户交互用户交互指根据用户的不同操作进行的响应处理。例如联动菜单等。数据绑定HTML中表单和表格能够以.txt文件定义的数据源通过对位于服务器端的数据源文件的访问便可以将数据源中的数据传送到客户端并将这些数据保存在客户端。少量数据查找能够实现在当前网页中进行字符串的查找和替换。AJAX核心技术AJAX即异步JavaScriptXML。该对象提供一种支持异步请求的技术使客户端可以使用JavaScript向服务器提出请求并处理响应但并不影响用户在客户端的浏览。Nodejs就是使用的javascript做后端是目前为止唯一的一个既能做前端、又能做后端的语言。
(上面这个作用是直接用的我的老师的课件我可没这么6懂这么多。他一个10多年开发经验的资深程序员哈哈哈哈哈哈有点想帮忙宣传一下他的网课但想想还是算了吧感觉打广告有点不好)
*********************************************一条华丽的分割线***************************************************
二、实操代码
2.1Javascript写在本html内
1. js程序必须写在script标签中。 2. script:可以写在网页中的任何位置。 3. type“text/javascript”表示当前的语言是javascript语言。这个属性是可以省略的。
举例上代码
!DOCTYPE html
htmlheadmeta charsetutf-8 /title/title/headbodyscript typetext/javascriptalert(出错啦)/script/body
/html拿代码去运行一下就知道了
2.2Javascript可以写在单独的文件中外联方式
创建一个js文件在js文件中编写js代码。(外部文件中编写js代码就直接写代码就可以了不用再添加script标签)
比如说在js目录下面创建一个 test.js文件 里面的代码为alert(“出错啦”)
举例上代码
a.html
!DOCTYPE html
htmlheadmeta charsetUTF-8title/title/headbodyscript srcjs/test.js typetext/javascript charsetUTF-8/script/body
/html
拿代码去运行一下就知道了
2.3实战点击一个盒子让另外一个盒子变色
举例上代码
!DOCTYPE html
htmlheadmeta charsetutf-8title/titlestyle typetext/css#box1{width: 100px;height: 100px;background-color: red;}#box2{width: 100px;height: 100px;background-color: blue;}/style/headbodydiv idbox1/divdiv idbox2/divscript typetext/javascript//目标点击box1时让box2变颜色var b1 document.getElementById(box1)b1.onclickfunction(){// 当点击b1的时候执行此处的代码document.getElementById(box2).style.backgroundColorpink}/script/body
/html
运行效果拿去试试就知道了点一下第一个小盒子
2.4实战一个按钮绑定一个事件
在js中使用关键字function可以定义一个函数函数里面的代码不会自动执行只有函数被调用后函数里面的代码才会执行。可以给网页中的任何html容器标签绑定点击事件。οnclick“add();” onclick表示点击的时候执行。js中有两个函数parseInt 将字符串转为数字。 parseFloat():将字符串专为浮点类型。
举例上代码
!DOCTYPE html
htmlheadmeta charsetUTF-8title/title/headbodyinput typetext nametb1 idtb1 value /input typetext nametb2 idtb2 value / input typetext nametb3 idtb3 value /input typebutton idbtnjisuan value计算 onclickadd(); /a hrefjavascript:void(0); onclickbb();腾讯/ascript typetext/javascriptfunction add(){var v1document.getElementById(tb1).value;var v2document.getElementById(tb2).value;var v3parseInt(v1) parseInt(v2);document.getElementById(tb3).valuev3;}function bb(){location.hrefhttp://www.qq.com; //通过js代码实现页面的跳转 }/script/body
/html
拿去运行一个就知道了哈哈哈哈这个学会了下面那个就容易多啦 *********************************************一条华丽的哈哈哈哈哈哈哈哈***************************************************
2.4实战变换皮肤
实现效果点击什么颜色代表的小框框就会弹出穿啥衣服的 fairy 哈哈哈哈 本人敲爱看这些美丽的事物哈哈哈哈 https://blog.csdn.net/hanhanwanghaha一个超级无敌可爱的人鸭 欢迎您的关注 欢迎关注微信公众号宝藏女孩的成长日记 如有转载请注明出处如不注明盗者必究 自己可以下载一些图片或者颜色渐变图片用来做背景放在img里面可自己命名。基本格式如下图 上代码
网页换肤.html
!DOCTYPE html
htmlheadmeta charsetUTF-8title/titlelink relstylesheet typetext/css hrefcss/css2.css idbtnlink//headbodydiv idbox1span ids1 onclicka1();志玲/spanspan ids2 onclicka2();依林/spanspan ids3 onclicka3();昆凌/span/divscript typetext/javascriptfunction a1(){document.getElementById(btnlink).hrefcss/css1.css;}function a2(){document.getElementById(btnlink).hrefcss/css2.css;}function a3(){document.getElementById(btnlink).hrefcss/css3.css;}/script/body
/html
css1.css
*{margin: 0;padding: 0;
}html,body{width:100%;height: 100%;
}body{background-image: url(../img/blue.jpg);background-repeat: repeat-x; /* 设置不重复平铺 */
}#box1{width: 186px;height: 60px;background-color: white;margin: 0 auto;position: relative;
}
#s1{width: 60px;height: 60px;background-color: blue;display: inline-block;margin: 1px;cursor: pointer;position: absolute; /* 子绝父相 */left: 0;top: 0;
}
#s2{width: 60px;height: 60px;background-color:green;display: inline-block;margin: 1px;cursor: pointer;position: absolute;left: 62px;top: 0;
}
#s3{width: 60px;height: 60px;background-color: pink;display: inline-block;margin: 1px;cursor: pointer;position: absolute;right: 0;top: 0;
}css2.css
*{margin: 0;padding: 0;
}html,body{width:100%;height: 100%;
}body{background-image: url(../img/green.jpg)
}#box1{width: 186px;height: 60px;background-color: white;margin: 0 auto;position: relative;
}
#s1{width: 60px;height: 60px;background-color: blue;display: inline-block;margin: 1px;cursor: pointer;position: absolute; /* 子绝父相 */left: 0;top: 0;
}
#s2{width: 60px;height: 60px;background-color:green;display: inline-block;margin: 1px;cursor: pointer;position: absolute;left: 62px;top: 0;
}
#s3{width: 60px;height: 60px;background-color: pink;display: inline-block;margin: 1px;cursor: pointer;position: absolute;right: 0;top: 0;
}css3.css
*{margin: 0;padding: 0;
}html,body{width:100%;height: 100%;
}body{background-image: url(../img/pink.jpg)
}#box1{width: 186px;height: 60px;background-color: white;margin: 0 auto;position: relative;
}
#s1{width: 60px;height: 60px;background-color: blue;display: inline-block;margin: 1px;cursor: pointer;position: absolute; /* 子绝父相 */left: 0;top: 0;
}
#s2{width: 60px;height: 60px;background-color:green;display: inline-block;margin: 1px;cursor: pointer;position: absolute;left: 62px;top: 0;
}
#s3{width: 60px;height: 60px;background-color: pink;display: inline-block;margin: 1px;cursor: pointer;position: absolute;right: 0;top: 0;
}
一些很基础的东西要是写起来那就太多了很多不常用的到了我们需要它的时候谷歌和百度就行了。 由于时间关系暂时更到这里自己敲了一下老师上课讲的精华部分后面如果有补充的话我会及时更嘿嘿嘿 欢迎关注 https://blog.csdn.net/hanhanwanghaha 一个超级无敌可爱的人鸭 期待一起学习嗷嗷。
相关文章：
