1-JS基本语法
JS基本语法字符串取空格
String.prototype.trim = function () {
return this.replace(/^\s+|\s+$/g,"");
};
一、定义
javascript是一种弱类型、动态类型、解释型的脚本语言。
- 弱 类 型:类型检查不严格,偏向于容忍隐式类型转换。
- 强 类 型:类型检查严格,偏向于不容忍隐式类型转换。
- 动态类型:运行的时候执行类型检查。
- 静态类型:编译的时候就知道每个变量的类型。
- 解 释 型:程序不需要编译,程序在运行的时候才翻译成机器语言,每执行一次都要翻译一次,因此效率比较低,但是跨平台性好。
- 编 译 型:程序在执行之前需要一个专门的翻译过程,把程序编译为机器语言的文件,运行时直接使用编译的结果就行了。
- 标记语言:标记语言的存在就是用来被读取(浏览)的,而其本身是没有行为能力的,在标记语言里你会看到<和>这些尖括号,这是用来写出“层次”和”属性”的,换句话说,它是被动的。并不具备与访问者互动的能力。
- 编程语言:它是具有逻辑性和行为能力,这是主动的。说通俗一点,它是有思想的。
- 脚本语言:它介于标记语言和编程语言之间,脚本语言不需要编译,可以直接用,由解释器来负责解释。
二、JS历史
1:Netsape发明了javascript。
2:JS之父Brendan Eich(布兰登 · 艾奇)
3:为什么叫JavaScript
4:JS和JAVA语言没有任何关系
5:JS标准化---ECMAScript
三、JS组成
四、script标签
- language:用来指定<script>标签中的脚本类型,即javascript。已废弃,大多数浏览器已经忽略它了,所以不要在使用。
- type:它也是用来指定<script>标签中的脚本类型,即text/javascript。它也是type的默认值,所以可以忽略指定。
- src:指定外部的脚本文件。如果指定该属性,script标签包含的JS脚本不会执行。
五、js初体验
- document.write:输出内容到页面,可同时输出多段文本。
document.write('我叫', 'thomas!');
- document.writeln:输出内容到页面,但是会在表达式后面写一个换行符。
eg:document.writeln(‘我叫’, ‘thomas’);document.writeln('我叫', 'thomas');
writeln() = write() + write('\n');
为什么换行没起作用?
如何让输出内容换行?
document.write('<pre>hello') // 换行 (字会变小,不推荐使用)
document.write('晴天<br/>');
六、如何输出标签符号
七、实体符号列表
八、js语句
九、js注释
十、js变量
var a = 56;
var 6a = '' // 错
var _ab = '' // 对
var $m7 = '' // 对
var a, b, c;
var a = 1;
alert(a);
十一、变量常用命名法
- 驼峰命名法(Camel):第一个单词的首字母小写,后面的单词首字母大写。
- 帕斯卡命名法(Pascal):所有单词的首字母大写。
- 匈牙利命名法(Hungarian):在变量名最前面添加相应小写字母来标识变量的类型,后面的单词首字母大写。
十二、保留关键字
十三、数据类型
- 基本数据类型:字符串类型(string)、数值类型(number)、布尔类型(boolean)、undefined、null
- 引用数据类型:对象(object),函数(function),数组(array)。
- 字符串类型:必须要由成对的单引号或双引号包起来。内容可以是任意文本,只要不包含包围字符串的引号就可以。如果一定要包含,则用反斜杠转义。
eg: ‘123’ “男“ ‘玩游戏’ - 数值类型:可以带小数点,也可以不带小数点。
eg: 34 12.1 - 布尔类型:只有两个值:true,false。
- undefined:表示声明的变量没有值。
var a; alert(a); // undefined
- null:用来表示尚未存在的对象。
对象、函数后面再详细讲解。
我们可以通过typeof来查看变量的类型。var a = 56; console.log(typeof(a)); // number var s = 'abc'; console.log(typeof s); // string // typeof(a) == type a
十四、运算符
<1>算术运算符:+、-、*、/、%(取余)、++(递增)、--(递减)
alert( 10 / 4 ); //2.5
alert( 10 % 4 ); //2
// 取余的结果正负取决于 % 前面的值(面试会问)
var i = 3;
i++;
alert( 'i =' + i ); // i=4
var m = 3,n;
n = m++;
alert('m='+m+',n='+n); // m= 4,n=3
var m = 3, n;
n = ++m;
alert('m='+m+',n='+n); // m= 4,n=4
var x = 4,y = 5;
var z = x++ + y++;
alert('x='+ x ); // 5
alert('y='+ y ); // 6
alert('z='+ z ); // 9
var a = 3;
var b = a++ + ++a + a++;
alert('a='+a +',b='+b ); // a=6,b=13
// ++在后面,先取变量的值,把取到的值赋给左边的变量,然后变量自己再增1
// ++在前面,变量先加1,然后再赋值
<2>赋值运算符:=、+=、-=、*=、/=、%=
var a += 5; // a = a+5
var a *= 5; // a = a * 5
<3> +运算符:可用于把字符串变量连接起来。(求和,拼接)
var a = 6;
var s= 'hello';
var b = true;
alert( a + s + b ); // 6 hello true
alert( s + a + a); // hello66
alert( a + a + s ); // 12hello
var a = 1.5;
alert(Math.round(a); // 2
var a = 1.5;
alert(parseInt(a)); // 1
var a = 1.5;
alert(parseFloat (a)); // 1.5
var c = '1.5px';
alert(parseFloat(c)); // 1.5
var c = '1.5px21';
alert(parseFloat(c)) // 1.5
<4>关系(比较)运算符:>、<、>=、<=、==、===、!=、!== (关系表达式最终的结果是成立或不成立,所以值为true或false)
var a = 5, b = 6;
alert(a>b); // false
alert(!6 > 7); // false
var x = 100,y = '100';
alert(x==y); //true(只比较数值,不比较类型)
alert(x===y); //false(比较数值和类型)
alert( x != y ); //false(只比较数值,不比较类型)
alert( x !== y ); //true(比较数值和类型)
<5>逻辑运算符:&&、||、!
var h5 = 56, js = 67;
var r = h5 >= 60 && js <= 60;
alert( r ); // false
var r2 = h5 >= 60 || js >=60;
alert( r2 ); // true
var r3 = !(h5 > 60);
alert(r3); // true
var a = 5, b = 6;
alert( a < 1 && ++b > 5 ); // false
alert(b); // 5 (&&是短路运算符,全真才为真左边的a < 1 已经是false,所以他不去计算右边了,所以b = 6)
var a = 1 && 2+2;
alert(a); // 4 (因为左边为真,所以会继续去看右边)
var a = 0 && 2 + 2;
alert(a); // 0 (因为0转布尔值为false,左边为假,所以不会去看右边)
var a = 5,b = 6;
alert( a || ++b); // true
alert( b ); // 6 (左边的为true,不再去计算右边)
alert(3 && 6); //6
alert(0 && 6); //0
// 如果左右两边都为数值,0相当于false,非0相当于true
alert('hello' && 'world'); //world
alert('' && 'word'); //””
// 空字符串相等于false,非空字符串相当于true
// 判断一个年份是否是闰年(能被4整除但不能被100整除,或者能被400整除)
var year = 2018;
var r = year % 4 == 0 && year % 100 != 0 || year % 400 == 0 ? "闰年" : "平年";
alert(r);
十五、运算符的优先级
应用:
1:为抵抗洪水,战士连续作战89小时,编程计算共多少天零多少小时?
day = 89 / 24;
var house = day - parseInt(day);
alert(parseInt(day) + '天' + house +"小时");
var wet = 80;
var loa = 5 / 9.0 * (wet - 32);
alert(wet + "华氏度" + '、' + loa + '摄氏度');
十六、强制转换
1:Number强制转换
// 数值:转换后还是原来的值
var num = Number(324);
alert(typeof num + num); // number 324
// 数值:转换后还是原来的值
var num = Number(324);
alert(typeof num + num); //number 324
// 字符串:如果可以被解析为数值,则转换为相应的数值
Number('324') // 324
var num =Number('324');
alert(typeof num + num); //number 324
// 字符串:如果不可以被解析为数值,返回NaN
var num =Number('324abc');
alert(typeof num + num); //number NaN
// 空字符串转为0
var num =Number('');
alert(typeof num + num); //number 0
// 布尔值:true 转成1,false 转成0
var num = Number(true);
alert(typeof num + num); //number 1
var num = Number(false);
alert(typeof num + num); //number 0
// undefined:转成 NaN
Number(undefined) // NaN
var num =Number(undefined );
alert(typeof num + num); //number NaN
// null:转成0
var num =Number(null);
alert(typeof num + num); //number 0
Number({a: 1}) // NaN
Number([1, 2, 3]) // NaN
var obj = Number ({});
alert(typeof obj + obj); // number NaN
var num = Number([]);
alert(typeof num + num); //number 0
- 调用对象自身的valueOf方法。如果返回原始类型的值,则直接对该值使用Number函数,不再进行后续步骤。
- 如果valueOf方法返回的还是对象,则改为调用对象自身的toString方法。如果返回原始类型的值,则对该值使用Number函数,不再进行后续步骤。
- 如果toString方法返回的是对象,就报错。
2:String强制转换
var str = String(123.234);
alert(typeof(str)+ str); // string 123.234
var str = String('he');
alert(typeof(str)+ str); // string he
var str = String(true);
alert(typeof(str)+ str); // string true
var str = String(false);
alert(typeof(str)+ str); // string false
var str = String(undefined);
alert(typeof(str)+ str); // string undefined
var str = String(unll);
alert(typeof(str)+ str); // string null
(2)参数为对象的转换规则:
var str = String({});
alert(typeof(str)+ str); // string [object Object]
var str = String([1,3]);
alert(typeof (str)+ str); // string 1,3
- 先调用对象自身的toString方法。如果返回原始类型的值,则对该值使用String函数,不再进行以下步骤。
- 如果toString方法返回的是对象,再调用valueOf方法。如果返回原始类型的值,则对该值使用String函数,不再进行以下步骤。
- 如果valueOf方法返回的是对象,就报错。
3:Boolean强制转换
var num = Boolean('');
alert(typeof(num) + unm); // boolean false
var num = Boolean([]);
alert(typeof(num) + unm); // boolean true
十七、自动转换
1:自动转换为布尔值
if ( !undefined && !null && !0 && !NaN && !'' ) { console.log('true'); } // true
// 写法一 expression ? true : false
// 写法二 !! expression
2:自动转换为字符串
console.log('5' + 1) // '51'
console.log('5' + true) // '5true'
console.log('5' + false) // '5false'
console.log('5' + {}) // '5[object Object]'
console.log('5' + []) // '5'
console.log('5' + function (){}) // '5function (){}'
console.log('5' + undefined) // '5undefined'
console.log('5' + null) // '5null'
3:自动转换为数值
console.log('5' - '2') // 3
console.log('5' * '2') // 10
console.log(true - 1) // 0
console.log(false - 1) // -1
console.log('1' - 1) // 0
console.log('5' * []) // 0
console.log(false / '5') // 0
console.log('abc' - 1) // NaN
console.log(+'abc') // NaN
console.log( -'abc') // NaN
console.log(+true) // 1
console.log( -false) // 0
console.log(null == undefined) // true
console.log(null == false ) // false
console.log(undefined == false) // false
十八、八进制和十六进制介绍
八 进 制:一种以8为基数的计数法。采用0,1,2,3,4,5,6,7八个数字,逢八进1。js以数字0开始表明该数字是八进制。
var b = 010;
alert(b); //8
十九、代码规范
- 1:代码缩进。
- 2:+、=等运算符两边的空格。
- 3:语句结束以分号结尾。
- 4:小括号的嵌套,要加空格。
- 5:双引号、单引号的嵌套。
应用:
1:计算两个文本框的和。
请输入数字:<input type="text" id="num1" /><br />
请输入数字:<input type="text" id="num2" /><br />
<input type="submit" value="求和" id="btn" />
<script type="text/javascript">
var num1 = document.getElementById('num1');
var num2 = document.getElementById('num2');
var btn = document.getElementById('btn');
btn.onclick = function () {
var val1 = Number(num1.value); //value得到的所有值都是字符串
var val2 =Number(num2.value);
alert('两个数的和为' + (val1 + val2));
}
</script>
2:
var k=0;
alert(k++ + ++k +k +k++)。 // 6
3:掌握逻辑运算的意义。
4:掌握八进制、十六进制的写法。
5:掌握NaN的含义。
综合应用:
计算两个文本框的加减乘除。
- 要求:
- 1) 使用parseInt方法类型转换。
2) 计算结果使用Math.round方法四舍五入
两个数的加减乘除:<br />
<input type="text" id="num1" />
<input type="text" id="fuhao" />
<input type="text" id="num2" /><br />
<input type="submit" id="btn" value="计算" />
<script type="text/javascript">
var num1 = document.getElementById('num1');
var num2 = document.getElementById('num2');
var fuhao = document.getElementById('fuhao');
var btn = document.getElementById('btn');
btn.onclick = function () {
var val1 = parseInt(num1.value);
var val2 = fuhao.value;
var val3 = parseInt(num2.value);
switch (val2) {
case '+' :
alert(Math.round(val1 + val3));
break;
case '-' :
alert(Math.round(val1 - val3));
break;
case '*' :
alert(Math.round(val1 * val3));
break;
case '/' :
alert(Math.round(val1 / val3));
break;
default :
alert('请输入正确的符号');
break;
}
}
</script>
CSDN-Ada助手: 恭喜用户写了第18篇博客!标题很吸引人,我也遇到过类似的问题。对于移动端开发中的字体大小变大问题,你的博客提供了很有用的解决方案吗?如果可以的话,下一步你可以考虑分享一些其他移动端开发中常见的问题和解决方法,这样能给读者更多帮助。希望你能继续写出优质的博客,谢谢你的分享!
CSDN-Ada助手: 恭喜您完成第17篇博客!标题上的“mac电脑上安装多个node版本”这个话题非常实用,对于使用mac电脑的开发者来说是一篇很好的指南。您的分享对于我们这些需要在不同项目中切换node版本的开发者来说非常有帮助。 接下来,我建议您可以考虑扩展这个话题,比如可以分享如何在其他操作系统上安装多个node版本,或者深入讲解在使用多个node版本时可能遇到的一些常见问题及解决方法。这样的话,读者能够更全面地了解如何灵活使用不同的node版本,提高开发效率。期待您的下一篇文章!谢谢您的分享!