JavaScript的基本语法

来源：互联网发布：wap彩票网站源码编辑：程序博客网时间：2024/05/21 22:34

一.JavaScript的简单介绍
1.JavaScript是一种网页编程技术，用来向HTML页面添加交互行为，
是嵌入HTML中在浏览器中的脚本语言
2.JavaScript的发展史：最早由网景公司推出，现在由ECMA组织维护JavaScript标准。
3.JavaScript特点：可以使用任何文本编辑工具编写，事先不编译，逐行执行，
应用范围：客户端数据计算，客户端表单合法性验证，浏览器事件的触发，
网页特殊显示效果制作，服务器的异步数据提交

二.JavaScript的使用
1.JavaScript书写的三种方式：
（1）事件定义式：在定义事件时直接书写js
<input type="button" value="按钮1" onclick="alert('hello');">
（2）嵌入式：在script标签内书写js
<script>function f2(){alert("How are you");}</script>
<input type="button" value="按钮2" onclick="f2();">
（3）文件调用式：代码位于单独的.js文件中，html页面引用.js文件
function f3(){alert("Thank you");}
<script src=".js"></script>
<input type="button" value="按钮3" onclick="f3();">

2.JavaScript的基础语法
（1）基本格式：注释跟java一样——单行，多行，大小写敏感，单双引号跟html用法一致
（2）标识符：标识符跟java变量命名规则一致，变量声明统一用var关键字,函数function
（3）运算规则（可以用三目运算法，大部分java一致）：
boolean类型自行或者跟数值型运算时，true为1；false为0，除法不一样，JS中5/2=2.5
等于不一样，==和!=是判断数值是否相同无关于类型，如：var a="10",var b=10,a==b
全等和不全等（类型相同，数值相同）：===，!==，如：var a=10,var b=10,a===b

（4）可用函数：toString，parseInt，parseFloat，
typeof（返回值是当前类型），isNaN（返回boolean型，不是数返回true）
（5）数据类型：
特殊类型：undefined（未赋值）null（空）
内置对象（基本类型）：Number，String，Boolean，Function，Array
外部对象：window（浏览器对象），document（文档对象）
自定义对象：Object

（6）流程控制：跟java一致，顺序，分支跟循环三种程序结构实现
分支结构：if语句，switch-case语句
循环结构：for语句，while语句，do-while语句
JS中的特殊条件表达式：false:0,null,"",undefined,NaN（空值），true:"非空"值

基础语法Demo1如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>js基本语法</title><script>//此处写js有2种形式：//1）封装成函数，则该函数是在页面加载完成后//在用户点击按钮时调用的。//2）直接书写js，则该js代码是在页面加载过程中，//直接调用的，其调用时机甚至比body还早。//alert(1);console.log("控制台打印");//1.声明变量var x;console.log(x);x=6;console.log(x);var y = 8;console.log(y);//2.隐式转换var s="hello";var n=3.14;var b=true;console.log(s+n);console.log(s+b);console.log(n+b);console.log(b+b);//3.强制转换console.log(parseInt(3.14));console.log(parseInt("5.6"));console.log(parseInt("abc"));console.log(parseInt(""));//是NaN//4.判断类型console.log(typeof(n));console.log(typeof(b));console.log(isNaN("32"));console.log(isNaN("abc"));console.log(isNaN(""));//是数字</script></head><body><p>js语法和Java很相似</p></body></html>

结果如下：

计算平方Demo2如下：

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>计算平方</title><script>function square(){//获取文本框var input = document.getElementById("num");//获取框内的值var n = input.value;//获取spanvar span = document.getElementById("result");//判断该值是不是数字if(isNaN(n)){//不是数字，在span中给予提示span.innerHTML = "请输入数字";}else{//是数字，计算其平方，并写入spanspan.innerHTML = n*n;}}</script></head><body><input type="text" id="num"><input type="button" value="平方" onclick="square();">= <span id="result"></span></body></html>

结果如下：

阅读全文

0 0