<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!-- javaScript
01.ECMAScript:描述了语言的语法以及基本对象！
02.DOM（文档对象模型）：处理网页内容的方法或者接口！
03.BOW(浏览器对象模型)：与浏览器进行交互的方法或者接口！
特点：
01.无需预编译
02.运行在客户端
-->
<script type="text/javascript">
document.write("hello javaScript!");
</script>
</head>
<body>
</body>
</html>
使用js在浏览器中输出内容
<!DOCTYPE html>
<head lang="en">
<meta charset="UTF-8">
<title>引入js外部文件</title>
<!-- 如果引入的外部js是其他的编码格式 则需要 设置 charset属性
script标签 不允许 自身闭合
<script type="text/javascript" src="js/first.js"></script>
js代码 和 页面内容的执行 是有先后 顺序的！
-->
<script type="text/javascript">
alert('您好！hello!');
</script>
</head>
<!--body onload="alert('您好！hello!')"-->
<body>
哈哈！ 验证是先看到哈哈！还是先弹出框......
</body>
</html>
3种方式引入js文件
需要的外部文件
<button type="button" onclick="alert('您触发了点击事件')">点击之后弹出提示框</button>
<input type="text" placeholder="请输入email" onfocus="alert('您触发了获取焦点事件')"
onblur="alert('您触发了失去焦点事件')">
<!DOCTYPE html>
<head lang="en">
<meta charset="UTF-8">
<title>变量的使用</title>
<script type="text/javascript">
/* 声明变量*/
var name='小黑';
var age=50;
var address='北京海淀';
var date=new Date();
/*输出语句*/
alert("姓名==》"+name+"\n年龄===》"+age+"\n住址===》"+address);
/* document属于window对象 是浏览器对象模型 所以换行应该使用<br/>*/
document.write("姓名==》"+name+"<br/>年龄===》"
+age+"<br/>住址===》"+address+"<br/>日期===》"+date);
</script>
</head>
<body>
</body>
</html>
01.变量的使用
<!DOCTYPE html>
<head lang="en">
<meta charset="UTF-8">
<title>数据类型</title>
<script type="text/javascript">
/* 数据类型 typeof 判断数据的类型
* 01.Undefined类型 只有一个值 就是 undefined
* 变量没有被定义， 定义了没有被赋予初始值 ======》undefined
* var names;
alert(typeof names);
02.Null 表示不存在的对象！和undefined的值 一致
alert(null==undefined);
03.Number :表示 整数和浮点数
alert(typeof 50.0);
alert(typeof 50);
04.String: 单引号或者双引号 引起来的文本
alert(typeof '');
alert(typeof '1');
alert(typeof "1");
05.Boolean :true false
alert(typeof TRUE); //TRUE 当作了一个变量 undefined
alert(typeof true);
06.Object:对象 数组和null 都是Object
var date=new Date();
alert(typeof date);
alert(typeof null);
* */
var array1=new Array(1,2,3);
var array2=new Array("小黑","小白");
var array3=[];
array3[0]=1;
array3[1]="11a"; //可以存放不同的数据类型
array3[2]=111;
alert(array3[1]);
</script>
</head>
<body>
</body>
</html>
02.数据类型以及typeof的使用
<!DOCTYPE html>
<head lang="en">
<meta charset="UTF-8">
<title>输入，输出以及确认</title>
<script type="text/javascript">
/**
* confirm（信息） 返回 true 或这 false
* prompt("参数1？","参数2") 参数1：提示用户的信息 参数2：输入框的默认值！ 如果没有参数2，相当于空白框
*/
if(confirm("想走上人生巅峰吗？")){ //点击确定
var answer= prompt("请输入努力的年数？","请输入数字");
if(answer<0) alert("请输入大于0的数字");
for(var i=0;i<answer;i++){
document.write("<h1>您努力了</h1>"+(i+1));
}
}else{
alert("你就没法赢取白富美！")
}
</script>
</head>
<body>
</body>
</html>
03.输入，输出和确认
<!DOCTYPE html>
<head lang="en">
<meta charset="UTF-8">
<title>类型转换</title>
<script type="text/javascript">
var num1="123.45a",num2="a123.45";
/*
* parseInt()：前提字符串第一个位置必须是数字，直到遇到 . 或者 非数字时 返回 得到整数
* parseFloat():前提字符串第一个位置必须是数字 直到遇到 非数字时 返回 得到浮点数
*/
document.write(parseInt(num1)+"<br/>");
document.write(parseInt(num2)+"<br/>"); //NaN 说明不是一个数字
document.write(parseFloat(num1)+"<br/>");
document.write("<hr/>");
/**
* 强制类型转换
* Boolean():里面的参数 只要不是false,0,null,undefied,空,NaN,未定义的变量 之外 都会返回true
* Number(): 是把整个字符串 作为 参数之后进行强制类型转换 ！ 要确保参数是 数值类型 或者boolean true=1 false=0;
* String()
*/
document.write(Boolean(true)+"<br/>");
document.write(Number(num1)+"<br/>");
document.write(String(typeof (num1))+"<br/>");
alert(typeof 1);
alert(typeof (1)); //推荐使用
</script>
</head>
<body>
</body>
</html>
04.类型转换
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>常用的运算符</title>
<script type="text/javascript">
/**
* 常用的运算符
*/
document.write("+运算："+(5+5)+"<br/>");
document.write("-运算："+(5-5)+"<br/>");
document.write("*运算："+(5*5)+"<br/>");
document.write("/运算："+(5/5)+"<br/>");
// % 取余
var num=3;
/*
++在变量前 先自身加1 之后参与运算
++在变量后 先参与运算 之后自身加1
*/
document.write("%运算："+(5%3)+"<br/>");
document.write("++运算："+(num++)+"<br/>");
document.write("--运算："+(num--)+"<br/>");
document.write("--运算之后："+(num)+"<br/>");
</script>
</head>
<body>
</body>
</html>
<!DOCTYPE html>
<head lang="en">
<meta charset="UTF-8">
<title>==和===的区别</title>
<script type="text/javascript">
/**
* == :把两个变量转换成相同的数据类型之后比较值
* ===: 判断值 和 数据类型 都相等 才 返回true
* alert(1=="1"); true 值相等
alert(1==="1"); false 类型不同
* 对象之间使用=== 或== 这是后没有区别，都是比较内存地址
*/
var date1=new Date();
var date2=date1;
alert(date1===date2);
//条件运算符
var flag=confirm("请选择？");
var choose=(flag==true)?"您点击了确定":"您点击了取消";
alert(choose);
</script>
</head>
<body>
</body>
</html>
05.==和===的区别
<!DOCTYPE html>
<head lang="en">
<meta charset="UTF-8">
<title>switch</title>
<script type="text/javascript">
var num=window.prompt("请问：今天周几？"); //让用户输入整数
switch (parseInt(num)){ // 因为用户输入的是字符串 要么 case "1" 要么 parseInt(num)
case 1:
alert(1);
break;
alert(111); // 没有意义 但是不会报错
case 2:
alert(2);
break;
case 3:
alert(3);
break;
default :
alert("default");
}
</script>
</head>
<body>
</body>
</html>
06.switch
<!DOCTYPE html>
<head lang="en">
<meta charset="UTF-8">
<title>break,continue</title>
<script type="text/javascript">
for(var i=0;i<=5;i++){ //break
if(i==5) break;
document.write(i+"<br/>");
}
document.write("<hr/>");
for(var i=0;i<=5;i++){ //continue
if(i==3)continue;
document.write(i+"<br/>");
}
</script>
</head>
<body>
</body>
</html>
07.break,continue
<!DOCTYPE html>
<head lang="en">
<meta charset="UTF-8">
<title>函数和return</title>
<script type="text/javascript">
//函数
function getSum(num1,num2){
return (num1+num2);
}
//直接调用
alert(getSum(3,2));
</script>
</head>
<body>
</body>
</html>
08.函数和return
<!DOCTYPE html>
<head lang="en">
<meta charset="UTF-8">
<title>for in 循环</title>
<script type="text/javascript">
/**语法
* for(声明变量 a in 对象)｛
* 对象[a] 来取值 类似于 根据key取得 value值
* ｝
*/
for(var a in window){
document.write(a+"=========>"+window[a]+"<br/>");
}
</script>
</head>
<body>
</body>
</html>
09.for in 循环
<!DOCTYPE html>
<head lang="en">
<meta charset="UTF-8">
<title>try catch</title>
<script type="text/javascript">
try{
alter("大家辛苦了！");
}catch(ex){
alert(ex.message);
}
</script>
</head>
<body>
</body>
</html>
10.try
<!DOCTYPE html>
<head lang="en">
<meta charset="UTF-8">
<title>常用的事件</title>
<script type="text/javascript">
/*表单提交的时候 触发的事件*/
function check(){
if(confirm("您确定提交表单吗？")){
return true;
}else{
return false;
}
}
/*获取焦点触发的事件*/
function onf(value){
value="";
alert("获取焦点，值变为空")
}
/*失去焦点触发的事件*/
function onb(value){
if(value==""){
alert("用户名不能为空！");
}
}
//记住密码
function res(){
alert('您选择了记住密码');
}
</script>
</head>
<body>
<form onsubmit="return check()">
<label>用户名：<input type="text" name="userName" placeholder="请输入用户名" onfocus="onf(this.value)"
onblur="onb(this.value)">
</label><br/>
<label>密码：<input type="password" name="password" placeholder="请输入密码"> </label><br/>
<input type="checkbox" name="re" onclick="res()">记住密码<br/>
<button type="submit"/>提交</button>
<a href="#" onmouseover="alert('触发了onmouseover')" onmouseout="alert('触发了onmouseout')" >验证</a>
</form>
</body>
</html>
11.常用的事件
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>初始javaScript</title>
<script type="text/javascript">
/*
javaScript: 运行在客户端！
减轻服务器的压力！
提升用户的体验！
* 变量可以不声明，直接赋值并使用！但是不推荐使用！
*
* 数据类型：
* undefined ：变量没有赋予初始值
* null：表示一个空值，与undefined的值相等
* number：包含整数和浮点数
* boolean：true或者false
* string：一组放在单引号和双引号中的文本！
*
* null,数组和对象都是object类型
*/
document.write("<h1>使用typeof来判断变量或者值是什么数据类型</h1>")
var a, b = 10, c = "小黑";
var d = null;
var arr = new Array();
var arr2 = ["1", "2"];
var date = new Date();
document.write("a==>" + typeof(a)+"<br/>");
document.write("b==>" + typeof(b)+"<br/>");
document.write("c==>" + typeof(c)+"<br/>");
document.write("d==>" + typeof(d)+"<br/>");
document.write("arr==>" + typeof(arr)+"<br/>");
document.write("arr2==>" + typeof(arr2)+"<br/>");
document.write("date==>" + typeof(date)+"<br/>");
document.write((undefined==null)+"<br/>");
document.write((undefined===null)+"<br/>");
/*===:类型和值都相等 返回true*/
var num1=5;
var num2="5";
document.write((num1==num2)+"<br/>");
document.write((num1===num2)+"<br/>");
/*定义了一个数组
* var a=new Array(5);
* var b=new Array(1,2,3,4,5);
* var c = ["1", "2"];
* */
var arr3 = "1,2,3,4";
/*将字符串转化成数组*/
var list= arr3.split(",");
document.write("数组之前的长度："+list.length+"<br/>");
list.push("5");
document.write("数组之后的长度："+list.length+"<br/>");
var str=list.join("--");
document.write("分割前==》"+arr3+"<br/>");
document.write("下标为2的元素值==》"+list[4]+"<br/>");
document.write("分割后=="+str+"<br/>");
</script>
</head>
<body>
</body>
</html>
<script type="text/javascript">
/*var num1=prompt("请输入第一个数字：");
var num2=prompt("请输入第一个数字：");
document.write("num1+num2="+(parseInt(num1)+parseInt(num2)));
var num="a123";
alert(parseInt(num));
*/
//查询出现a或者A的字符串的个数
var list=["abc","dbc","fcd","zsa","Anc","bnm"];
var count=0;
for(var i in list){
if(list[i].indexOf("a")!=-1||list[i].indexOf("A")!=-1){
count++;
}
}
document.write("出现a或者A的字符串共有："+count);
</script>
<script type="text/javascript">
/*
无参的函数
var methods = function () {
document.write("<h1>好好学习！不搞对象！</h1>")
}*/
//带参的函数
function methods(count) {
for (var i = 0; i < count; i++) {
document.write("<h1>好好学习！不搞对象！</h1>")
}
}
</script>
</head>
<body>
<input type="button" value="调用无参的函数" onclick="methods(prompt('请输入打印的次数'))">
</body>
