Unit04: JavaScript 概述 、 JavaScript 基础语法 、 流程控制
Unit04: JavaScript 概述 、 JavaScript 基础语法 、 流程控制
my.js
function f3() {
alert("唐胜伟");
}
demo1.html 演示点击按钮,弹出提示框
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 2.嵌入式:在script标签里写js.
该标签可以写在网页任意位置,但通常写在head里. -->
<script>
//js的注释是这样的
/*也可以是这样的*/ //js函数的规则:
//1.js的函数都是公有的
//2.js的函数不用声明返回值类型
//3.js的函数可以声明参数
function f2() {
//js中不区分单引号和双引号
alert("范传奇");
}
</script>
<!-- 3.文件调用式:在单独的js文件中写JS.
将文件引入就相当于将文件内的代码复制到此处.
注意:script不能既引入js又写js. -->
<script src="my.js"></script>
</head>
<body>
<!--
事件:就是用户的操作/动作,也是js被
调用的时机.如:单击事件、双击事件.
-->
<!-- 1.事件定义式:在定义事件时直接写js. -->
<input type="button" value="按钮1"
onclick="alert('苍老师');"/>
<input type="button" value="按钮2"
onclick="f2();"/>
<input type="button" value="按钮3"
onclick="f3();"/>
</body>
</html>
demo2.html js的数据类型及转换
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
//1.此处写的函数是在页面加载后,用户点击按钮时才调用的.
//2.若此处不写函数,直接写js代码,则该代码在页面加载时直接调用,其调用时机比body还早.
//alert(1);
console.log("控制台打印"); //1.声明变量
var x;
console.log(x);
var y=2;
console.log(y);
//2.数据类型
var s = "Hello";
var n = 3.14;
var b = true;
//3.隐式转换
console.log(s+n);
console.log(s+b);
console.log(n+b);
console.log(b+b);
//4.强制转换
console.log(parseInt("2.5"));
console.log(parseInt("3.6"));
console.log(parseInt("abc"));
//输出变量类型
console.log(typeof(s));
console.log(typeof(n));
//NaN
console.log(isNaN(s));
console.log(isNaN(n));
console.log(isNaN(b));
//5.特殊情况
console.log(parseInt(""));
//不能转换成数字1
console.log(parseInt(true));
console.log(isNaN(""));
console.log(isNaN(true));
//6.运算符
var a = "3";
var b = 3;
console.log(a==b);
console.log(a===b);
//7.条件表达式
//js中可以用布尔值做条件,也可以用非布尔值做条件,
//在使用非布尔值做条件时有一个原则:
//一切非空的值等价余true,一切空值等价于false.
//共5个空值:undefined,NaN,null,"",0
//这样设计的目的是为了简化判断条件
var p =9;
if(p){
console.log("非空");
}
//还有更萎缩的
var k = 8;
k && console.log("ok");
</script>
</head>
<body>
<p>js的语法和JAVA极为相似!</p>
</body>
</html>
demo3.html 使用js实现计算平方小例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
function pf() {
console.log(1);
//获取文本框
var input = document.getElementById("num");
console.log(input);
//获取文本框内的值
var n = input.value;
console.log(n);
//获取span
var span = document.getElementById("result");
//判断该值是不是数字
if(isNaN(n)) {
//不是数字,span里给予提示
span.innerHTML = "请输入数字";
} else {
//是数字,计算其平方,结果写入span
span.innerHTML = n*n;
}
}
</script>
</head>
<body>
<input type="text" id="num"/>
<input type="button" value="平方"
onclick="pf();"/>
= <span id="result"></span>
</body>
</html>
demo3.html
demo4.html 使用js实现猜数字小游戏
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
//页面加载时生成随机整数,即在用户未
//看到body中的内容时就生成了该整数.
var ran = parseInt(Math.random()*100); function guess() {
//获取文本框内的值
var n =
document.getElementById("num").value;
//获取span
var span = document.getElementById("result");
//判断是否为数字
if(isNaN(n)) {
span.innerHTML = "请输入数字";
} else {
if(n<ran) {
span.innerHTML = "小了";
} else if(n>ran) {
span.innerHTML = "大了";
} else {
span.innerHTML = "对了";
}
}
} </script>
</head>
<body>
<input type="text" id="num"/>
<input type="button" value="猜"
onclick="guess();"/>
<span id="result"></span>
</body>
</html>
demo4.html
demo5.html 使用js实现阶乘小例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script>
function jc() {
var n =
document.getElementById("num").value;
var span =
document.getElementById("result");
if(isNaN(n)) {
span.innerHTML = "请输入数字";
} else {
if(n<0) {
span.innerHTML = "负数没有阶乘";
} else if(n==0) {
span.innerHTML = 1;
} else {
var s = 1;
for(var i=n;i;i--) {
s *= i;
}
span.innerHTML = s;
}
}
}
</script>
</head>
<body>
<p>1.负数没有阶乘</p>
<p>2.0的阶乘是1</p>
<p>3.正整数n的阶乘=1*2*...*n</p>
<p>
<input type="text" id="num"/>
<input type="button" value="阶乘"
onclick="jc();"/>
= <span id="result"></span>
</p>
</body>
</html>
demo5.html
demo6.html 用户登录验证小例子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.ok{color:green;}
.error{color:red;}
</style>
<script>
//验证账号的格式
function checkCode() {
console.log(1);
//获取账号
var code =
document.getElementById("code").value;
//获取span
var span =
document.getElementById("code_msg");
//验证账号格式
var reg = /^\w{5,10}$/;
if(reg.test(code)) {
span.className = "ok";
} else {
span.className = "error";
}
}
//验证密码格式
function checkPwd() {
var pwd =
document.getElementById("pwd").value;
var span =
document.getElementById("pwd_msg");
var reg = /^\w{10,15}$/;
if(reg.test(pwd)) {
span.className = "ok";
} else {
span.className = "error";
}
}
</script>
</head>
<body>
<form action="http://www.tmooc.cn">
<p>
账号:<input type="text" id="code"
onblur="checkCode();"/>
<span id="code_msg">5-10位字母、数字、下划线</span>
</p>
<p>
密码:<input type="password" id="pwd"
onblur="checkPwd();"/>
<span id="pwd_msg">10-15位字母、数字、下划线</span>
</p>
<p><input type="submit" value="登录"/></p>
</form>
</body>
</html>
demo6.html
Unit04: JavaScript 概述 、 JavaScript 基础语法 、 流程控制的更多相关文章
- JavaScript学习02 基础语法
JavaScript学习02 基础语法 JavaScript中很多基础内容和Java中大体上基本一样,所以不需要再单独重复讲了,包括: 各种算术运算符.比较运算符.逻辑运算符: if else语句.s ...
- Go语言基础之流程控制
Go语言基础之流程控制 流程控制是每种编程语言控制逻辑走向和执行次序的重要部分,流程控制可以说是一门语言的“经脉”. Go语言中最常用额流程控制有if和for,而switch和goto主要是为了简化代 ...
- Java 基本语法---流程控制
Java 基本语法---流程控制 0. 概述 三大流程控制语句:顺序.选择.循环. 选择结构: if 结构,if - else结构: 多重 if - else 语句 ; 嵌套 if - else 语句 ...
- Java基础-程序流程控制第二弹(循环结构)
Java基础-程序流程控制第二弹(循环结构) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 流程控制有三种基本结构:顺序结构,选择结构和循环结构.一个脚本就是顺序结构执行的,选择结 ...
- Java基础-程序流程控制第一弹(分支结构/选择结构)
Java基础-程序流程控制第一弹(分支结构/选择结构) 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.if语句 1>.if语句的第一种格式 if(条件表达式){ 语句体: ...
- 前端学习笔记--js概述与基础语法、变量、数据类型、运算符与表达式
本篇记录js的概述与基础语法.变量.数据类型.运算符与表达式 1.概述与基础语法 2.变量 举例: 3.数据类型 4.运算符与表达式
- JAVA入门基础及流程控制
JAVA入门基础及流程控制 数据类型 位 存储单位 eg:0001 0011 八位 字节 byte 处理数据单位 一字节等于八位 eg:1b=0011 0001 类变量: static int num ...
- GO语言学习——Go语言基础之流程控制一
Go语言基础之流程控制 if else(分支结构) package main import "fmt" // if条件判断 func main(){ // age := 19 // ...
- javascript 概述及基础知识点(变量,常量,运算符,数据类型)
JavaScript概述 1.1 什么是JavaScript: javaScript(简称js),是一种基于对象和事件驱动并具有相对安全性的客户端脚本语言.同时也是一种广泛用于客户端Web开发的脚本语 ...
- JavaScript学习笔记-基础语法、类型、变量
基础语法.类型.变量 非数字值的判断方法:(因为Infinity和NaN他们不等于任何值,包括自身) 1.用x != x ,当x为NaN时才返回true; 2.用isNaN(x) ,当x为NaN或 ...
随机推荐
- 探究JS中的连等赋值问题
一.引子 最近在看别人的博客时无意中看到一个这样的问题 var a = {n: 1}; var b = a; a.x = a = {n:2}; console.log(a.x); //undefine ...
- 在 Bash on Ubuntu 上安装Nginx
前言 Win10 上的 Bash on Ubuntu 是个很好用的玩具,让windows开发环境下的人能无缝操练Linux,但是涉及到网络部分还是有很多要该进的地方,比如Nginx的安装就遇到了问题. ...
- python3 堆排序
思路: 1.建立堆 2.得到堆顶元素,为最大元素 3.去掉堆顶,将堆最后一个元素放到堆顶,此时可通过一次调整重新使堆有序. 4.堆顶元素为第二大元素. 5.重复步骤3,直到堆变空. 动画 代码: de ...
- Composer 安装东西遇到github需要token怎么办
安装yii2遇到这样的提示: Could not fetch https://api.github.com/repos/jquery/sizzle/contents/bower.json?ref=91 ...
- yii2 联系我们发送邮件报错
为什么会报错,因为国内的邮件服务商要求发送邮件的人和设置的smtp服务器账号要相同,因为联系我们的是用户,也就是发件人是用户,而不是我们配置的邮箱,所有出错. 这里我用了个取巧的办法,发件人改为自己, ...
- 剑指offer--47.数据流中的中位数
时间限制:1秒 空间限制:32768K 热度指数:122511 算法知识视频讲解 题目描述 如何得到一个数据流中的中位数?如果从数据流中读出奇数个数值,那么中位数就是所有数值排序之后位于中间的数值.如 ...
- cscope使用记录
在看c的源码过程中,仅仅使用ctags不够用,加入cscope会好一点,关于vim的配置就不多说了,在这里主要是记录常用的几个东西: 在代码的最顶层执行: cscope -Rbkq 打开vim: cs ...
- [置顶]
kubernetes1.7新特性:日志审计变化
背景概念 出于安全方面的考虑,Kubernetes提供了日志审计记录,用来记录不同普通用户.管理员和系统中各个组件的日志信息. Kubernetes日志审计是Kube-apiserver组件的一部分功 ...
- tcp流式套接字和udp数据报套接字编程区别
1. 流式套接字采用字节流方式进行传输,而数据报套接字 使用数据报形式传输数据2. tcp套接字会产生粘包,udp有消息边界,不会形成粘包.3. tcp编程可以保证消息的完整性,udp则不能保证4. ...
- 【angular之起步】安装
人生只有眼前的苟且. 所以为了远方,最近在策划一个大阴谋------做一个自己的网站,杂而全的. 各种胡思乱想了一周,先把页面写完了,没辙,就这个不用费太多脑子. 然后开始重头戏,就卡死了. angu ...