仿制型模板网站,推广自己的店铺推广语,wordpress控制字数,wordpress shortinit黑马程序员JavaWeb开发教程 文章目录 一、js引入方式1、内部脚本2、外部脚本 二、js基础语法1、书写语法#xff08;1#xff09;基本语法#xff08;2#xff09;输出语句 2、变量#xff08;1#xff09;变量#xff08;2#xff09;注意事项 3、数据类型、运算符、流… 黑马程序员JavaWeb开发教程 文章目录 一、js引入方式1、内部脚本2、外部脚本 二、js基础语法1、书写语法1基本语法2输出语句 2、变量1变量2注意事项 3、数据类型、运算符、流程控制语句1数据类型2运算符3流程控制语句 三、js函数1函数 四、js对象1、Array1数组的定义以及访问语法2Array中的属性和方法 2、String1字符串的创建方式 3、JSON1JavaScript自定义对象2JSON-介绍3JSON-基础语法 4、BOM1BOM2Window3Location 5、DOM1DOM2DOM操作小案例 五、js事件监听1、事件监听1概念 2、JS事件监听1事件绑定2常见事件3案例 JS介绍
javaScript简称JS是一门跨平台、面向对象的脚本语言是用来控制网页行为的它能使网页可交互JavaScript和java是完全不同的语言不论是概念还是设计但是基础语法类似
一、js引入方式
1、内部脚本
将JS代码定义在HTML页面中 JavaScript 代码必须位于scripy/script标签之间 在HTML文档中可以在任意地方防止任意数量的scripy/script标签 一般会把脚本防止在body元素的底部这样可以改善显示速度
2、外部脚本
将JS代码定义在外部JS文件中然后引入到HTML页面中
外部JS文件中只包含JS代码不包含scripy/script标签在HTML文件中通过scripy/script标签来引入JS文件scripy/script标签不能自闭合
二、js基础语法
1、书写语法
1基本语法
区分大小写与java一样变量名、函数名以及其他的一切东西都是区分大小写的每行结尾的分号可有可无建议写上注释 单行注释// 注释内容多行注释/* 注释内容 */ 大括号表示代码块
2输出语句
使用 window.alert() 写入警告框使用document.write() 写入HTML输出使用 console.log() 写入浏览器控制台输出
2、变量
1变量 JavaScript中使用 var 关键字来声明变量 var 声明的变量作用域比较大全局变量var 声明的变量可以重复定义后定义的会将前边定义的变量覆盖掉 JavaScript是一门弱类型语言变量可以存放不同类型的值 变量名需要遵循如下规则 组成字符可以使任何目、数字、下划线_、或者美元符号$数字不能开头建议使用驼峰命名
2注意事项
ECMScript 6 新增了let关键字来定义变量。他的用法类似于 var 但是所声明的变量只在let代码块内有效且不允许重复声明。新增了 const 关键字用来声明一个只读的常量一旦声明常量的值就不能改变
3、数据类型、运算符、流程控制语句
1数据类型
原始类型 number数字整数、小数NaNstring字符串单引号和双引号都可以boolean布尔null对象为空undefined当声明的变量未初始化时该变量的默认值是undefined
2运算符
运算符
算术运算符 , - , * , / , % , , –赋值运算符 , , - , * , / , %比较运算符 , , , , ! , , 会进行类型转换不会进行类型转换 逻辑运算符 , || , !三元运算符条件表达式 true_value false_value
类型转换
字符串类型转为数字 parseInt 将字符串字面值转为数字如果字面值不是数字则转为 NaN 其他类型转为boolean Number0 和 NaN 是 false其余的都是 trueString空为 false其余的都是 trueNull和undefined都是 false
3流程控制语句
if…else if …else…switchforwhiledo…while语法与 java 当中一致
三、js函数
1函数 介绍 函数方法是被设计为执行特定人物的代码块 定义 JavaScript函数通过function关键字进行定义语法为 第二种方式 注意 形式参数不需要类型因为JS是弱类型语言返回值也不需要定义类型可以在函数内部直接使用return返回即可调用函数名实际参数列表
四、js对象
1、Array
1数组的定义以及访问语法 JavaScript 中 Array 对象用于定义数组 定义 方式一 方式二 访问
2Array中的属性和方法
属性 length社会或返回数组中元素的数量 方法 forEach遍历数组中每个有值的元素并调用一次传入的函数 push将新元素添加到数组的末尾并返回新的长度 arr.push(3,4,5); splice从数组中删除元素 arr.splice(2,3);//从索引为2的位置开始删一共删除3个元素
2、String
1字符串的创建方式
String字符串的创建方式有两种 // 第一种方式var 变量名 new String(...);var str new String(Hello String);// 第二种方式var 变量名 ...;var str HelloString;属性 length字符串的长度 方法 charAt返回在指定位置的字符indexOf检索字符串trim去除字符串两边的空格中间的不会去除subString提取字符串中两个指定的索引号之间的字符
3、JSON
1JavaScript自定义对象 定义格式 调用格式
2JSON-介绍
概念JavaScript Object NotationJavaScript对象标记法JSON是通过JavaScript对象标记法书写的文本由于其语法简单层次结构鲜明现多用于作为数据载体在网络中进行数据传输正确的JSON格式key必须使用双引号 {name:Tom,age:20,gender:male}3JSON-基础语法 定义 value的数据类型为 数字整数或浮点数字符串在双引号中逻辑值true或者false数组在方括号中对象在花括号中null JSON字符串转为JS对象 JS对象转为JSON字符串
4、BOM
1BOM
概念Browser Object Model 浏览器对象模型允许JavaScript与浏览器对话JavaScript将浏览器的各个组成部分封装为对象组成 Window浏览器窗口对象Navigator浏览器对象Screen屏幕对象History历史记录对象Locationn地址栏对象
2Window 介绍 浏览器窗口对象 获取 直接使用window其中window.可以省略 属性 history对History对象的只读引用location用于窗口或者框架的Location对象navigator对Navigator对象的只读引用 方法 alert():显示带有一段消息和一个确认按钮的警告框 confirm显示带有一短消息以及确认按钮和取消按钮的对话框 setInterval()按照指定的周期来调用函数或计算表达式 setTimeout()在指定的毫秒数之后调用函数或计算表达式
3Location 介绍 地址栏对象 获取 使用window.location获取其中window.可以省略 属性 href 设置或返回完整的URL
5、DOM
1DOM
概念 Document Object Modeel文档对象模型 将标记语言的各个部分封装为对应的对象 Document整个文档对象Element元素对象Attribute属性对象Text文本对象Comment注释对象 JavaScript 通过DOM就能够对HTML进行操作 改变HTML元素的内容改变HTML元素的样式CSS对HTML DOM 时间做出反应添加和删除HTML元素 DOM 是 W3C 的标准定义了访问HTML和XML文档的保准分为3个不同的部分 Core DOM-所有文档类型的标准模型 Document整个文档对象Element元素对象Attribute属性对象Text文本对象Comment注释对象 XML DOM-XML 文档的标准模型 HTML DOM -HTML文档的标准模型 ImageimgButton:input typebutton ###2获取HTML中的DOM对象 HTML的的Element对象可以通过Document对象获取而Document对象是通过window对象获取的Document对象中提供了以下获取Element元素的函数 根据id属性值获取返回单个Element对象 根据标签名称获取返回Element对象数组 根据name属性值获取返回Element对象数组 根据class 属性值获取返回Element对象数组
实例完整代码
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyimg id h1 src../img/off.gif width50pxbrbrdiv classcls传智教育/divbrdiv classcls黑马程序员/divbrinput typecheckbox namehobby电影input typecheckbox namehobby旅游input typecheckbox namehobby游戏script// 1.获取 Element 元素 // 1.1 获取元素-根据 id 获取var img document.getElementById(h1);alert(img);// 1.2 获取元素-根据标签获取var d document.getElementsByTagName(div);for (let i 0; i d.length; i) {alert(d[i]);}// 1.3 获取元素-根据 name 属性获取var names document.getElementsByName(hobby);for (let i 0; i names.length; i) {alert(names[i]);}// 1.4 获取元素-根据 class 属性获取var clsArray document.getElementsByClassName(cls);for (let i 0; i clsArray.length; i) {alert(clsArray[i]);}/script script// 2、查询参考手册属性、方法var divs document.getElementsByTagName(div);var div1 divs[0];//拿到第一个divdiv1.innerHTML 传智教育666;/script
/body
/html结果示例 2DOM操作小案例
注意可以在 https://www.w3school.com.cn/ 查找相关的操作DOM的属性和方法
将灯泡点亮所有div标签的内容后边加上very good红色字体使所有的复选框呈现选中状态 实例代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDOM 练习/title
/headbodyimg idh1 src../img/off.gif width50pxbrbrdiv classcls传智教育/divbrdiv classcls黑马程序员/divbrinput typecheckbox namehobby电影input typecheckbox namehobby旅游input typecheckbox namehobby游戏script// 1、点亮灯泡// 1.1 通过id属性拿到 img对象var img document.getElementById(h1);// 1.2 操作元素的src属性img.src ../img/on.gif;// 2、所有div标签的内容后边加上very good红色字体// 2.1 获得div标签var divs document.getElementsByTagName(div);// 2.2 在div标签内容后边添加内容for (let i 0; i divs.length; i) {const div divs[i];div.innerHTML font colorred very good/font;}// 3、使所有的复选框呈现选中状态// 3.1 根据name属性得到所有复选框var checks document.getElementsByName(hobby);// 3.2 将复选框做成选中状态for (let i 0; i checks.length; i) {checks[i].checked true;// c.checkedtrue;}/script/body/html结果示例 五、js事件监听
1、事件监听
1概念
事件HTML事件是发生在HTML元素上的“事情”。比如 按钮被点击鼠标移动到元素上按下键盘按键 事件监听 JavaScript 可以在时间被侦测到的时候执行代码
2、JS事件监听
1事件绑定 方式一通过HTML标签中的事件属性进行绑定 方式二通过DOM元素属性绑定 完整示例代码
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title事件绑定/title
/headbodyinput typebutton idbtn1 value事件绑定1 onclickon()input typebutton idbtn2 value事件绑定2!-- 方式一通过HTML标签中的事件属性进行绑定 --scriptfunction on() {alert(事件绑定1被点击了);}/script!-- 方式二通过DOM元素属性绑定 --scriptdocument.getElementById(btn2).onclick function () {alert(事件绑定2被点击了);}/script
/body/html2常见事件
onclick鼠标单击事件onblur元素失去焦点onfocus元素获得焦点onload某个页面或者图像被完成加载onsubmit当表单提交时出发改时间onkeydown某个键盘的键被按下onmouseover鼠标被移到某元素上onmouseout鼠标从某元素移开
注意:常见事件的使用方法在下个案例中有所提及
3案例
最初的图片是如下图 案例要求如下
1、 点击“点亮”按钮灯泡被点亮点击“熄灭”按钮熄灭灯泡即修改图片2、输入框鼠标聚焦之后展示小写离焦之后展示大写3、点击“全选”按钮使所有复选框呈现被选中状态点击“反选”按钮使所有复选款呈现未被选中状态 最终呈现状态 实例代码如下
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title练习 /title
/headbodyimg src../img/off.gif width70px idimg_idbrbrinput typebutton value点亮 onclickon()input typebutton value熄灭 onclickoff()brbrinput typetext valueITCAST onfocusfMouse() onblurbMouse() idtext_valuebrbrinput typecheckbox namehobby电影input typecheckbox namehobby游戏input typecheckbox namehobby旅游brbrinput typebutton value全选 onclickon_select()input typebutton value反选 onclickon_unselect()brbrscript//1、 点击“点亮”按钮灯泡被点亮点击“熄灭”按钮熄灭灯泡即修改图片// 1.1 点亮首先根据标签中的事件属性绑定事件,再通过document修改src属性function on() {document.getElementById(img_id).src ../img/on.gif;}// 1.2 熄灭同点亮function off() {document.getElementById(img_id).src ../img/off.gif;}// 2、输入框鼠标聚焦之后展示小写离焦之后展示大写// 2.1 聚焦onfocusfunction fMouse() {var text document.getElementById(text_value);text.value text.value.toLowerCase();}// 2.2 离焦onblurfunction bMouse() {var text document.getElementById(text_value);text.value text.value.toUpperCase();}// 3、点击“全选”按钮使所有复选框呈现被选中状态点击“反选”按钮使所有复选款呈现未被选中状态// 3.1 全选function on_select() {var select document.getElementsByName(hobby);for (let i 0; i select.length; i) {select[i].checked true;}}// 3.2 反选function on_unselect() {var unselect document.getElementsByName(hobby);for (let i 0; i unselect.length; i) {unselect[i].checked false;}}/script
/body/html
