您的位置：首页 > Web前端 > JavaScript

js(javaScript)学习系列--基础

2016-08-04 20:39 405 查看

学习新技术，如果是主动式学习，那么最好便是自己去看教程网页了，如果是被动学习，那么视频是不错的选择

由于在搭建个人网页之初便决定要采用nodeJS来做，那么不可避免要学习js的内容了。

w3cSchool（w3school）是个不错的选择

first：html中的脚本需要位于< script>< /script>之间，而这个这放在body 或者 head 之中

很好理解，了一认为是脚本的开始和结束，网页内容的开始和结束

第一个例子 document.write(“”)

<!DOCTYPE html>
<html>
<body>

<p>
JavaScript 能够直接写入 HTML 输出流中：
</p>

<script>
document.write("<h1>This is a heading</h1>");
document.write("<p>This is a paragraph.</p>");
</script>

<p>
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p>

</body>
</html>

后面这个提示有点意思，文档加载后使用它，啥意思？

看看这个例子

<!DOCTYPE html>
<html>
<body>

<h1>我的第一段 JavaScript</h1>

<p id="demo">
JavaScript 能改变 HTML 元素的内容。
</p>

<script>
function myFunction()
{
x=document.getElementById("demo");  // 找到元素
x.innerHTML="Hello JavaScript!";    // 改变内容
//document.write('test')
}
</script>

<button type="button" onclick="myFunction()">点击这里</button>

</body>
</html>

效果图：点击按钮前

点击按钮后

可以看到这里是点击按钮之后再执行myFunction,此时，文档肯定已经加载完毕了，soga，原来是这个意思

再看看myFunction中做了什么，先通过id获得这个元素，然后插入 hello javascript。但是这里的插入式直接替换了并不是我们认为的前后插入。

这个不就是之前说的文档加载完毕之后执行的情况吗

那么我们把注视的那行代码恢复看看

document.write('test')

点击按钮之前，还是一样，点击按钮之后，效果如下

可以看到，这就是所谓的把整个文档覆盖掉

突发奇想，用document.write()来输出一个网页，岂不是也达到了网页跳转的效果？

但是，并没能成功实现,一行一行删除代码之后发现，如果有换行，就失效了，也就是说点击按钮无效,但是可以换行，不过要在前一行的末尾加上 \ 符号

获得到这个元素之后可以做很多事情，例如

x.style.color="#ff0000" // 修改文字的颜色
x.style.background="#00FF00" // 修改背景
x.src="/i/eg_bulboff.gif" // 修改图片
x.value // 输入框输入的值(如果不是输入框呢？会变成undefined，undefined也是一个值)

style下一层又有很多属性，具体可参考链接：style属性

javaScript脚本到底是什么时候执行的呢？

一边加载一边执行？我认为是的，理由是：之前试过，如果在加载之后执行，document.wirte会把整个文档覆盖。除非之间还参杂了一个过程

javaScript需要在每一句中加上分号吗？

not necessary

如果变量重新声明会怎样？

不会改变其值，例如

var carname="Volvo";
var carname; // 值依然是"volvo"

javascript没有具体的类型，只有var？

是的，动态类型

可有科学计数法？

var y=123e5;      // 12300000
var z=123e-5;

数组怎么表示

var cars=new Array();
cars[0]="Audi";
cars[1]="BMW";
cars[2]="Volvo";
var cars=["Audi","BMW","Volvo"];

对象？

var person={firstname:"Bill", lastname:"Gates", id:5566};
var person={
firstname : "Bill",
lastname  : "Gates",
id        :  5566
};

name=person.lastname;
name=person["lastname"];

Undefined 和 Null

Undefined 这个值表示变量不含有值。

可以通过将变量的值设置为 null 来清空变量。

javascript变量都是对象吗

是的，可以职位null清空值

var carname=new String;
var x=      new Number;
var y=      new Boolean;
var cars=   new Array;
var person= new Object;

单引号和双引号有区别吗？

并没有

怎么创建一个对象

person=new Object();
person.firstname="Bill";
person.lastname="Gates";
person.age=56;
person.eyecolor="blue";

方法怎么返回一个值呢

function myFunction()
{
var x=5;
return x;
}

局部变量和全局变量

局部变量：函数内部声明的变量，使用var

全局变量：在函数外部声明的变量，网页上的所有脚本和函数都可访问，当页面关闭后，全局变量被删除

for in 循环

与java不一样的是这里的循环还多了一种这样的形式

var person={fname:"John",lname:"Doe",age:25};

for (x in person)
{
txt=txt + person[x];
}

文件外的javaScript

前面说的都是文件内的javaSript，那么文件外的呢，如何引入？

<!DOCTYPE html>
<html>
<body>

<h1>My Web Page</h1>

<p id="demo">A Paragraph.</p>

<button type="button" onclick="myFunction()">点击这里</button>

<p><b>注释：</b>myFunction 保存在名为 "myScript.js" 的外部文件中。</p>

<script type="text/javascript" src="/js/myScript.js"></script>

</body>
</html>

setTimeOut()方法用于在指定的毫秒数后调用函数或计算表达式。

语法 var t=setTimeout(“javascript语句”,毫秒)

可用clearTimeout(t) 停止

需要用引号包裹,可以单双引号，只执行一次，要循环执行，可调用方法本身或者用setInterval()

在web上显示一个时间，这个看了我很久，才看明白是个递归，不断调用获得时间

<html>
<head>
<script type="text/javascript">
function startTime()
{
var today=new Date()
var h=today.getHours()
var m=today.getMinutes()
var s=today.getSeconds()
// add a zero in front of numbers<10
m=checkTime(m)
s=checkTime(s)
document.getElementById('txt').innerHTML=h+":"+m+":"+s
t=setTimeout('startTime()',500)
}

function checkTime(i)
{
if (i<10)
{i="0" + i}
return i
}
</script>
</head>

<body onload="startTime()">
<div id="txt"></div>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航