Html和Css带给用户视觉感受，那么JavasScritp就是完成了用户和页面的交互。
比如：用户名提交，进行为空判断。
语法介绍
1、输出
<script>
document.write("hello world")
</script>
2、注释
// 单行注释
/**/ 多行注释
3、变量
var a = 10
4、调试
alert()
console.log()
5、基本数据类型
undefined：申明但未赋值
Boolean：布尔类型
Number：数字
String：字符串
null：空对象
6、转换
<body>
<script>
var a = 8
document.write("1转字符串："+a.toString())
document.write("</br>")
document.write("1转二进制："+a.toString(2))
document.write("</br>")
document.write("转换为数字"+parseInt("10abc9"))
</script>
</body>
7、函数
<body>
<script>
//无参
function print(){
document.write("打印")
}
print()
//有参
function print1(message){
document.write(message)
}
print1("有参")
//有参有返回
function print2(x,y){
return x+y;
}
var num= print2(3,4)
document.write(num)
</script>
</body>
8、
案例（显示和隐藏）
<!--
document.getElementById表示根据文本id获取内容
.style.display.none 隐藏
.style.display.block 显示
-->
<button onclick="document.getElementById('text').style.display='none'">隐藏</button>
<button onclick="document.getElementById('text').style.display='block'">显示</button>
<p id="text">文本</p>
案例二（加法器）
<body>
<script>
function count(){
var a = document.getElementById("num1").value
var b=document.getElementById("num2").value
a=parseInt(a)
b=parseInt(b)
var c = a + b
document.getElementById('num3').value=c;
}
</script>
<input type="text" id="num1"/>+
<input type="text" id="num2"/>=
<input type="text" id="num3"/>
<button onclick="count()">运算</button>
</body>
案例三（生成器）
<body>
<script>
function result(){
var address=document.getElementById("address").value;
var type=document.getElementById("type").value;
var name=document.getElementById("name").value;
var username=document.getElementById("username").value;
var money=document.getElementById("money").value;
var product=document.getElementById("product").value;
var price=document.getElementById("price").value;
var areat = address+type+name+"的老板"+username+"卖"+product+"，一款"+money+price;
document.getElementById("areat").value=areat;
}
</script>
<table border="1px" align="center">
<tr>
<td>
<input type="text" readonly="readonly" value="地名："/>
<input type="text" id="address" />
<input type="text" readonly="readonly" value="公司类型："/>
<input type="text" id="type" />
</td>
</tr>
<tr>
<td>
<input type="text" readonly="readonly" value="公司名称："/>
<input type="text" id="name" />
<input type="text" readonly="readonly" value="老板姓名："/>
<input type="text" id="username" />
</td>
</tr>
<tr>
<td>
<input type="text" readonly="readonly" value="金钱："/>
<input type="text" id="money" />
<input type="text" readonly="readonly" value="产品："/>
<input type="text" id="product" />
</td>
</tr>
<tr>
<td>
<input type="text" readonly="readonly" value="价格计量单位："/>
<input type="text" id="price" />
<button onclick="result()">生成</button>
</td>
</tr>
<tr>
<td>
<textarea rows="5px" cols="100px" id="areat"></textarea>
</td>
</tr>
</table>
</body>
image.png
网友评论