JS basic

JavaScript is a Scripting Language

是一种轻量级的编程语言,输入web开发三大基本语言之一(除HTML和CSS外)

JavaScript code can be inserted into any HTML page, and it can be executed by all types of web browsers.

JS可以被插入到任何形式的HTML页面,被所有类型的浏览器支持。

It makes HTML pages more dynamic and interactive. 它使得网页更加动态化和交互的。

The HTML DOM (Document Object Model文本对象模型) is the official W3C standard for accessing HTML elements.

使用JS的情况:

1. manipulate the DOM (to change the content of HTML elements) 改变HTML元素的内容

<button type="button"
οnclick="document.getElementById('demo').innerHTML = 'Hello JavaScript!'">
Click Me!</button>

2. change the value of HTML attributes. 改变HTML元素属性的值,如下例,通过替换灯泡图片,实现开关灯效果。

<script>
function changeImage() {
    var image = document.getElementById('myImage');
    if (image.src.match("bulbon")) {
        image.src = "pic_bulboff.gif";
    } else {
        image.src = "pic_bulbon.gif";
    }
}
</script>

3. changing the style of an HTML element, is a variant of changing an HTML attribute. 改变HTML元素的样式,也是改变元素属性一种

x = document.getElementById("demo");  //Find the HTML element with id="demo" 
x.style.fontSize = "25px";            //Change the font size
x.style.color = "#ff0000";            //Change the color

4. validate input 验证输入

<p>Please input a number between 1 and 10:</p>
<input id="numb" type="number">
<button type="button" οnclick="myFunction()">Submit</button>
<p id="demo"></p>

<script>
function myFunction() {
    var x, text;

    // Get the value of the input field with id="numb"
    x = document.getElementById("numb").value;

    // If x is Not a Number or less than one or greater than 10
    if (isNaN(x) || x < 1 || x > 10) {
        text = "Input not valid";
    } else {
        text = "Input OK";
    }
    document.getElementById("demo").innerHTML = text;
}
</script>

Where To

To insert a JavaScript into an HTML page, use the <script> tag. 

注意:

Old examples may have type="text/javascript" in the <script> tag. This is no longer required. JavaScript is the default scripting language in all modern browsers and in HTML5.

现在已不需要在script标签里注明type属性了。

JavaScript in <head> or <body>

Scripts can be in the <body> or in the <head> section of HTML, and/or in both. 

注意放置在内容前的JS越多,用户等待内容的时间就越长,如果有无法加载的JS文件,浏览器会在N秒后才放弃,如果文件是在内容中间,这个会让流畅加载的页面突然中断N秒。

It is a good idea to place scripts at the bottom of the body element. 可以把JS代码或引用放在页面底部,This can improve page load, because HTML display is not blocked by scripts loading.

Separating HTML and JavaScript, by putting all the code in one place, is always a good habit.

同时把HTML和JS分开写是一个好习惯。

External JavaScripts

External files often contain codes to be used by several different web pages. 外部JS文件可被多个网页调用,通常以.js为后缀名。

You can place an external script reference in <head> or <body>

可以把外部JS参考放在head或者body部分,引用方法是:把外部js文件名写在<script>标签的src属性里。

<!DOCTYPE html>
<html>
<body>
<script src="myScript.js"></script>
</body>
</html>

使用外部js的好处是:

  • It separates HTML and code
  • It makes HTML and JavaScript easier to read and maintain
  • Cached JavaScript files can speed up page loads
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值