1、变量

1.必须以字母、下划线或美元符号开头,后面可以跟字母、下划线、美元符号和数字。

2.变量名区分大小写,如:A与a是两个不同变量。

3.不允许使用JavaScript关键字和保留字做变量名。

声明变量语法: var 变量名;

变量赋值:

变量是无所不能的容器,你可以把任何东西存储在变量里,如数值、字符串、布尔值等

表达式:

表达式与数学中的定义相似,表达式是指具有一定的值、用操作符把常数和变量连接起来的代数式。一个表达式可以包含常数或变量。

+号操作符

(1)操作符

看下面这段JavaScript代码。

sum = numa + numb;

其中的"=""+"都是操作符。

JavaScript中还有很多这样的操作符,例如,算术操作符(+、-、*、/等),比较操作符(<、>、>=、<=等),逻辑操作符(&&、||、!)。

注意: “=” 操作符是赋值,不是等于。

(2) "+"操作符

算术运算符主要用来完成类似加减乘除的工作,在JavaScript中,“+”不只代表加法,还可以连接两个字符串

2、事件

JavaScript 创建动态页面。事件是可以被 JavaScript 侦测到的行为。 网页中的每个元素都可以产生某些可以触发 JavaScript 函数或程序的事件。

比如说,当用户单击按钮或者提交表单数据时,就发生一个鼠标单击(onclick)事件,需要浏览器做出处理,返回给用户一个结果

鼠标单击事件( onclick ):

鼠标经过事件(onmouseover):

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> 鼠标经过事件 </title>
<script type="text/javascript">
function message(){
confirm("请输入密码后,再单击确定!"); }
</script>
</head>
<body>
<form>
密码:<input name="password" type="password" onmouseover="message()">
<input name="确定" type="button" value="确定"/>
</form>
</body>
</html>

失焦事件(onblur):

<script type="text/javascript">
function message(){
alert("请确定已输入密码后,在移开!"); }
</script>
</head>
<body>
<form>
用户:<input name="username" type="text" value="请输入用户名!" >
密码:<input name="password" type="text" value="请输入密码!" onblur="message()">

内容选中事件(onselect):

选中事件,当文本框或者文本域中的文字被选中时,触发onselect事件,同时调用的程序就会被执行

加载事件:

事件会在页面加载完成后,立即发生,同时执行被调用的程序。
注意:1. 加载页面时,触发onload事件,事件写在<body>标签内。

2. 此节的加载页面,可理解为打开一个新页面时。
如下代码,当加载一个新页面时,弹出对话框“加载中,请稍等…”

<!DOCTYPE html>
<html>
<head>
<title> 事件</title>
<script type="text/javascript">
function count(){ //获取第一个输入框的值
var txt1 = document.getElementById("txt1").value;
//获取第二个输入框的值
var txt2 = document.getElementById("txt2").value;
//获取选择框的值
var select = document.getElementById("select").value; var result = "";
//获取通过下拉框来选择的值来改变加减乘除的运算法则
switch(select){
case "+":
result = parseInt(txt1)+parseInt(txt2);
break;
case "-":
result = parseInt(txt1)-parseInt(txt2);
break;
case "*":
result = parseInt(txt1)*parseInt(txt2);
break;
default:
result = parseInt(txt1)/parseInt(txt2);
}
//设置结果输入框的值
document.getElementById("fruit").value=result;
}
</script>
</head>
<body>
<input type='text' id='txt1' />
<select id='select'>
<option value='+'>+</option>
<option value="-">-</option>
<option value="*">*</option>
<option value="/">/</option>
</select>
<input type='text' id='txt2' />
<input type='button' value=' = ' onclick="count()"/> <!--通过 = 按钮来调用创建的函数,得到结果-->
<input type='text' id='fruit' />
</body>
</html>

