脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-JavaScript基础语法,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。小宝典致力于为广大程序猿(媛)提供高品质的代码服务,请大家多多光顾小站,小宝典在此谢过。
一、JavaScript概述:
1.JavaScript是什么?
JavaScript是一种基于对象(内置大量现成对象)和事件驱动的解释性(事先不编译,逐行执行)脚本语言,具有与JAVA和c语言类似的语法。
它是一种网页的编辑技术,用来向HTML页面添加交互行为,直接嵌入HTML页面,由浏览器解释执行代码,不进行预编译。
PS:
(1) 脚本语言:对环境的要求比较低,无提示,可以使用任何文本编辑工具编写。不需要编译,就可以直接执行的语言。
(2) JavaScript的经历比较坎坷,它和Java没有联系,只是命名来历上比较特别而已。我们现在学的是ECMA组织维护的标准JavaScript,也就相当于是JDBC服务商,哪个公司用都可以编写自己独立的一套接口去实现。
(3) JS是由引擎执行的,并不是由浏览器执行,浏览器能执行的原因也就是浏览器内置中有执行JS的引擎。
2.使用范围
(1)客户端数据计算
(2)客户端表单合法性验证
(3)浏览器事件的触发
(4)网页特殊显示效果制作
(5)服务器的异步数据提交
二、JS程序应用
1.JS程序编写种类分为以下三种:
(1)事件定义式:
在事件定义时直接写入JS脚本代码
(2)嵌入式
使用<script>标签
(3)文件调用式
##代码位于单独的.JS文件中
##在HTML页面引入.JS文件
2.JS中代码错误时:
##JS为解释性代码,代码错误,页面中无效果显示。
三、JavaScript的基础语法
1.基本语法
由Unicode字符集编写,单行注释为//,多行注释为/* */,语句由表达式、关键字、运算符组成,大小写敏感,使用分号(推荐使用)或者换行结束。
2.标识符与关键字
2.1标识符:由不以数字开头的字母、数字、下划线和$组成,名称最好有明确的含义。
2.2标准关键字:
JavaScript语言中代表特定含义的词称为保留字,不允许程序在定义为标识符,如class、float、int等。
网页显示如下图:
Number:所有数字都采用64位浮点格式存储,不区分整型数值(默认为10进制的)和浮点型数值。
Boolean:false和true两个值,可以自动转型作为数值参与运算,运算时true=1,false=0.
优先级顺序为:字符串、数字、布尔。
3.2数据类型的隐式转换
JS中不同类型数据在计算过程中会自动进行转换。
数字+字符串:数字转换为字符串
数字+布尔值:true为1,false为0
字符串+布尔值:布尔值转换为字符串true或者false
布尔值+布尔值:布尔值转换为数字1或者0
3.3数据类型转换函数
toString:所有数据类型均可转换为String类型。
parseint:强制转换为整数,如果不能转换(不是数字),则返回NaN.
parseFloat:强制转换为浮点数,如果不能转换,返回NaN.
tyPEof:查询当前类型,返回Number、String、Boolean、object、function、undefined.
isNaN:检测表达式不是数,返回true,是数返回false.
3.4特殊类型数据
null:代表“无值”或者“无对象”,可以通过给一个变量赋null,来清空变量的内容。
undefined:声明了变量但从未赋值,对象属性不存在。
4.运算符
4.1算数运算符:+(可表示加法也可表示字符串连接)、-(可表示减法也可表示负号)、*、/、%(求余)、++(递增)、--(递减)
PS:在JAVA中5/2=2,而在JS中5/2=2.5
4.2关系运算符:>、<、==(等于)、>=、<=、!=、===(全等)、!==(不全等)
PS:全等是类型相同、数值相同,不全等返回值类型为boolean型。
4.3逻辑运算:&&、!、"|
4.4条件运算:
表达式?表达式1:表达式2
先计算表达式的值,若为true,则整个表达式的值为表达式1的值,若为false,则整个表达式的值为表达式2的值。
四、流程控制
1.控制语句
任何复杂的程序逻辑都可以通过“顺序”、“分支”、“循环”三种基本的程序结构实现。(默认为顺序)
2.分支结构(与JAVA中的语法相同)
If语句:在运行的过程中,根据不同的条件运行不同的语句。
swITh-case:根据一个整数表达式的值,从不同的程序入口开始执行。
3.循环结构
for(表达式1;表达式2;表达式3){
语句块(循环体);
}
While语句:前测试循环,退出条件是在执行循环内部的代码之前计算的,循环主体可能不被执行。
While(表达式){
语句块
}
do-while语句:是后测试循环,退出条件在执行循环内部代码之后计算的,在计算表达式之前,至少会执行循环主体一次。
do{
语句块
}while(表达式)
4.JS中的条件表达式
Java中的表达式必须返回boolean值
Js中的表达式可以是任意表达式,也就是返回任何类型的值。
一切表示空的值,均为false.
小案例:
1.计算平方。代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>计算平方</title>
<script>
function pf() {
//打桩,在控制台调试(F12)查看是否有输出
console.LOG(1);
//获取文本框
VAR input=document.getElementById("num");
//获取span
var span=document.getElementById("result");
//打桩
console.log(input);
console.log(span);
//从文本框中取值
var n=input.value;
console.log(n);
//判断该值是否是数字
if(isNaN(n)){
//返回true,则不是数字,给予提示
span.innerHTML="请输入数字";
}else{
//是数字,计算平方后写入span
//文本框中读到的内容均为字符串,但是此处不需要转型,因为此处是乘法,字符串没有乘法,
//所以JS就会认为是数字,自动会转为数字运算,如果此处为加法,字符串也有加法,则必须进行强转。
span.innerHTML=n*n;
}
}
</script>
</head>
<body>
<input type="text" id="num"/>
<input type="button" value="平方" onclick="pf();"/>
= <span id="result"></span>
</body>
</html>
网页展示:
补充内容:
(1)从表单控件(input/select/textare)中读写数据
读:input.value;
写:input.value=“值”;
PS:读框、读值如,<input type=“text”/>
(2)从文本(h/p/p/span……)中读写数据
读:span.innerHTML;
写:span.innerHTML=“值”;
PS:读内容,如<p>xxx</p>、<span>aaa</span>
(3)如何获取元素
document.ElementById(“id”);
##JS调试技巧
(1)看控制台的报错信息。
(2)打桩:看程序执行的步骤,看每一步变量的值。
(3)二分法+排除法,定位错误位置。
2.猜数字游戏,代码展示如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>猜数字</title>
<script>
//在页面加载时,在body加载前,就生成随机数(0-99)
var ranNum=parseInt(Math.random()*100);
function guess() {
//打桩
//console.log(ranNum);
//获取文本框和span
var input=document.getElementById("num");
var span=document.getElementById("result");
//打桩
console.log(input);
console.log(span);
//获取框中的值
var n=input.value;
//判断该值是否为数字
if(isNaN(n)){
//不是数字,给予提示
span.innerHTML="请输入数字";
}else{
//是数字,和随机数比较
if(n>ranNum){
span.innerHTML="大了";
}else if(n<ranNum){
span.innerHTML="小了";
}else{
span.innerHTML="对了";
}
}
}
</script>
</head>
<body>
<input type="text" id="num"/>
<input type="button" value="猜"
onclick="guess();"/>
<span id="result"></span>
</body>
</html>
网页显示如下:
3.计算阶乘。代码如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>计算阶乘</title>
<script>
function jc() {
var input=document.getElementById("num");
var span=document.getElementById("result");
console.log(input);
console.log(span);
var n=input.value;
if(isNaN(n)"|n<1){
//若不是数或者小于1,则给予提示
span.innerHTML="请输入大于0的整数";
}else{
//是大于1的数,则计算阶乘。
var s=1;
for(var i=n;i;i--){
s*=i;
}
span.innerHTML=s;
}
}
</script>
</head>
<body>
<h1>n的阶乘=1*2*3*4*5......*n</h1>
<input type="text" id="num">
<input type="button" value="计算"
onclick="jc();"/>
= <span id="result"></span>
</body>
</html>
网页显示如下:
觉得可用,就经常来吧! 脚本宝典 欢迎评论哦! js脚本,巧夺天工,精雕玉琢。小宝典献丑了!
以上是脚本宝典为你收集整理的javascript代码实例教程-JavaScript基础语法全部内容,希望文章能够帮你解决javascript代码实例教程-JavaScript基础语法所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。