插入Javascript脚本的三种方式

1.行间事件方式以及按钮的onclink和alert

<body><input type="button" value="hello" onclick="window.alert('hello word!!!!!!!')"></input>
</body>

使用上述代码即可实现点击按钮弹出窗口的效果

2.代码块的方式

    <script type="text/javascript">window.alert("hello")</script>

执行上述代码，打开网页就会显示弹窗

3.外部文件的方式

创建js文件夹并在其中创建hello.js
在内部写入代码

window.alert("hello kitty");

然后在html中调用

<body><script type="text/javascript" src="js/hello.js"></script>
</body>

运行后结果为

4.函数

编写如图所示代码

<body><input type="button" onclick="sayhello('wwwww')" /><script type="text/javascript">function hanshu(a,b){window.alert(a+"？"+b);}hanshu("abc",true);hanshu();hanshu(1);hanshu(1,2);hanshu(1,2,3);// 第二种声明方式mysum=function(a,b){return a+b;}var res=mysum(10,20);window.alert(res);function sayhello(a){window.alert("hello!!!"+a);}</script></body>

执行结果为：

全局变量与局部变量相较于java不同的地方

     <script type="text/javascript">function sayhello(){p="asdadasd";}sayhello();window.alert(p);</script>

调用结果为

在JavaScript中不使用var关键字进行声明的变量，都为全局变量

js中的函数是不能重载的

函数若重名后声明的会覆盖前面的

数据类型

number

NaN

在js脚本运行数学运算时，若结果不是数字，则会返回nan
例如

 <body><script type="text/javascript">var res = 199/"http";window.alert(res);</script></body>

infinity

无穷大在js中计算 100/0时变量中的值将为infinity

isNaN函数

isNaN会判断传入参数是否为数字
如果不是数字返回true
是数字，返回flase
特殊的bool型的数据使用isNaN也会被判定为数字

number函数

number函数会将传入的参数

<body><script>var i=Number("123456");window.alert(typeof(i));</script>
</body>

结果为：

parseInt函数

使用parseInt可以将其他数据类型暴力取整

<body><script>var i=Number("123456.999");window.alert(parseInt(i));</script>
</body>

或

<body><script>var i=Number("123456qwe");window.alert(parseInt(i));</script>
</body>

运行结果都是：

Math.ceil函数

此函数作用与parseInt类似与之不同的是，此函数是向上取整

特殊

js中10/3不是3 而是3.3333333

Boolean类型

boolean只有ture和false两个值

Boolean函数

此函数会将任意类型的数据转换为Boolean类型

Boolean在js中会被隐式调用
下面两种方式是等价的

        if(Boolean("asd")){}if("abc"){}

string类型

常用属性和方法

<body><script type="text/javascript">console.log("abcdef".length);//6console.log("qwerty".charAt(3))//rconsole.log("qwe".concat("rty"))//qwertyconsole.log("a=b&b=c".indexOf("="))//1console.log("a=b&b=c".lastIndexOf("="))//5console.log("1-1-501".replace("-",","))//1,1-501(只能替换第一个)var arr = "1-1-501".split("-");//拆分字符串 //不需要使用var[]for(var i=0;i<arr.length;i++){console.log(arr[i]);}console.log("abcdefg".substr(2))//cdefgconsole.log("abcdefg".substring(2))//cdefg//在参数为两个时//substr为（start，len）//substring为（start，end）（不包括end）console.log("abcdefg".substr(2,3))//cdeconsole.log("abcdefg".substring(2,3))//cconsole.log("Abc".toLowerCase())//abcconsole.log("Abc".toUpperCase())//ABC</script></body>

Object

与java相同，可以把Ovject类型看成是所有类的基类
Object对象其中最重要的是它的prototype属性
它可以动态的给类扩展方法和属性
例如

     <script type="text/javascript">var obj = new Object();Object.prototype.mytest = function(){console.log("test success");}obj.mytest();Object.prototype.username="zhangsan";console.log(obj.username)</script>

上述代码结果为

类

