前言：
当前我们对“js三目运算符”都比较关注，我们都想要学习一些“js三目运算符”的相关文章。那么小编也在网上网罗了一些关于“js三目运算符””的相关内容，希望同学们能喜欢，同学们快快来学习一下吧！JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。
作用: 负责给页面添加动态效果语言特点:属于脚本语言(不需要编译直接由浏览器解析执行)基于面向对象属于弱类型语言
//java: String name="tom"; int age = 18; int x; x="abc";//JS: let name="tom"; let age = 18; let x; x="abc"; age="xyz"安全性强: JS语言只能访问浏览器内部的数据,浏览器以外电脑上的数据禁止访问.交互性强: 因为JS语言是嵌入到html页面中最终执行在客户端的语言 可以和用户直接进行交互, 而像Java语言是运行在服务器的语言和用户交互需要借助于网络,所有交互性JS语言会更强一些
如何在HTML页面中添加JS语言
三种引入方式:
内联: 在标签的事件属性中添加js代码,当事件触发时执行. ①事件: 是系统提供的一系列时间点. ②点击事件: 当点击元素时触发的时间点内部: 在html页面中的任意位置(推荐写在/body上面)添加script标签,标签体内写js代码外部: 在单独的js文件中写js代码, 然后在html页面中通过script标签的src属性引入到html页面
<!--onclick点击事件 alert()弹出提示框 方式一 --><input type="button" value="按钮" onclick="alert('按钮点击了!')"><!--内部引入JS 方式二 --><script> /*在浏览器的控制台输出*/ console.log("内部引入成功!");</script><!--引入外部js文件 如果script标签引入了外部js文件 则不能在标签体内写js代码--><script src="my.js"></script>浏览器终端 Console 窗口调试 JavaScript 代码
浏览器终端执行js
变量
JS属于弱类型语言let和var关键字的区别, 作用域有区别 let：局部作用域 var：全局作用域使用let声明的变量,作用域和Java语言的作用域类似使用var声明的变量,不管在什么位置声明 都相当于是一个全局变量const 关键字来定义一个常量
const常量
java:for(int i=0;i<10;i++){ int y = i+1;}// int z = i+y; 报错 i和y超出了自身的作用域JS:for(let i=0;i<10;i++){ let y = i+1;}let z = i+y; //不报错,但是访问不到i和y 因为超出了作用域for(var i=0;i<10;i++){ var y = i+1;}var z = i+y; //不仅不报错还能够访问到i和y的值 数据类型
JavaScript中只有对象类型 常见的对象类型包括:字符串: string 可以用单引号或双引号修饰数值: number 相当于Java中所有数值类型的综合布尔值: boolean true和false未定义: undefined 当变量只声明不赋值时属于未定义对象(Object)、数组(Array)、函数(Function)正则（RegExp）--特殊的对象：日期（Date）--特殊的对象：获取变量类型的方法 typeof 变量;
typeof "John" // 返回 stringtypeof 3.14 // 返回 numbertypeof false // 返回 booleantypeof [1,2,3,4] // 返回 objecttypeof {name:'John', age:34} // 返回 object//注意 null 返回时 objecttypeof undefined // undefinedtypeof null // objectnull === undefined // falsenull == undefined // true运算符
算数运算符: + - * / % , JS中的除法会根据结果自动转换整数或小数
//Java:int x =5 ; int y = 2; x/y = 2;//JS :let x =5; let y = 2; x/y =2.5; x=6 x/y=3;关系运算符: > < >= <= != ==和=====: 先统一两个变量的类型 再比较值"666"==666 true ===:先比较类型,类型相同后再比较值 "666"===666 false逻辑运算符: && || !赋值运算符: = += -= *= /= %= ++ --三目运算符: 条件?值1:值2
各种语句:
if else
//语法if (condition){ 当条件为 true 时执行的代码}if 语句 - 只有当指定条件为 true 时，使用该语句来执行代码if...else 语句 - 当条件为 true 时执行代码，当条件为 false 时执行其他代码if...else if....else 语句- 使用该语句来选择多个代码块之一来执行switch 语句 - 使用该语句来选择多个代码块之一来执行for
//语法：for (语句 1; 语句 2; 语句 3){ 被执行的代码块}//语句 1 （代码块）开始前执行//语句 2 定义运行循环（代码块）的条件//语句 3 在循环（代码块）已被执行之后执行for - 循环代码块一定的次数for/in - 循环遍历对象的属性while - 当指定的条件为 true 时循环指定的代码块do/while - 同样当指定的条件为 true 时循环指定的代码块while
do while
while (条件){ 需要执行的代码}//语法 do while 至少执行一次do{ 需要执行的代码}while (条件);switch case
switch(n){ case 1: 执行代码块 1 break; case 2: 执行代码块 2 break; default: 与 case 1 和 case 2 不同时执行的代码}方法
// java: 写法 public 返回值类型 方法名(参数列表){方法体}//JS: 写法function 方法名(参数列表){方法体}常见的四种方法:
无参无返回值 有参无返回值无参有返回值有参有返回值
三种声明方法的格式:
function 方法名(参数列表){方法体}let 方法名 = function (参数列表){方法体}let 方法名 = new Function("参数1","参数2","方法体");
<input type="button" value="按钮" onclick="f1()"><script> //1. 无参无返回值 function f1() { console.log("f1"); } //调用 f1(); //2. 有参无返回值 function f2(name,age) { console.log(name+":"+age); } f2("孙尚香",50); //3. 无参有返回值 function f3() { return "我是返回值"; } let info = f3(); console.log(info); //4. 有参有返回值 function f4(x,y) { return x*y; } let result = f4(8,9); console.log(result); //第二种声明方法的方式 let f5 = function (name,age) { console.log(name+":"+age); } f5("刘备",20); //第三种声明方法的方式 let f6 = new Function("name","age","console.log(name+':'+age)"); f6("吕布",66);</script>和页面相关的方法
通过选择器获取页面中的元素对象 let 元素对象 = document.querySelector("选择器")获取和修改元素的文本内容 元素对象.innerText = "xxx"; 修改文本内容元素对象.innerText 获取文本内容获取和修改input控件的值 控件对象.value="xxx"; 修改 控件对象.value 获取
NaN
Not a Number: 不是一个数isNaN(x) 判断变量是否是NaN
<body><div>这是div</div><input type="text" id="i1"><input type="button" value="按钮" onclick="f()"><script> function f() { //得到文本框和div let i = document.querySelector("#i1"); let d = document.querySelector("div"); //取出文本框的值并赋值给div d.innerText = i.value; }</script>简易计算器 Demo
<body><input type="text" id="i1"><input type="text" id="i2"><input type="button" value="加" onclick="f(1)"><input type="button" value="减" onclick="f(2)"><input type="button" value="乘" onclick="f(3)"><input type="button" value="除" onclick="f(4)"><div> 结果:<span></span></div><script> function f(x) { //得到页面中相关的元素对象 let i1 = document.querySelector("#i1"); let i2 = document.querySelector("#i2"); let s = document.querySelector("span"); //判断输入的两个值是不是NaN if (isNaN(i1.value)||isNaN(i2.value)){ s.innerText="输入错误!"; return; } switch (x) { case 1: //加 //当两个字符串进行-*/运算时会自动转成数值,进行+运算是拼接 //s.innerText = i.value*1+i.value*1; //parseFloat()将字符串转成整数或小数 // s.innerText = parseFloat(i.value)+parseFloat(i.value); s.innerText = i1.value*1+i2.value*1; break; case 2: //减 s.innerText = i1.value-i2.value; break; case 3: //乘 s.innerText = i1.value*i2.value; break; case 4: //除 s.innerText = i1.value/i2.value; break; } }</script>定时器 Demo
<h1>0</h1><h2>0</h2><script> let count = 0; //开启定时器 每隔1秒调用一次方法 //方法作为参数进行传递时不写() setInterval(f,1000); function f() { count++; let h = document.querySelector("h1"); h.innerText = count; } let num=0; //匿名方法开启定时器 let timer = setInterval(function () { num++; let h = document.querySelector("h2"); h.innerText = num; if (num==50){ //停止定时器 clearInterval(timer); } },100); //开启只执行一次的定时器 setTimeout(function () { alert("时间到!") },3000);</script>学习记录，如有侵权请联系删除
标签： #js三目运算符
