<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>在HTML中嵌入js代码的第一种方式：行间事件</title>
</head>
<body>
<!-- 点击按钮，显示对话框，对话框里面显示hello word
2.javascript是一种事件驱动行的编程语言，发生某种事件的时候，去执行某段代码
例如鼠标单机事件，任何一个事件都会对应一个事件句柄。
click对应的是onclick，还有鼠标经过事件。
3.所有事件句柄都是以标签的属性形式存在，例如 input button 就有一个onclick这样的属性
只要用户点击了这个按钮，那个注册在onclick时间内句柄中的javascrip代码就会执行。onclick后面的代码其实是浏览器负责执行的。
4.怎么使用js代码弹窗呢
在js中右移个内置的BOM兑现，可以直接拿来用，window
window 对象有一个额方法叫做alert ，这个函数专门用来弹出对话框
5.javascript可以使用"" 也可以使用 ''
6.window还可以省略
-->
<input type="button" value="hello" onclick="window.alert('hello ');" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>变量</title>
</head>
<body>
<script type="text/javascript">
var a,b,c = 100;
var v = 500;
var p;
p = 30.4;
p = false;
p = true;
// 就像python一样.
var o ;
alert(o);//变量没有赋值,系统默认undefined,在js中undefined相当于一个具体存在的值.
// var 是一个关键字 varable
// 函数的初步
/**
* function 函数名（形式参数列表）
*
* function sum(a,b){
return a + b
//返回任何类型，就像python一样，可以任何类型的数据。传进来是什么类型就是什么类型
函数需要被调用才能执行。
调用的时候可以不传参数
}
*/
mysum = function(a,b){
return a + b;
}
//在javascript中,当一个变量没有使用var 的话,这个变量不管是在哪里声明的,都是全局变量,这种变量在声明的时候必须手动赋值.
// 不能采用系统默认值的.
//函数声明的优先级比较高一点 那个函数里面添加变量的情况就像是代码块一样.
//在js中是不能出现重载的,只要出现同名的函数,之前的函数就消失了.
//在js中编写函数名的时候,要注意一下,防止把函数干掉了.
var res = mysum(8,00);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
/**
* js的数据类型
* js中声明变量不需要指定变量的数据类型
* var a = 100；
* 在
* js中学习数据类型是为了了解js程序的底层原理
* 2. undefined Number String Boolean Null 前面几个属于基本数据类型 Object是引用数据类型 *
*
* 后面引入： Symbol BigInt
tyepof 变量名 动态获取变量的数据类型
5.在js中判断两个数据类型是否相等就是 ==
*/
function sun {
if(typeof x = "number" && typeof y = "number"){
alert(x+y);
}else{
alert(x + y );
}else {
alert("对不起，我们不合适");
//输出信息到控制台
console.log(typeof a)//是打印到控制台.
var s = null
console.log(typeof s )//结果是Object 这是因为NUll是一种数据类型
//数字就是number
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
/**
* == ：等同运算符，值比较值是否相等
* === ：全等运算符，既比较值是否相等，有比较类型是否相等
*
* null 的类型属于原始类型
*/
/**
* null undefined 和 NaN 的区别
* null 和undefined 是等同关系。
*/
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
/**
* js的数据类型
* js中声明变量不需要指定变量的数据类型
* var a = 100；
* 在
* js中学习数据类型是为了了解js程序的底层原理
* 2. undefined Number String Boolean Null 前面几个属于基本数据类型 Object是引用数据类型 *
*
* 后面引入： Symbol BigInt
tyepof 变量名 动态获取变量的数据类型
5.在js中判断两个数据类型是否相等就是 ==
*/
function sun {
if(typeof x = "number" && typeof y = "number"){
alert(x+y);
}else{
alert(x + y );
}else {
alert("对不起，我们不合适");
//输出信息到控制台
console.log(typeof a)//是打印到控制台.
var s = null
console.log(typeof s )//结果是Object 这是因为NUll是一种数据类型
//数字就是number
}
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>变量</title>
</head>
<body>
<script type="text/javascript">
var a,b,c = 100;
var v = 500;
var p;
p = 30.4;
p = false;
p = true;
// 就像python一样.
var o ;
alert(o);//变量没有赋值,系统默认undefined,在js中undefined相当于一个具体存在的值.
// var 是一个关键字 varable
// 函数的初步
/**
* function 函数名（形式参数列表）
*
* function sum(a,b){
return a + b
//返回任何类型，就像python一样，可以任何类型的数据。传进来是什么类型就是什么类型
函数需要被调用才能执行。
调用的时候可以不传参数
}
*/
mysum = function(a,b){
return a + b;
}
//在javascript中,当一个变量没有使用var 的话,这个变量不管是在哪里声明的,都是全局变量,这种变量在声明的时候必须手动赋值.
// 不能采用系统默认值的.
//函数声明的优先级比较高一点 那个函数里面添加变量的情况就像是代码块一样.
//在js中是不能出现重载的,只要出现同名的函数,之前的函数就消失了.
//在js中编写函数名的时候,要注意一下,防止把函数干掉了.
var res = mysum(8,00);
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>null undefined</title>
</head>
<body>
<script type="text/javascript">
var c;
//一个变量没有赋值,那么他就是一个undefined,undefined 属于原始类型.
//Null 类型也是原始类型,Null的类型只有一个数据类型 null
//Number 属于原始类型 -1 0 3.14 33 2.0 ...Infinity N/N（表示不是一个数字，是number 的一个值）
//什么时候是一个N/N 呢？ var 100 / "我们不合适"
console.log(result);
//var i = 10 + "null". js中+ 也可以表示相加,也可以表示字符串拼接.
//Number 就相当于java中的基本数据类型
/**
* 在Number 中有一个函数 isNaN（变量） 函数有一个特点，会现将数据转换成数字。如果转换失败了，那么结果就是true，如果成功了就是false。
* 作用 ：就是判断一个数字是否是一个数字，返回true 表示不是一个数字，返回false 表示是一个数字。
*
* 在Number 类型中还有一个函数叫做 Number（） 函数，这个函数的作用就是将本来不是Number类型的数据表示成Number类型的数据
* 向上取整：
* Math.ceil（123.456） 向下取整：parseInt("123.456"):想字符串中的数字转换成证书类型，并且向下取整
*/
/**
* Boolean 类型：属于原始类型，只有两个值，true and false
* Boolean（） 将不是Boolean类型的转换Boolean类型的
* 有值就是true ，undefined 0 "" null (只要是有东西就是true，没有就是true)就 是false
*/
/**
* cconsole.log(10/3) 3.33333333
*/
/**
* String 类型 属于进本数据类型
* 1.怎么定义字符串 var x = "1pp";单引号也可以
* 2.var str = new String（"zifuchuan"）
*/
/**
* length 属性查看字符串的长度
* charAt
* concat
* indexOf
* lastIndexOf
* split
* substr
*
*/
var arr = "1956-10-10".split("-");
for(var i = 1;i < arr.length;i++){
console.log(arr[i]);
}
/**
* Object类型
* 1.在js中内置了一个Object类型，就系那个java中一样，默认继承Object类型 。
*
* 属性 ：prototype 原型 ：可以给对象动态扩展属性和方法。
* constructor 属性
*
*/
Object.prototype.doSome = function(){
cconsole.log("测试prototype属性");
}
//给Objecct类型的属性扩展一个userName 类型的属性
Object.prototype.userName = "zhanshan";
//给String类型的对象扩展一个方法
//谁调用,this就是谁.
String.prototype.my = function(startIndex,length){//不用去写数据类型就是nice
return this.subString(startIndex,length);
}
/**
* 1.在js中定义类
* function 类型（）{
this.属性名 = 参数
this.属性名 = 参数
}
this.方法名 = function() {
}
*/
function sayhello(){
//既可以看成一个函数,也可以看看成一个方法.
}
var ob = new sayhello();//这样调用就是一个对象
sayhello();//这样调用就是一个方法.
console.log("123".my(1,8))
//正是定义一个员工类
function Emp(x,y){
this.name = x;
this.wage = y;
// var name;
// var age;
// var wage;
function wage(){
cconsole.log("俺的工资是 =" + wage)
}
}
/**
* 访问属性有两个方法的：e.属性名 或者 e["属性名"]
*/
Emp e = new Emp(1,2);
</script>
</body>
</html>
捕捉回车键：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
window.onload = function(x){
document.getElementById("username").onkeydown = function(y){//这个函数是监听器来调用,会自动给这个函数传入一个参数.
//监听器调用这个函数的时候,会穿过来一个监听器对象.不写也会给你传过来.
// console.log("那就这样吧，不能顺其自然");
//当用户敲击回长春侧键
/**
* 新的知识：所有的键盘属性有keyCode属性，这个可以keyCode可以获得键值。
* 回车键的keyCode就是13
* ESC键的键值是27
*/
if(y.keyCode == 13){
console.log("loading");
} else if (y.keyCode == 27){
console.log("正在退出啊");
}
}
}
</script>
用户名：<input type="text" id="username" value="" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body onload="key()">
<script type="text/javascript">
/**
* 这样是不行的，因为id还没被加载。
* 页面中所有的元素被加载完成之后，才能触发事件，这个事件的名字叫做load
*/
function key(){
var www = document.getElementById("wps");
www.onclick=function(){
console.log("鼠标被点击");
}
}
</script>
<input type="button" id="wps" value="按钮" />
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
/**
* 选择结构等if switch do while break continue return
*/
for(var i =1;i<10;i++){
alert("i");
}
/**
* for in 和with 一样
*/
var arr = [1,"sai",3,4,5]//数组类型可以不一致
for(var i in arr){//这里面的i代表数组的下标
alert(arr[i]);
}
function Emp(age time){
this.age = age;
this.time = time;
}
var e = new Emp(12,"789");
for(var i in e){//i是e的属性值,获取处理来的还是字符串
//还有一种是这样使用属性
console.log(e[i])//使用的是这样的.
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="button" id="mybutton" value="按钮" />
<script type="text/javascript">
//根据接地那获取节点/节点对象
//在js中内置的document
/**
* ECMAScript：JS核心语法（ES规范/ECMA-262标准）
DOM：Document Object Model（文档对象模型：对网页当中的节点进行增删改的过程）HTML文档被当做一颗DOM树来看待,
他的顶级对象是document
BOM：Browser Object Model（浏览器对象模型：关闭浏览器窗口、打开一个新的浏览器窗口、后退、前进、浏览器地址栏上的地址等等都是BOM编程）
bom的顶级对象是window
严格意义上window是包含document
*/
var d = document.getElementById("mybutton");
alert(d);
/**
* 在js中当你获取一个节点之后，这个节点有什么属性，你就可以“点”什么，可以改原来的属性。
* 使用：： 变量名.属性
*/
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
//页面加载完毕之后
window.onload= function(){
var first = document.getElementById("firstcheck");
var key = document.getElementsByName("aihao");
first.onclick =function(){
for(var i=0;i <key.length;i++ ){
key[i].checked = first.checked;
}
}
//给每一个爱好的复选框选择鼠标单机事件,.
for(var i =0;i<key.length;i++){
key[i].onclick = function(){//每次点击一次我都要检查这个是否满足和为三.
var count= key.length;
var checkedCount = 0;
for(var i=0;i <key.length;i++ ){
if(key[i].checked){
checkedCount++;
}
}
first.checked = (count == checkedCount);
}
}
}
</script>
<input type="checkbox" id="firstcheck" />
<br>
<input type="checkbox" name="aihao" value="抽烟" />抽烟
<br>
<input type="checkbox" name="aihao" value="喝酒" />喝酒
<br>
<input type="checkbox" name="aihao" value="打游戏" />打游戏
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
/**
* 怎么创建数组对象
*
*/
//创建数组
var arr = [];//js中数组的长度是可变的.h和python一样反正能自动扩容
var a3 = ["","",3];
var n = new Array();
var n2 = new Array(3);
var n4 = new Array(1,2,3,9);
//Array方法:一个 join("-"),就是将数组中的数据用-号连接在一起.
var time new Date();
console.log(time);
// time.getDate();
// time.getDay();
var time2 = time.toLocaleString();
console.log(time2);
//获取字1970年1月1日到当前系统的时间的总毫秒数.
var now = new Date();
console.log(now.getTime());
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
/**
* void 和 typeof
* javascript 的数据类型
* number string Boolean function undefined object
*
* void 运算符
* void（表达式）执行表达式，但是不返回任何结果，
*/
</script>
<br><br><br>
/**
* 加载链接执行代码，依然在原来的界面
*/
<a href="javascript:void(0)" onclick="alert('执行代码')">超链接
</a>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