<script type="text/javascript">/*js中定义类第一种方法：function 类名（形式参数列表）{this.属性名 = 参数this.属性名 = 参数this.方法名 = function(){}}第二种方法：类名 = function(形式参数列表){this.属性名 = 参数this.属性名 = 参数this.方法名 = function(){}}*///sayHello既是函数，也是类，取决于如何调用function sayHello(){}//这样调用是当作函数调用，不会在堆中new对象sayHello();//new 来调用 就是当作类来调用，会在浏览器的堆中开辟新对象var obj= new sayHello();</script>

示例（员工类）：

         function Emp(empno,ename,sal){//属性this.empno=empno;this.ename=ename;this.sal = sal;//方法this.work=function(){console.log(ename+"working.....");}}//创建对象var v1=new Emp();v1.work();var v2=new Emp(1);v2.work();var v3=new Emp(1,"zhangsan");v3.work();var v4=new Emp(1,"zhangsan",900);v4.work();console.log("第一种方式"+v4.sal);//另一种引用方式console.log("第二种方式"+v4["sal"])//给emp动态添加方法Emp.prototype.getSal=function(){return this.sal;}console.log(v4.getSal());

运行结果：

= =和= = =

===相当于java里的equals,即比较数据是否相等，又比较数据类型是否一致
==则只比较值是否相等
var v1=true;
var v2=1;
console.log(v1==v2);//true
console.log(v1===v2);//flase

null NaN 和undefined区别

null == undefined 但数据类型不同
NaN与任何都不能等同

javaScript 事件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
load事件(在页面加载完毕之后触发)
<body onload="console.log('加载完毕')">焦点事件：<input type="text" onblur="console.log('失去焦点')" onfocus="console.log('获得焦点')"><br>单击事件：<input type="button" onclick="console.log('单击')" value="单击"><br>双击事件：<input type="button" ondblclick="console.log('双击')" value="双击"><br>按键事件：<input type="text" onkeydown="console.log('按键按下')" onkeyup="console.log('按键抬起')"><br>鼠标相关事件<div style="border: 1px solid black; width: 300px; height: 300px;"onmouseover="console.log('鼠标经过了')"onmousemove="console.log('鼠标在div内移动了')"onmouseout="console.log('鼠标离开了')"onmouseup="console.log('鼠标弹起了')"onmousedown="console.log('鼠标按下了')"></div><br>表单事件<form onsubmit="alert('表单提交了')" onreset="console.log('表单重置了')"><input type="submit" value="提交"><input type="reset"  value="重置"></form><br>选中文本事件和修改事件<input type="text"  onselect="console.log('文本被选中了')" onchange="console.log('文本被修改')"></textarea><br><select onchange="console.log('选项被修改')"> <option value="">请选择您的学历</option><option value="bk">本科</option><option value="zk">专科</option></select>
</body>
</html>

ECMAScript DOM BOM

ECMAScript是javaScript的语法核心
DOM是组件如按钮，表格等，在js中 document是表示DOM组件
BOM是所有浏览器操作如弹窗等在js中使用window表示

事件注册

事件注册有两种方式
第一种就是直接在元素中通过onclick声明
第二种

<body><input type="button" id="mybutton1" value="button1"/><input type="button" id="mybutton2" value="button2"/><script type="text/javascript">function t1(){console.log("1111");window.alert("t1被调用了");}var b1=document.getElementById("mybutton1");b1.onclick=t1;console.log(b1);var b2=document.getElementById("mybutton2");b2.onclick = function (){console.log("2222");window.alert("匿名函数被调用了")}console.log(b2);</script>
</body>

代码的执行顺序

在使用DOM获取元素时要注意脚本要写在元素声明之后

<body><script type="text/javascript">var bt = document.getElementById("bt");bt.onclick = function(){alert("匿名函数");}</script><input type="button" id="bt" value="BUTTON"/>
</body>

像上面这样的代码，因为先执行的脚本，导致bt对象为null，此时修改顺序即可解决问题

或者也可以将代码改为下面这种写法

<body onload="load()"><script type="text/javascript">function load (){var bt = document.getElementById("bt");bt.onclick = function(){alert("匿名函数");}}</script><input type="button" id="bt" value="BUTTON"/>
</body>

或者

<body><script type="text/javascript">window.onload=function(){var bt = document.getElementById("bt");bt.onclick = function(){alert("匿名函数");}}</script><input type="button" id="bt" value="BUTTON"/>
</body>

键盘监听

上面提到了一系列键盘监听事件，我们可以通过以下代码获取得到的按键

 <body><input type="text" id="username"/><script type="text/javascript">function DL (a){if(a.keyCode==13){console.log("点击了enter");}}window.onload=function(){var username = document.getElementById("username");username.onkeypress=DL;}</script></body>

或

 <body><input type="text" id="username"/><script type="text/javascript">window.onload=function(){var username = document.getElementById("username");username.onkeypress=function(a){if(a.keyCode==13){console.log("点击了enter")}}}</script></body>

练习移动方块

 <body id="body"><div id="person" style="width: 10px; height: 10px; position: absolute; left: 50px; top: 50px; background-color: #2F2D2E;"></div><script type="text/javascript">window.onload=function(){person = document.getElementById("person");body = document.getElementById("body");speed = 1.0;last_key='q';window.onkeydown=function(data){var y=parseInt(person.style.top);var x=parseInt(person.style.left);if (last_key==data.key){speed=speed+0.5;}else {speed=1;}last_key = data.key;if(data.key=='w'&&y>30){y=y-speed;person.style.top=y+'px';}if(data.key=='s'&&y<window.innerHeight-30){y=y+speed;person.style.top=y+'px';}if(data.key=='a'&&x>30){x=x-speed;person.style.left=x+'px';}if(data.key=='d'&&x<window.innerWidth-30){x=x+speed;person.style.left=x+'px';}}}</script></body>

void运算符

void运算符的用法是 void(表达式)
那么表达式返回的将返回空值
假如我们想有一个超链接样式的文本，单击后执行js代码，并且在执行完js代码后不跳转页面。
我们就可以这样写

<body><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><a href="javascript:void(0)" onclick="alert('link')" >dlaks;lkalskdl;akdl;ak;l</a>
</body>

如果写成href=""那么单击相当于访问当前页，不符合要求

array 数组

<body><script type="text/javascript">var a=[];a.push(5);a.push(6);a.push(7);console.log(a.length);// 3console.log("pop"+a.pop());//pop7console.log(a.length);//2/****push和pop符合栈的特点*****/var b = new Array(2001,1,1);var str = b.join("_");console.log(str); //2001_1_1var c=[9,8,7,true,false];c.reverse();for(var i in c){console.log(c[i]); //false true 7 8 9}</script>
</body>

date对象

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script type="text/javascript">var time=new Date();console.log(time);//Sun Dec 05 2021 14:57:56 GMT+0800 (中国标准时间)year = time.getFullYear();month = time.getMonth();//day = time.getDay(); 这样获取到的是星期几day = time.getDate();console.log(year+"年"+month+"月"+day+"日");//2021年11月5日var strDate = time.toLocaleDateString();var strtime = time.toLocaleTimeString();var strDateTime = time.toLocaleString();console.log(strDate); //2021/12/5console.log(strtime); //下午3:05:30console.log(strDateTime); //2021/12/5 下午3:05:30//获取1970-1-1 0：0：0到现在的总毫秒数var now = new Date();var timeMilis = now.getTime();//1638688162376console.log(timeMilis);</script>
</body>
</html>

WBE前端笔记3：JavaScript练习--基础语法相关推荐

第六次前端培训（JavaScript的基础语法（二））
3.6 运算符算数运算符.递增和递减运算符.比较运算符.逻辑运算符.赋值运算符 3.7 控制语句 3.8 数组 3.8.1.数组定义 JS中定义数组的三种方式如下(也可先声明再赋值)∶ var ar ...
Ajax和JSON-学习笔记03【JSON_基础语法】
Java后端学习路线笔记汇总表[黑马程序员] Ajax和JSON-学习笔记01[原生JS方式实现Ajax] Ajax和JSON-学习笔记02[JQuery方式实现Ajax] Ajax和JSON-学 ...
JSP、EL和JSTL-学习笔记01【JSP基础语法】
Java后端学习路线笔记汇总表[黑马程序员] JSP.EL和JSTL-学习笔记01[JSP基础语法] JSP.EL和JSTL-学习笔记02[MVC] JSP.EL和JSTL-学习笔记03[EL介绍 ...
Kotlin学习笔记（1）-- 基础语法
文章目录 Kotlin学习笔记(1)-- 基础语法输出语法代码输出可读可改(var) 语法代码输出内置数据类型只读变量(val) 类型推断编译时常量语法代码输出引用类型 r ...
JavaSE入门0基础笔记第二章Java基础语法
JavaSE入门0基础笔记第二章Java基础语法 1.运算符 1.1算术运算符 1.1.1运算符和表达式 1.1.2 算术运算符 1.1.3字符的"+"操作 1.1.4 字符串中 ...
JS：JavaScript编程语言基础语法总结
JS:JavaScript编程语言基础语法总结目录常用基础语法一.变量 1.声明变量var 二.语句 1.if判断语句 2.for循环语句三.函数 1.定义一个函数常用基础语法 consol ...
二：以理论结合实践方式梳理前端 ES 6+ ——— ES 6+ 基础语法
ES 6+ 基础语法虽说 JavaScript 是一门非编程式语言,但它又具备编程思想,这也是因为 JavaScript 在设计之初参考了 Java 的设计思路所带来的捆绑思想,也间接的导致了前期的 ...
JavaScript(1)——基础语法部分（CSDN）
前言:本篇文章原文为我在语雀上的学习笔记Javascript(1)--基础语法部分 web 发展史 Mosaic,是互联网历史上第一个获普遍使用和能够显示图片的网页浏览器.于 1993年问世. 199 ...
1.6 前端设计——HTML5+Javascript+CSS基础
前端设计时,为了兼容微信内置浏览器,我们采用H5页面的方式进行设计,设计界面时,我们必须充分考虑当前界面是要适配手机操作的. 结合前面的介绍,本章结束时,我们能够完成一个简单的小项目(程序)--选课系 ...
前端学PHP之正则表达式基础语法
前面的话正则表达式是用于描述字符排列和匹配模式的一种语法规则.它主要用于字符串的模式分割.匹配.查找及替换操作.在PHP中,正则表达式一般是由正规字符和一些特殊字符(类似于通配符)联合构成的一个文本 ...

WBE前端笔记3：JavaScript练习--基础语法

插入Javascript脚本的三种方式

1.行间事件方式以及按钮的onclink和alert

2.代码块的方式

3.外部文件的方式

4.函数

全局变量与局部变量相较于java不同的地方

js中的函数是不能重载的

数据类型

number

NaN

infinity

isNaN函数

number函数

parseInt函数

Math.ceil函数

特殊

Boolean类型

Boolean函数

string类型

常用属性和方法

Object

类

= =和= = =

null NaN 和undefined区别

javaScript 事件

ECMAScript DOM BOM

事件注册

代码的执行顺序

键盘监听

练习移动方块

void运算符

array 数组

date对象

WBE前端笔记3：JavaScript练习--基础语法相关推荐

最新文章

热门文章

WBE前端笔记3：JavaScript练习--基础语法

插入Javascript脚本的三种方式

1.行间事件方式 以及 按钮的onclink和alert

2.代码块的方式

3.外部文件的方式

4.函数

全局变量与局部变量相较于java不同的地方

js中的函数是不能重载的

数据类型

number

NaN

infinity

isNaN函数

number函数

parseInt函数

Math.ceil函数

特殊

Boolean类型

Boolean函数

string类型

常用属性和方法

Object

类

= =和= = =

null NaN 和undefined区别

javaScript 事件

ECMAScript DOM BOM

事件注册

代码的执行顺序

键盘监听

练习 移动方块

void运算符

array 数组

date对象

WBE前端笔记3：JavaScript练习--基础语法相关推荐

最新文章

热门文章

1.行间事件方式以及按钮的onclink和alert

练习移动方块