感觉看过PHP会学起来更简单,在我看来有点类似。
一、了解JavaScript语言
1.在网页中使用JavaScript脚本语言。
<script>
……
</script>
上述代码在HTML5中可以直接使用,在HTML4中需要使用以下代码:
<script type="text/javascript">
……
</script>
2.导入外部JavaScript文件
具体使用方法如下
<script type="text/javascript" src="xxx.js"></script>
scr定义外部js文件的路径地址,路径可以为绝对路径。
3.JavaScript的调试,用浏览器打开你创建的网页,按F12进入开发者模式调试。
4.断点调试,在你想要设置的地方设置断点,按F11单步执行脚本,也可以按F5刷新页面将脚本执行完毕。
5.JavaScript常用输出流。先记住,要不然无法调试啊。
(1)使用 window.alert() 弹出警告框。
<script>
window.alert(5+6);
</script>
<script>
window.alert("这是一个警告框"); //也可以直接写成alert("这是一个警告框");
</script>
(2)使用 document.write() 方法将内容写到 HTML 文档中。
<script>
document.write("这句话在网页中显示"); //加不加;我发现都可以显示
</script>
(3)使用 innerHTML 写入到 HTML 元素。
我还没看到。
(4)使用 console.log() 写入到浏览器的控制台。
下面例子大多都是控制台,就不举例了。
二、JavaScript变量
1.JavaScript语法补充,同C语言
(1)大小写敏感。
(2)代码注释。
(3)空格缩进。
(4)反斜杠(\)对代码进行换行。
2.JavaScript变量需要以字母或者$或者_开头。
3.JavaScript分为全局变量和局部变量,且二者的定义方式、作用于和使用方法有明显区别。
<script type="text/javascript">
var a=1;
var b=2;
var c=a+b;
console.log(c);
</script>
第2、3行代码通过关键字var
定义了两个变量,并进行了初始化复制操作。第4行定义了一个变量表达式。第五行代码通过console.log()
函数向控制台输出调试信息。
4.变量在函数外定义,即为全局变量。
如果变量在函数内没有声明(没有使用 var 关键字),该变量为全局变量。
5.变量定义演示:
(1)字符串变量
<script type="text/javascript">
//单引号双引号都可以输出字符串
var v_str_a="Hello World!";
var v_str_b="Hello 'World!'";
var v_str_c='Hello "World!"';
console.log(v_str_a);
console.log(v_str_b);
console.log(v_str_c);
</script>
(2)数值变量
<script type="text/javascript">
//数值变量
var v_i=123456;
var v_d=3.1415926;
var v_e_a=123e3;
var v_e_b=123e-3;
console.log(v_i);
console.log(v_d);
console.log(v_e_a);
console.log(v_e_b);
</script>
(3)布尔型变量
<script type="text/javascript">
//数值变量
//布尔型变量
var v_bool_t=true;
var v_bool_f=false;
console.log(v_bool_t);
console.log(v_bool_f);
</script>
(4)数组
//数组
var v_arr_a=new Array();
v_arr_a[0]="php";
v_arr_a[1]="mysql";
v_arr_a[2]="html";
console.log(v_arr_a);
var v_arr_b=new Array("php","mysql","html");
console.log(v_arr_b);
//JavaScript对象,类似C语言中的结构体
//调侃一下,谁都有对象,就C语言"单身"
var userinfo={
id:001, //注意是","
username:"javascript",
sex:"不详"
}; //结尾加";"
console.log(userinfo);
var userinfor=new Object();
userinfo.id=002;
userinfo.username="bujidao";
userinfo.sex="haishibujidao";
console.log(userinfo);
var len=Object.keys(userinfo);
console.log(len.length);
(5)对象
<script type="text/javascript">
//JavaScript对象,类似C语言中的结构体
//调侃一下,谁都有对象,就C语言"单身"
var userinfor={
id:001, //注意是","
username:"javascript",
sex:"不详"
}; //结尾加";"
console.log(userinfor);
var userinfo=new Object();
userinfo.id=002;
userinfo.username="bujidao";
userinfo.sex="haishibujidao";
console.log(userinfo);
var len=Object.keys(userinfo);
console.log(len.length);
</script>
访问对象属性:
userinfo.id;
或者
userinfo["id"];
对象方法:
id=userinfo.id();
或者
id=userinfo.id;
访问对象方法
methodName : function() { code lines }
或者
objectName.methodName()
(6)null和undefined数据类型。
<script type="text/javascript">
//null和undefined数据类型
var v_null=null;
var v_undefined=undefined;
console.log(v_null);
console.log(v_undefined);
if(v_null){
console.log("true");
}else{console.log("false");}
if(v_undefined){
console.log("true");
}else{console.log("false");}
if(null==undefined){
console.log("true");
}else{console.log("false");}
if(null===undefined){
console.log("true");
}else{console.log("false");}
</script>
<script>
console.log(typeof null); //object
console.log(typeof undefined); //undefined
</script>
通过typeof
操作可以查看数据类型返回值。
null返回的是object对象类型,而undefined返回的就是undefined数据类型。
<script>
console.log(Number(null));
console.log(Number(undefined));
console.log(String(null));
console.log(String(undefined));
</script>
进行强制转化,可以看出null转化为数值为0,undefined转化为数值显示NaN为非数值类型。
(7)JavaScript保留关键字
https://www.cnblogs.com/moyuling/p/5009426.html
(8)JavaScript运算符与表达式
和C语言比较多了恒等(===)
不恒等 (!==)
三、流程控制语句
(和C语言几乎一模一样)
1.if…else…
2.switch(n){
case 1: … break;
case 2: … break;
…}
3.for循环
举个例子
<script>
for(var i=1;i<=9;i++){
var v_space=" ";
for(var j=1;j<=i;j++){
v_space+=j+"*"+i+"="+j*i+" ";
}
console.log(v_space);
}
</script>
4.break和continue
5.while语句
四、JavaScript函数
4.1)
1.函数声明定义方式
该方式是传统声明定义的方式,具体语法如下:
function 函数名(参数1,参数2,...){
//函数体内具体定义的语句
}
使用类似C语言。
2.函数表达式方式
基本语法:
var 函数名=function(参数1,参数2,...){
//函数体内定义的语句
}
其中函数名是声明语句的必需部分,其用途就如同变量一样,后面定义的函数对象会复制给这个变量。另外,function后面的函数名是可选的,即加上该函数名也不是前面传统声明定义方式中函数名了,二者功能完全不一样。
<script type="text/javascript">
var v_sum=function add(n1,n2){
return n1+n2;
};
console.log(add(1,2));
</script>
执行以上代码会在控制台输出一下信息,提示了add函数未定义,也就是说第2行中的add不是一个有效函数。
那么add是什么概念呢
<script type="text/javascript">
var v_sum=function add(n1,n2){
console.log(add);
return n1+n2;
};
console.log(v_sum(1,2));
</script>
可以看出add是function类型的对象。
3.function构造函数方式(不常用)
具体语法:
var 变量名=new Function(“参数1”,“参数2”,...,“参数n”,“函数体”);
<script type="text/javascript">
var v_sum=new Function("n1","n2","return n1+n2");
console.log(v_sum(1,2));
</script>
4.2)JavaScript系统函数
1.常规函数
alert:显示一个警告框,包括一个OK按钮。
confirm:显示一个确认对话框,包括OK和Cancel按钮。
prompt:显示一个输入对话框,提示等待用户输入。
eval:计算字符串的结果,执行JavaScript脚本代码(注意参数仅接受原始字符串)。
parseInt:将字符串转换成整形形式(可指定几进制)。
isNaN:判断是否为数字,null和true和空字符都视为0,返回数字;NaN,undefined视为非数字。
举例:
alert和confirm
var r_confirm=confirm("请确认您的选择");
if(r_confirm){
alert("ok");
}else{
alert("cancle");
}
eval:将会显示3
<script type="text/javascript">
eval("x=1;y=2;alert(eval(x+y))");
</script>
2.字符串函数
charAt:返回字符串中指定的某个字符。
stringObject.charAt(index)
//index参数为必需参数,表示字符在字符串中的下标值
indexOf:返回字符串中第一个查找到的下标index
stringObject.indexOf(searchvalue,fromindex)
//searchvalue为必需参数,表示要检索的字符串值
//fromindex为可选参数,表示从第几个字符开始
lastIndex:从右边开始查找第一个下标index
substring:用于提取字符串中结余两个指定下标之间的字符
stringObject.substring(start,stop)
//start必需,为整数
//stop可选
substr:返回字符串中指定的几个字符
stringObject.substr(start,length)
//start必需,为整数
//length可选
3.数学函数
4.数组函数
join:转化病连接数组中的所有元素为一个字符串
arrayObject.join(separator)
reverse:将数组元素颠倒
arrayObject.reverse()
sort:将数组元素重新排序
arrayObject.sort(sortby)
length:返回数组的长度
5.日期函数
<script type="text/javascript">
var date=new Date();
document.write(date.getFullYear()); //显示2019,不要用getYear
</script>
五、文档对象编程
1.基础
对于HTML标签元素,通常可以定义id,name,class,value,style属性等,通过元素名称及其属性,就可以实现对HTMLDOM的访问删除更新和插入等功能的操作。
2通过id获取DOM元素
document.getElementById(id); //注意Elements是单数,后面的都是复数
id只能编辑一次,若重复定义则只对第一个有效,同CSS。
<body>
<p id="1">
这个有效
</p>
<p id="1">
这个无效
</p>
<script type="text/javascript">
var id=document.getElementById("1");
console.log(id);
console.log(id.innerText);
</script
</body>
3.通过name获取DOM元素
document.getElementsByName(name);
name可以重复定义的。
<body>
<p name="1">
这是第一个
</p>
<p name="1">
这是第二个
</p>
<p name="1">
这是第三个
</p>
<script type="text/javascript">
var name=document.getElementsByName("1");
console.log(name);
var len=name.length;
for(var i=0;i<len;i++)
console.log(name[i].innerText);
</script
</body>
4.通过tag标签获取DOM元素对象
document.getElementsByTagName(tagname);
类似name。
5.通过class获取DOM元素对象
document.getElementsByClassName(classname);
六、表单对象模型
1.基础
表单(form)对象模拟就是表示HTML表单,在HTML文档中通过<form>
标签元素,就会创建一个form对象。
表单常用属性:id,name,action,method,target,acceptCharset,enctype。
标签常用元素的方法描述:reset,submit。
2.获取表单元素对象属性
<body>
<form id="form_id" name="form_name" action="#" method="get" target="_black">
<lable>空白表单</label>
<script type="text/javascript">
var form=document.forms["form_name"];
console.log(form.id);
console.log(form.name);
console.log(form.action);
console.log(form.method);
console.log(form.target);
</script>
</body>
3.获取表单(form)内元素方法
<body>
<form id="form_id" name="form_name" action="#" method="get" target="_black">
<lable>用户名</label>
<input type="text" value="admin"/><br><br>
<lable>密码</lable>
<input type="password" value="123456"/><br><br>
<input type="reset" value="重置"/>
<input type="submit" value="提交"/>
</form>
<script type="text/javascript">
var form=document.forms["form_name"];
var len=form.length;
console.log(len);
for(var i=0;i<len;i++)
console.log(form.elements[i].value);
</script>
</body>