javascript1
- 课件内容改编自：
js的主要作用：DOM与BOM
浏览器对象模型 (BOM) 使 JavaScript 有能力与浏览器"对话"
HTML DOM 允许 JavaScript 改变 HTML 元素的内容
- 使用 window.alert() 弹出警告框（BOM）
<h1>我的第一个页面</h1>
<p>我的第一个段落。</p>
<script>
window.alert(5 + 6);
</script>
- 使用 document.write() 方法将内容写到 HTML 文档中。(DOM)
<h1>我的第一个 Web 页面</h1>
<p>我的第一个段落。</p>
<script>
document.write(Date());
</script>
- 使用 innerHTML 写入到 HTML 元素。(DOM)
<h1>我的第一个 Web 页面</h1>
<p id="demo">我的第一个段落</p>
<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>
##js的用法
- 写在body中
<body>
<p>
JavaScript 能够直接写入 HTML 输出流中：
</p>
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");
</script>
</body>
- 写在head中
由于js通常都只是用来完成一些触发时间，并不想例子中那样直接输出，因此其实多写在head之间而不是body中影响html代码的整体性
<html>
<head>
<meta charset="utf-8">
<script>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");
</script>
</head>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落。</p>
</body>
</html>
- 正式开发的网站项目多是引用外部js文件，外部引用也要么在head之间要么放在最后面
<html>
<head>
<meta charset="utf-8">
<script src="myScript.js"></script>
</head>
<body>
<h1>我的 Web 页面</h1>
<p id="demo">一个段落。</p>
<script src="myScript.js"></script>
</body>
</html>
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");
课间题目
1，请分别用js的head外链与body内联来实现如下显示
2，并做一个弹窗弹出一个窗口显示你的名字
作为一种普通编程语言的javascrpt
编程语言的通用语法：变量的命名与类型，输入输出；程序块：条件循环函数
基础语法
- 代码写在script中间
- var 用来声明一个变量，也可以不加，但是建议所有变量在开始创建的时候都加var
- 建议语句加分号
- 变量名字母开头
- 输出用document.write而不是print
- // 注释
<h1>js首先是一门编程语言</h1>
<p>我的第一个段落。</p>
<script>
var a=2;
c=3;
b=a+c;
document.write(b);
</script>
javascrpt的数据类型
- 字符串——可以是引号中的任意文本。您可以使用单引号或双引号
- JavaScript 只有一种数字类型。数字可以带小数点，也可以不带
- 布尔（逻辑）只能有两个值：true 或 false
- 数组[2,1,5]
- 对象a={w:9,uuu:”222”} ; a.w;a[“w”]. 注意这里键如果是字符是不用加引号的，但是调用的时候需要
var a,b;
a = "abc";
b = 8
c = 9.3
var cars = new Array();
cars[0] = "Saab";
cars[1] = "Volvo";
cars[2] = "BMW";
var car = {type:"Fiat", model:500, color:"white"};
document.write(a,b,c);
document.write(car.type);
程序块，函数，按钮，与页面数据获取
关键词 function 必须是小写的，并且必须以与函数名称相同的大小写来调用函数
<html>
<head>
<script>
function myFunction()
{
alert("Hello World!");
}
</script>
</head>
<body>
<button onclick="myFunction()">点我</button>
</body>
</html>
<p>本例调用的函数会执行一个计算，然后返回结果：</p>
<p id="demo"></p>
<script>
function myFunction(a,b){
return a*b;
}
document.getElementById("demo").innerHTML=myFunction(4,3);
</script>
课间题
1，请做一个按钮，点击后在页面输出如下显示：
2，请做一个按钮点击后弹出窗口显示你的名字
3 参考如下的例子：
http://www.runoob.com/try/try.php?filename=tryjs_blocks
http://www.runoob.com/try/try.php?filename=tryjs_intro_style
实现如下页面，使得点击相应按钮产生如下效果：
程序块与条件
- 程序块用{}来限定范围
另外一种条件：https://www.runoob.com/js/js-switch.html
var time=13;
if (time<10)
{
document.write("<b>早上好</b>");
}
if (time<10)
{
document.write("<b>早上好</b>");
}
else
{
document.write("<b>今天好</b>");
}
if (time<10)
{
document.write("<b>早上好</b>");
}
else if (time>=10 && time<16)
{
document.write("<b>今天好</b>");
}
else
{
document.write("<b>晚上好!</b>");
}
课间题
4 参考如下例子
http://www.runoob.com/try/try.php?filename=tryjs_validation_number
完成如下三次方计算页面，每当在
5 完成如上题同样的界面，只不过加入判断，如果不是数字则输出，此“这不是数字”
循环
- i++是i=i+1
- x in person并不是取person中的元素！
- 同一行不同命令用;号分割
- 注意输入法
- for 循环与while循环
cars=["BMW","Volvo","Saab","Ford"];
for (var i=0;i<cars.length;i++){
document.write(cars[i] + "<br>");
}
document.write("<br>");
for (var i=0; i<5; i++)
{
document.write(i);
}
document.write("<br>");
var person={fname:"John",lname:"Doe",age:25};
var txt="";//空字符
for (x in person) // x 为属性名，没有定义
{
txt=txt + person[x];
}
document.write(txt);
document.write("<br>");
var x="",i=0;
while (i<5){
x=x + "该数字为 " + i + "<br>";
i++;
}
document.write(x);
课间题
1，用js编写循环输出10次“加油”。
2，以标题1至标题7的格式输出“欢迎访问我的网站”（for语句）
3，用js编写循环分行输出对象(字典）{“a”:4,”b”:88,”c”:90} 中的所有值
4, 用循环与div色块完成如下显示
5，能否通过循环完成类似的照片墙的设计？
可以先实现简单一致的四方块，然后再尝试改进，比如加入标题说明等等，具体图片随意，可以先用重复图片代替
