Python全栈：JavaScript入门
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Python全栈：JavaScript入门，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含11160字，纯文字阅读大概需要16分钟。
内容图文
文章目录
1 JavaScript简介
- JS是JavaScrip的简称，是一种脚本语言
- JS用于实现动态页面
- JS不需要安装，浏览器可以直接运行
- BOM：浏览器对象模型
- DOM：文档对象模型
2 第一个JavaScript程序
- 使用< script>在HTML页面中插入 JavaScript
- 引用外部文件
index.html
<!DOCTYPE html>
<html>
<head>
<title></title>
<script type="text/javascript" src="index.js"></script>
</head>
<body>
</body>
</html>
index.js
var x;
x="123";
alert(x+1);
console.log(x+1);
js变量
与其他程序设计语言相同，是用来临时存储信息
创建方法1：
var x=1;
var x=2,name="zhangsan"
创建方法2：
var x;
x=1;
提示：
- Js中的变量，区分类型，但没有int之类的关键词
js调试
alert单框调试、console.log控制台输出调试
作用：
- 观察变量值的变化规律，是否符合程序设计的目的
示例：
// 对话框弹出
alert(flag);
// 控制台打印
console.log(flag);
提示：
- 先掌握熟练这两种方法，再学习其他调试方法
3 JavaScript自定义函数
自定义函数是完成某一功能的代码段，可重复执行，方便管理和维护。
创建方法1：
这种是函数声明可以先使用后定义
function fun1(){
// 代码片段
return xxx;
}
创建方法2：
这种叫做函数表达式必须先定义后使用
var fun1 = function(x){
return x+1;
};
示例：
index.js
var num1=function(n1,n2){
var n3=n1+n2;
return n3;
}
var n=num1(14,14);
alert(n);
alert(num2(3,6));
function num2(n1,n2){
return n1+n2;
}
4 JavaScript数据类型及类型转换
类型分类
类型转换
isNaN()函数用于检查其参数是否是非数字值
parseInt()
parseFloat()
Number()
Boolean()
强制类型转换、隐式类型转换
var str="123";
console.log(str+1);
console.log(parseInt(str)+1);
var str1="abc";
if(!isNaN(str1)){
console.log(parseInt(str1));
}else{
console.log("is error");
str1=0;
}
console.log(str1);
示例2：
var str1="123";
console.log(parseInt(str1));
console.log(parseFloat(str1));
console.log(Number(str1));
var str2="a123";
console.log(parseInt(str2));
console.log(parseFloat(str2));
console.log(Number(str2));
var str3="123a";
console.log(parseInt(str3));
console.log(parseFloat(str3));
console.log(Number(str3));
//如果是数字，isNaN返回false
//如果不是数字，isNaN返回true
var str4="asdf";
var str5="123";
var str6="0";
console.log(Boolean(str4));
console.log(Boolean(str5));
console.log(Boolean(str6));
5 JavaScript变量作用域
- 全局变量
- 在函数内部创建的变量，称为局部变量，其他函数不能使用。
- 局部变量
- 在函数外部创建的变量，称为全局变量，在函数之间可以共享使用。
var n=9;
function fun1(){
var n1=5; //局部变量
n=12; //使用全局变量n
// console.log(n1);
}
function fun2(){
n=n-1; // 全局变量
}
function fun3(){
console.log(n); // 全局变量
console.log(n1); // 报错
}
fun1();
fun2();
fun3();
6 JavaScript运算符
比较运算符
用于比较两个值。结果是true或者 false
>
>=
!=
<
<=
优先级
逻辑运算符
包含逻辑与、或、非等，其结果为true或 false
- && and
- || or
- ！ 非
三目运算符
根据不同的条件，执行不同的操作/返回不同的值
条件? 值1: 值2;
var x=21;
var y=3;
var z=1;
var flag=x>10 && !(y>5 && z>10);
console.log(flag);
var str=x>10?"dayu":"xiaoyu";
console.log(str);
7 JavaScript if条件判断语句
var n=10;
var str;
if(n>10){
str="n>10";
}else if (n<10) {
str="n<10";
}else{
str="n=10";
}
console.log(str);
8 JavaScript switch-case多条件控制语句
/*
成绩是100分，显示满分
成绩大于等于90，显示优秀
成绩大于等于70，显示良好
成绩大于等于60，显示及格
否则，不及格
*/
var myscore=40;
var str;
var n=parseInt(myscore/10);
switch(n){
case 10:
str="manfen";
break;
case 9:
str="youxiu";
break;
case 8:
case 7:
str="lianghao";
break;
case 6:
str="jige";
break;
default :
str="bujige";
break;
}
console.log(str);
9 JavaScript 三种循环语句
// 1+2+3+4+5....+100=5050
// 方式1
var i1=0;
var sum1=0;
for(i1=0;i1<=100;i1++){
sum1 = sum1+i1;
}
console.log(sum1);
// 方式2
var i2=0;
var sum2=0;
while(i2<=100){
sum2 = sum2+i2;
i2++;
}
console.log(sum2);
// 方式3
var i3=0;
var sum3=0;
do{
sum3=sum3+i3;
i3++;
}while(i3<=100);
console.log(sum3);
10 JavaScript 内置函数
11 JavaScript 字符函数
示例1：
var str="520134199906061224";
console.log(str.substr(6,4));//起始位置，长度
console.log(str.substring(6,10));//起始位置，结束位置
var n=parseInt(str.charAt(16))
if(n % 2==0){
console.log("nv");
}else{
console.log("nan");
}
console.log(str.length);
console.log(str.indexOf(1,4));
示例2：
var str="aa,ttt,121,gg,ttt,kk,aa,bb,ttt";
var arr=str.split(",");
console.log(arr[0]);
console.log(str.concat(",55",",77",",00"));
console.log(arr.concat("55","77","00"));
var str1=str.replace("aa","imooc");
var str2=str1.replace("aa","imooc");
console.log(str2);
12 JavaScript 日期函数
var d1=new Date();
var d2=new Date("2020-1-1");
console.log(d1.getDate());
console.log(d1.getMonth()+1);//从0开始，0-11
console.log(d1.getFullYear());
console.log(d1.getHours());
console.log(d1.getMinutes());
console.log(d1.getSeconds());
var n=d2.getTime()-d1.getTime();
console.log(parseInt(n/(24*3600*1000)));
//2020-1-1 15:58 日期格式化
function fun_FmtDate(){
var d1=new Date();
var yyyy,mm,dd,hh,mi,ss;
var time;
yyyy=d1.getFullYear()
mm=d1.getMonth()+1;
dd=d1.getDate();
hh=d1.getHours();
mi=d1.getMinutes();
ss=d1.getSeconds();
time=yyyy+"-"+mm+"-"+dd+" "+hh+":"+mi+":"+ss;
return time;
}
console.log(fun_FmtDate());
13 JavaScript 数学函数
var n=16.654789;
console.log(Math.round(n));
console.log(n.toFixed(0));
console.log(Math.min(2,6,81,1));
console.log(Math.max(2,6,81,1));
console.log(Math.abs(-3));
14 JavaScript 数组
// 声明或创建一个不指定长度的数组，又称实例化创建：
var arrayObj1=new Array();
// 声明或创建一个数组并指定长度的数组：
var arrayObj2=new Array(5);
// 声明或创建一个带有默认值的数组：
var arrayObj3=new Array(2,4,"a","y",8);
// 创建一个数组并赋值的简写.又称隐式创建数据
var arrayObj4=[2,4,"a","y",8,5,1];
// 获取值
console.log(arrayObj4[5]);
console.log("------------------");
// 数组赋值、字符下标、数组遍历
for(var i in arrayObj4){
console.log(arrayObj4[i]);
}
console.log("------------------");
var i=0;
var n=arrayObj4.length;
for(i;i<n;i++){
console.log(arrayObj4[i]);
}
15 JavaScript对表单元素进行设置
什么是表单？
- 表单的主要作用是在客户端接收用户的信息，然后将数据递交给后台的程序来操控这些数据
JS可以做什么？
- 设置或获取各种表单元素的值
设置input内容
html
<form>
<label>用户名</label>
<input type="text" id="userName" name="userName" value="123"/><br>
<input type="button" id="btn" onclick="show1()" value="btn"/>
</form>
js
function show1(){
// alert("123456");
document.getElementById("userName").value="baidu";
}
获取radio选项
html
<form>
<label>用户名</label>
<input type="text" id="userName" name="userName" value="123"/><br>
<input type="radio" name="xb" value="男" checked="checked">男
<input type="radio" name="xb" value="女">女<br>
<input type="button" id="btn" onclick="show1()" value="btn"/>
</form>
js
function show1(){
var xb=document.getElementsByName("xb");
var xbText;
if(xb[0].checked){
xbText=xb[0].value;
}else{
xbText=xb[1].value;
}
alert(xbText);
}
设置select下拉列表框值
html
<body onl oad="ymd()">
<form>
<select name="yyyy" id="yyyy"></select>年
<select name="mm" id="mm"></select>月
<select name="dd" id="dd"></select>日
</form>
</body>
js
function ymd(){
//获取id=yyyy的控件
var yyyy=document.getElementById("yyyy");
var mm=document.getElementById("mm");
var dd=document.getElementById("dd");
var date=new Date();
var year=parseInt(date.getFullYear());
initSelect(yyyy,1999,year);
initSelect(mm,1,12);
initSelect(dd,1,31);
}
/*给列表框赋值，传递三个参数：表单元素，开始值，结束值*/
function initSelect(obj,start,end){
for(var i=start;i<=end;i++){
obj.options.add(new Option(i,i));
}
}
删除select条目
html
<body onl oad="ymd()">
<form>
<select name="yyyy" id="yyyy" onchange="selectYmd()"></select>年
<select name="mm" id="mm" onchange="selectYmd()"></select>月
<select name="dd" id="dd"></select>日
<input type="button" value="删除列表框条目" onclick="deleteSelect()"><br>
</form>
</body>
js
function ymd(){
//获取id=yyyy的控件
var yyyy=document.getElementById("yyyy");
var mm=document.getElementById("mm");
var dd=document.getElementById("dd");
var date=new Date();
var year=parseInt(date.getFullYear());
initSelect(yyyy,1999,year);
initSelect(mm,1,12);
initSelect(dd,1,31);
// 获取列表框的长度
var n=yyyy.length;
// 列表框选中某一个条目
yyyy.selectedIndex=Math.round(n/2);
// 将某个列表框的条目数设置为零，效果是删除
// dd.options.length=0;
}
/*给列表框赋值，传递三个参数：表单元素，开始值，结束值*/
function initSelect(obj,start,end){
for(var i=start;i<=end;i++){
obj.options.add(new Option(i,i));
}
}
function selectYmd(){
var yyyy=document.getElementById("yyyy");
var mm=document.getElementById("mm");
var dd=document.getElementById("dd");
var m=parseInt(mm.value);
var dayEnd;
if(m==4 || m==6 || m==9 || m==11){
dayEnd=30;
}else if(m==2){
dayEnd=28;
y=parseInt(yyyy.value);
if((y % 4==0 && y % 100 !=0) || y % 400 ==0){
dayEnd=29;
}
}else{
dayEnd=31;
}
dd.options.length=0;
initSelect(dd,1,dayEnd);
}
// 删除列表框的某一个条目。即：按索引号删除
function deleteSelect(){
var dd=document.getElementById("dd");
//dd.options.remove(1);
for(i=dd.length;i>=0;i--){
dd.options.remove(0);
}
}
//完成作业：第二种方法实现年月日的三级联动
select下拉框关联图片
html
<body onl oad="ymd(),initLogo()">
<form>
<select name="yyyy" id="yyyy" onchange="selectYmd()"></select>年
<select name="mm" id="mm" onchange="selectYmd()"></select>月
<select name="dd" id="dd"></select>日
<input type="button" value="删除列表框条目" onclick="deleteSelect()"><br>
<img id="logoImg" src="image/headLogo/1.gif">
<select id="logo" onchange="selectLogo()"></select>
</form>
</body>
js
function initLogo(){
var logo=document.getElementById("logo");
for(i=1;i<=15;i++){
logo.options.add(new Option(i,i));
}
}
function selectLogo(){
var logo=document.getElementById("logo");
var n=logo.value;
var logoImg=document.getElementById("logoImg");
logoImg.src="image/headLogo/"+n+".gif";
}
checkbox选择
html
<body>
<form>
<input type="checkbox" name="interest" value="1"/><label>游泳</label>
<input type="checkbox" name="interest" value="2"/><label>爬山</label>
<input type="checkbox" name="interest" value="3"/><label>看书</label>
<input type="checkbox" name="interest" value="4"/><label>听歌</label>
<input type="button" id="btn1" value="全选" onclick="checkInterest()">
<input type="button" value="反选" onclick="checkInterest1()">
</form>
</body>
js
var flag=true;
function checkInterest(){
var interest=document.getElementsByName("interest");
for(i=0;i<interest.length;i++){
interest[i].checked=flag;
}
if(flag){
document.getElementById("btn1").value="全不选";
}else{
document.getElementById("btn1").value="全选";
}
flag=!flag;//开关变量
}
function checkInterest1(){
var interest=document.getElementsByName("interest");
for(i=0;i<interest.length;i++){
interest[i].checked=!interest[i].checked;
console.log(interest[i].value);
}
}
16 事件
什么是事件？
- 事件是指被程序发现的行为或发生的事情，而且它可能会被程序处理
- js的事件，都是以on开头，有 onclick、onchange、onload
- 键盘事件、鼠标事件、表单事件
17 DOM
DOM：Document Object Model
什么是DOM？
将文档（页面）表现为结构化的表示方法，使每一个页面元素都是可操控，DOM将网页和脚本以及其他的编程语言联系了起来。
- 利用js控制页面中的所有元素，使页面更加“聪明“
- 元素节点、属性节点、文本节点
DOM树：
常见DOM操作：
内容总结
以上是互联网集市为您收集整理的Python全栈：JavaScript入门全部内容，希望文章能够帮你解决Python全栈：JavaScript入门所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。
来源：【匿名】