JavaScript历史
- HTML页面缺乏交互性
- 造成带宽、时间和服务器资源的浪费
- 前端加入基本的检查：登录名、密码是否为空，两次密码输入是否一致...
JavaScript代码嵌入在HTML中
<script> ... </script>
- 浏览器加载页面时执行代码，代码的动态输出和HTML的静态内容进行集成
- 可以在用户输入提交给远程服务器之前进行验证
JavaScript语法
1、动态数据集成
document.write：向文档流写入HTML表达式或JavaScript代码
<html>
<head>
<title>JavaScript Page</title>
</head>
?
<body>
<script type="text/javascript">
document.write("<p>Hello world!</p>");
document.write("<p>输出 HTML 标签没压力" +"<i>hello world</i>?</p> ");
</script>
<p> 这是一些静态内容。 </p>
</body>
</html>
2、数据类型和表达式
数据类型
- String
- Number
- Boolean
变量
- 变量名由字母、数字和下划线组成
- 变量名区分大小写
- 不需要声明变量名，变量第一次使用时会创建（JavaScript不检查变量的类型）
<html>
<head>
<title>Data Types and Variables</title>
</head>
?
<body>
<script type="text/javascript">
var x, y;
x= 1024;
y=x;
x = "foobar";
document.write("<p>x = " + y + "</p>");
document.write("<p>x = " + x + "</p>");
</script>
</body>
</html>
3、控制语句
<!--将一张纸持续对折，在纸张的厚度达到从地面到太阳的距离之前，需要折叠多少次？-->
<body>
<script type="text/javascript">
var distanceToSun = 93.3e6*5280*12;
var thickness = .002;
var foldCount = 0;
while (thickness < distanceToSun) {
thickness *= 2;
foldCount++;
}
document.write(" 共需要折 <b>" + foldCount +"</b> 次。 ");
</script>
</body>
4、字符串对象
<script> var txt = "Hello";
document.write(txt.length+"</br>"); // 属性
document.write(txt.replace(‘e‘,‘i‘)+"</br>")//封装函数
document.write(txt.search(‘l‘));
</script>
5、交互式弹窗
prompt(message, value)
- 参数：
- message 对话框中显示的提示消息
- value 出现在框中的默认值
- 返回：用户输入的值（字符串类型）
- 如果value是数字，使用parseFloat(parselnt)进行转换
<body>
<script type="text/javascript">
var userName = prompt(" 请输入姓名： ", " 小明 ");
var userAge = prompt(" 请输入年龄： ", "20");
var userAge = parseFloat(userAge);
if (userAge < 18) {
document.write("<h1> 未成年人适度上网！ </h1>");
}
else {
document.write("<h1> 欢迎你， "+userName+" ！ </h1>");
}
</script>
<p>The rest of the page...</p>
</body>
6、Math对象
- 内置的Math对象包含函数和常量
| Math.sqrt | Math.pow | Math.abs | Math.max | Math.min |
| Math.floor | Math.cell | Math.round | Math.PI | Math.E |
| Math.random（返回0到1的实数） | ||||
<body>
<div style="text-align:center">
<script type="text/javascript">
var roll1 = Math.floor(Math.random()*6) + 1;
var roll2 = Math.floor(Math.random()*6) + 1;
document.write("<img src=‘die" + roll1 + ".gif‘/>");
document.write(" ");
document.write("<img src=‘die" + roll2 + ".gif‘/>")
</script>
</div>
</body>
<!--Math.floor(Math.random()*6) 0-5-->
7、eval函数：计算某个字符串，并执行其中的JavaScript代码
<script>
eval("x=10;y=20;document.write(x*y)");
document.write("<br>" + eval("2+2"));
document.write("<br>" + eval(x+17));
</script>
字符串传递给一个接口，。。。需要eval？？？
原文地址：https://www.cnblogs.com/tianjiazhen/p/12235543.html
时间： 2024-08-30 13:14:30