江北网站制作,门户型网站特点,WordPress 黛米付,建设常规的网站报价是多少JavaScript 语言介绍 前言正文1、JavaScript 小案例2、代码位置2.1 在当前 HTML 文件中2.2 在其他 js 文件中 3、代码注释3.1 HTML的注释3.2 CSS的注释3.3 Javascript的注释 4、变量 输出4.1 字符串4.2 数组4.3 对象(python里的字典) 5、条件语句6、函数7、DOM7.1 根据 I… JavaScript 语言介绍 前言正文1、JavaScript 小案例2、代码位置2.1 在当前 HTML 文件中2.2 在其他 js 文件中 3、代码注释3.1 HTML的注释3.2 CSS的注释3.3 Javascript的注释 4、变量 输出4.1 字符串4.2 数组4.3 对象(python里的字典) 5、条件语句6、函数7、DOM7.1 根据 ID 获取标签7.2 获取标签中的文本7.3 修改标签中的文本7.4 创建标签7.5 标签写内容7.6 动态创建标签并写入内容7.7 事件的绑定 前言
JavaScript是一门编程语言浏览器就是JavaScript语言的解释器DOM和BOM相当于这门编程语言内置的一些模块相当于 Python 中的 re、random模块等jQuery相当于第三方模块相当于 Python 中的 requests、openx l模块等
本篇文章中主要介绍 JavaScript 的相关用法。
正文
1、JavaScript 小案例
JavaScript 的意义让程序实现动态效果。
例如
!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlestyle.menus {width: 200px;border: 1px solid red;}.menus .header {background-color: gold;padding: 20px 10px;}/style
/head
bodydiv classmenusdiv classheader onclickmyFunc()大标题/divdiv classitem内容/div/divscript typetext/javascriptfunction myFunc() {alert(hello)//confirm(是否要继续)}/script/body
/html 点击“大标题”弹出对话框或选择框 2、代码位置
2.1 在当前 HTML 文件中 head中 body中(推荐)
注意: 如果写在了 head 中body 的 html 代码不会执行会先执行 head 中的javascript 之后才会显示 html 代码
2.2 在其他 js 文件中 创建目录 导入JS文件 bodyscript srcstatic/js/my.js/script
/body3、代码注释
3.1 HTML的注释
!-- 注释内容 --3.2 CSS的注释
只能写在 style 代码块中
/* 注释内容 */3.3 Javascript的注释
只能写在 script 代码块中
// 注释内容/* 注释内容 */4、变量 输出
!DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/title
/head
bodyscript typetext/javascriptvar name 变量名;console.log(name); //打印变量/script
/body
/html4.1 字符串
//声明
var name 声明一个字符串;
var name String(声明一个字符串);常见功能
var name 中国联通var v1 name.length; //字符串长度
var v2 name[0]; //根据索引
var v3 name.trim(); //去除空白
var v4 name.substring(0,2) //切片, 前取后不取案例: 跑马灯
!DOCTYPE html
html langenheadmeta charsetUTF-8titleDocument/title
/headbodydiv idtxt欢迎中国联通领导XXX莅临指导/divscript typetext/javascriptfunction show() {//1.去HTML中找到某个标签并获取他的内容 (DOM)var tag document.getElementById(txt);var dataString tag.innerText;//2.动态起来,把文本中的第一个字符放在字符串的最后面var firstChar dataString[0];var otherString dataString.substring(1, dataString.length);var newText otherString firstChar;//3.在HTML标签中更新内容tag.innerText newText;}//Javascript中的定时器//每秒钟执行这个show函数setInterval(show, 1000); //毫秒/script
/body
/html4.2 数组
//定义数组
var v1 [11,22,33,44];
var v2 Array([11,22,33,44]);//操作
var v1 [11,22,33,44];v1[1] //获取
v1[0] 00 //修改//追加
v1.push(联通); //尾部追加 [11,22,33,44,联通]
v1.unshift(联通); //头部追加 [联通,11,22,33,44]
v1.splice(索引,0,元素); //在指定的位置进行插入
v1.splice(1,0,中国); //指定位置追加 [11,中国,22,33,44]//删除
v1.pop(); //尾部删除
v1.shift(); //头部删除
v1.splice(索引位置,1); //在指定位置进行删除
v1.splice(2,1); //索引为 2 的元素删除 [11,22,44]//循环
var v1 [11,22,33,44];
//循环的是索引 第一种方式
for(var index in v1){//index0/1/2/3 循环的是索引//datav1[index] ...
}//循环的第二种方式
for(var i0; iv1.length; i){...
}数组案例: 动态数据添加
bodyul idcity!-- li北京/lili天津/lili上海/li --/ulscript typetext/javascript//发送网络请求获取数据var cityList [北京,天津,上海];for(var idx in cityList) {//拿到文本var text cityList[idx];//创建 li/li 标签 文本和li结合起来var tag document.createElement(li);//在 li 标签中写入内容tag.innerText text;//添加到 idcity 那个标签的里面 DOMvar parentTag document.getElementById(city);parentTag.appendChild(tag);}/script
/body
/html4.3 对象(python里的字典)
//创建对象
info {name:对象,age:18,
}
//也可以不加
info {name:对象,age:18
}
info.age;
info.name Helloinfo[age]
info[name] Hello;
//删除
delete info[age]//循环
for(var key in info){//keyname or age datainfo[key]...
}对象案例创建动态表格
!DOCTYPE html
html langenheadmeta charsetUTF-8titleDocument/title
/headbodytable border1theadtrthID/thth姓名/thth年龄/th/tr/theadtbody idbodytr!-- td1/tdtdpoker/tdtd25/td --/tr/tbody/tablescript typetext/javascript//网络请求获取写到页面上var dataList [{ id: 1, name: 姓名1, age: 21 },{ id: 2, name: 姓名2, age: 22 },{ id: 3, name: 姓名3, age: 23 },{ id: 4, name: 姓名4, age: 24 },{ id: 5, name: 姓名5, age: 25 },{ id: 6, name: 姓名6, age: 26 },];for (var idx in dataList) {var info dataList[idx]//1.创建 tr 标签var tr document.createElement(tr)for (var key in info) {var text info[key];//2.创建 td 标签var td document.createElement(td);td.innerText text;tr.appendChild(td);}//3. 追加数据var bodyTag document.getElementById(body);bodyTag.appendChild(tr);}/script
/body
/html5、条件语句
if (条件) {...
}else{...
}if (条件) {...
else if (条件){...
}else{...
}6、函数
function func(){...//函数的内容
}//执行函数
func()7、DOM
DOM 是一个模块基于这个模块可以对 HTML 页面中的标签进行操作
7.1 根据 ID 获取标签
//根据 ID 获取标签
var tag doucment.getElementById(xx);7.2 获取标签中的文本
//获取标签中的文本
tag.innerText7.3 修改标签中的文本
//修改标签中的文本
tag.innerText hhhhhhh;7.4 创建标签
//创建 li/li 标签
var tag document.createElement(li);7.5 标签写内容
//在 li 标签中写入内容
tag.innerText text;7.6 动态创建标签并写入内容
body ul idcityli北京/li/ulscript typetext/javascript//根据 ID 获取标签ulvar tag document.getElementById(city);//根据 ID 获取标签livar newTag document.getElementById(li);//li标签写内容北京newTag.innerText 北京;//添加到idcity的标签里面 DOMtag.appendChild(newTag);}/script
/body7.7 事件的绑定
!DOCTYPE html
html langenheadmeta charsetUTF-8titleDocument/title
/headbodyinput typetext placeholder请输入内容 idcontent!-- 通过οnclickaddCityInfo() 进行事件的绑定 --input typebutton value点击添加 onclickaddCityInfo()ul idcity/ulscript typetext/javascriptfunction addCityInfo() {//1.找到标签var userContent document.getElementById(content);//2.获取input中用户输入的内容var newString userContent.value;//判断用户输入是否为空if (newString.length 0) {//3.创建 li 标签,传入用户输入的内容var newTag document.createElement(li);newTag.innerText newString;//4.标签添加到 ul 中var parentTag document.getElementById(city);parentTag.appendChild(newTag);//5.将 input text 内容清空userContent.value ;}else{alert(输入不能为空!)}}/script
/body
/html注意DOM中还有很多操作但是比较繁琐 页面上的效果更多使用 JQuery 来实现