javaScript-进阶篇(一)的更多相关文章

  1. #笔记#JavaScript进阶篇一

    #JavaScript进阶篇 http://www.imooc.com/learn/10 #认识DOM #window对象 浏览器窗口可视区域监测—— 在不同浏览器(PC)都实用的 JavaScrip ...

  2. 4、JavaScript进阶篇①——基础语法

    一.认识JS 你知道吗,Web前端开发师需要掌握什么技术?也许你已经了解HTML标记(也称为结构),知道了CSS样式(也称为表示),会使用HTML+CSS创建一个漂亮的页面,但这还不够,它只是静态页面 ...

  3. JavaScript进阶篇 - -第1章 系好安全带

    第1章 系好安全带 html,body { font-size: 15px } body { font-family: Helvetica, "Hiragino Sans GB", ...

  4. 6、JavaScript进阶篇③——浏览器对象、Dom对象

    一.浏览器对象 1. window对象 window对象是BOM的核心,window对象指当前的浏览器窗口. window对象方法: 注意:在JavaScript基础篇中,已讲解了部分属性,windo ...

  5. Javascript进阶篇——总结--DOM案例+选项卡效果

    断断续续的把慕课的JavaScript基础和进阶看完了,期间不怎么应用有的都忘记了,接下来多开始写些效果,进行实际应用. 制作一个表格,显示班级的学生信息. 1. 鼠标移到不同行上时背景色改为色值为 ...

  6. javascript 进阶篇1 正则表达式,cookie管理,userData

    首先,什么事正则表达式呢,其实引入概念很多时候并不能帮我们明白它到底是什么,所以我先简单描述下,正则表达式,其实就是一个记录字符串规则则的字符串,等我们看完这一部分,也就能明白它到底是什么了. 基本语 ...

  7. 慕课网javascript 进阶篇 第九章 编程练习

    把平常撸的码来博客上再撸一遍既可以加深理解,又可以理清思维.还是很纯很纯的小白,各位看官老爷们,不要嫌弃.最近都是晚睡,昨晚也不例外,两点多睡的.故,八点起来的人不是很舒服,脑袋有点晕呼呼,鉴于昨晚看 ...

  8. JavaScript进阶篇QA总结

    Q1:常用的运算符有哪些?他们的优先级是怎样的?A1:1.算术运算符:加(+).减(-).乘(×).除(÷),自加一(++),自减一(--):2.比较运算符:大于(>).小于(<).大于等 ...

  9. 二、JavaScript语言--JS基础--JavaScript进阶篇--选项卡切换效果

    利用JavaScript知识,实现选项卡切换的效果. 效果图: 文字素材: 房产: 275万购昌平邻铁三居 总价20万买一居     200万内购五环三居 140万安家东三环     北京首现零首付楼 ...

  10. 二、JavaScript语言--JS基础--JavaScript进阶篇--DOM对象 控制HTML元素

    1.认识DOM 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节点树). 先来看看下面 ...

随机推荐

  1. CSS3 - 鼠标移入移出时改变样式

    1,使用伪类实现样式切换伪类是CSS2.1时出现的新特性,让许多原本需要JavaScript才能做出来的效果使用CSS就能实现.比如实现下面的鼠标悬停效果,只要为:hover伪类应用一组新样式即可.当 ...

  2. PHP面试题总结

    2017年5月15日19:20:26 1.请用最简单的语言告诉我PHP是什么? PHP全称:Hypertext Preprocessor,是一种用来开发动态网站的服务器脚本语言. 2. 面试题地址:h ...

  3. 关于IIS上Yii2的Url路由美化

    Yii2默认的路由是酱紫的 http://.../admin/web/index.php?r=site/login 心中理想的美化Url应该这样  http://.../admin/web/site/ ...

  4. A/B测试与灰度发布

    1.A/B测试与灰度发布的理论 产品是多维度的,设计体验.交互体验.系统质量.运营支持等等, 测试的目的是为了系统最终的交付,一套各方面都足够好的系统,而不是文档上定义的系统,系统是需要不断进化的. ...

  5. hdu_1226超级密码(BFS)

    超级密码 Problem Description Ignatius花了一个星期的时间终于找到了传说中的宝藏,宝藏被放在一个房间里,房间的门用密码锁起来了,在门旁边的墙上有一些关于密码的提示信息:密码是 ...

  6. 京东android面试题(2018 顶级互联网公司面试题系列)

    以下来自于北京的一个兄弟的面试题 1.静态内部类和非静态内部类有什么区别  2.谈谈你对java多态的理解  3.如何开启线程,run和runnable有什么区别  4.线程池的好处  5.说一下你知 ...

  7. 为什么要对url进行encode

    发现现在几乎所有的网站都对url中的汉字和特殊的字符,进行了urlencode操作,也就是: http://hi.baidu.com/%BE%B2%D0%C4%C0%CF%C8%CB/creat/bl ...

  8. SSAS(SQL Server 分析服务)、***S(SQL Server报表服务)、SSIS(SQL Server集成服务)

    一.数据仓库入门 实验手册 1. 创建数据源  http://jimshu.blog.51cto.com/3171847/13366622. 创建数据源视图 http://jimshu.blog.51 ...

  9. Linux入门基础(四)——磁盘管理

  10. Java实现时间日期格式转换示例

    package com.hanqi.util; import java.text.ParseException; import java.text.SimpleDateFormat; import j ...